<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title th:text="${article.title}">详情</title>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"></meta>
</head>
<style>
    body, html {
        padding: 0;
        margin: 0;
    }

    body {
        width: 100%;
    }

    .textBox {
        width: 90%;
        margin: 0 auto;
        background: #fff;
        position: relative;
    }

    .title {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        font-size: 1.5em;
        font-weight: 700;
        color: #000000;
        line-height: 30px;
        margin-top: 30px;
    }
    .date {
        /* display: flex; */
        width: 100%;
        /* margin: 0 auto; */
        margin-top: 36px;
    }
    .dateTitle {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #A5A5A5;
    }
    .time {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #009BFF;
        
    }
    .content {
        width: 100%;
        margin: 0 auto;
        margin-top: 36px;
    }

    body::-webkit-scrollbar {
        display: none
    }
    .banner {
        width: 100%;
        margin: 0 auto;
        height: 200px;
    }
</style>
<body>
<div class="textBox">
    <div class="title"> [(${article.title})]</div>
    <div class="date">
        <img th:if="${article.image}" src="" th:attr="src=@{(${article.image})}" class="banner">
    </div>
    <div class="content">[(${article.content})]</div>
    <div th:unless="${#lists.isEmpty(article.meta)}" id="container"></div>
</div>
</body>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=FC4BZ-B4OYQ-AKA5R-GLCPD-HVAAS-RBFQV "></script>
<script th:inline="javascript">
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    // longitude
    // latitude
    // meta
    var article = [[${article}]];
    function initMap() {
        //定义地图中心点坐标
        var center = new TMap.LatLng(article.meta.latitude, article.meta.longitude);
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45    //设置地图旋转角度
        });
        var marker = new TMap.MultiMarker({
            map: map,
            styles: {
            // 点标记样式
            marker: new TMap.MarkerStyle({
                width: 20, // 样式宽
                height: 30, // 样式高
                anchor: { x: 10, y: 30 }, // 描点位置
            }),
            },
            geometries: [
            // 点标记数据数组
            {
                // 标记位置(纬度，经度，高度)
                position: center,
                id: 'marker',
            },
            ],
        });
    }
    if (article.meta && article.meta.latitude) initMap();
</script>
</html>
