关于页面地图修改为可缩放地图（弃用静态图片方式）

settings.yaml

@@ -1298,48 +1298,53 @@ spec:
           label: 51la 网站统计
           help: 统计ID
           placeholder: 请输入内容
-        - $formkit: group
-          name: map
-          label: 地图相关配置
-          value:
-            StrengthenTitle:
-            background:
-            backgroundDark:
-            authorInfo:
-          children:
         - $formkit: text
-              name: StrengthenTitle
+          name: mapLocation
-              label: 居住地
+          label: 居住地坐标
-              placeholder: 请输入内容
+          help: 示例：22.5824,113.2154
-            - $formkit: attachment
+          placeholder: 请输入经纬度坐标
-              name: background
+        # - $formkit: group
-              label: 地图亮色模式背景
+        #   name: map
-              placeholder: 请输入内容
+        #   label: 地图相关配置
-            - $formkit: attachment
+        #   value:
-              name: backgroundDark
+        #     StrengthenTitle:
-              label: 地图暗色模式背景
+        #     background:
-              placeholder: 请输入内容
+        #     backgroundDark:
-            - $formkit: repeater
+        #     authorInfo:
-              name: authorInfo
+        #   children:
-              label: 个人信息
+        #     - $formkit: text
-              min: 3
+        #       name: StrengthenTitle
-              max: 3
+        #       label: 居住地
-              children:
+        #       placeholder: 请输入内容
-                - $formkit: text
+        #     - $formkit: attachment
-                  name: authorInfoTitle
+        #       name: background
-                  label: 标题
+        #       label: 地图亮色模式背景
-                  placeholder: 请输入内容
+        #       placeholder: 请输入内容
-                  value: 标题
+        #     - $formkit: attachment
-                - $formkit: text
+        #       name: backgroundDark
-                  name: authorInfoContent
+        #       label: 地图暗色模式背景
-                  label: 内容
+        #       placeholder: 请输入内容
-                  placeholder: 请输入内容
+        #     - $formkit: repeater
-                  value: 内容
+        #       name: authorInfo
-                - $formkit: color
+        #       label: 个人信息
-                  name: authorInfoColor
+        #       min: 3
-                  label: 内容颜色
+        #       max: 3
-                  placeholder: 请输入内容
+        #       children:
-                  value: '#ffffff'
+        #         - $formkit: text
+        #           name: authorInfoTitle
+        #           label: 标题
+        #           placeholder: 请输入内容
+        #           value: 标题
+        #         - $formkit: text
+        #           name: authorInfoContent
+        #           label: 内容
+        #           placeholder: 请输入内容
+        #           value: 内容
+        #         - $formkit: color
+        #           name: authorInfoColor
+        #           label: 内容颜色
+        #           placeholder: 请输入内容
+        #           value: '#ffffff'
         - $formkit: textarea
           name: xjlc
           label: 心路历程

templates/modules/widgets/about-widgets/statistics-map.html

@@ -18,7 +18,8 @@
 
 
     <div class="author-content-item-group column mapAndInfo">
-        <div class="author-content-item map single">
+        <div class="author-content-item map single" style="padding: 0;">
+            <div id="mapContainer" style="height: 120%;"></div>
             <span class="map-title">我现在住在
                 <b>[[${theme.config.about.map.StrengthenTitle}]]</b></span>
         </div>
@@ -39,7 +40,7 @@
                     th:text="${texts[2].authorInfoContent}">BI工程师</span>
             </div>
         </div>
-        <style>
+        <!-- <style>
             .author-content-item.map {
                 background: url([[${theme.config.about.map.background}]]) no-repeat center;
                 min-height: 160px;
@@ -56,7 +57,7 @@
                 background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center;
                 background-size: 100%;
             }
-        </style>
+        </style> -->
     </div>
     <script th:src="@{/assets/libs/countup/countup.js}"></script>
     <script>
@@ -123,11 +124,44 @@
                     const observer = new IntersectionObserver(callback, options);
                     observer.observe(statisticElement);
                 }            
-
                 statisticUP()
-
             });
     </script>
+    <script>
+        var e = document.createElement("script");
+        e.type = "text/javascript",
+        e.defer = !0,
+        e.src = "https://map.qq.com/api/gljs?v=1.exp&key=YZOBZ-34HLF-K3OJV-JV6IN-OALJ5-7MBAC",
+        document.body.appendChild(e);
+        var t = new TMap.LatLng([[${theme.config.about.mapLocation}]])
+            , n = new TMap.Map(document.getElementById("mapContainer"),{
+            center: t,
+            zoom: 12,
+            // pitch: 43.5,
+            // rotation: 45
+        });
+        n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM),
+        n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION),
+        n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE),
+        new TMap.MultiMarker({
+            map: n,
+            styles: {
+                marker: new TMap.MarkerStyle({
+                    width: 20,
+                    height: 30,
+                    anchor: {
+                        x: 10,
+                        y: 30
+                    }
+                })
+            },
+            geometries: [{
+                id: "marker",
+                position: t
+            }]
+        }),
+        document.querySelector("mapContainer div").querySelectorAll("div")[1].remove()
+    </script>
 </div>
 
 </html>