From 49cc934f2054c475d6b1cc07ddc2477eb87cb608 Mon Sep 17 00:00:00 2001
From: pa2g3nmk9 <3474779149@qq.com>
Date: Thu, 6 Nov 2025 23:22:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20'src/DjangoBlog-master/tem?=
 =?UTF-8?q?plates/owntracks/show=5Fmaps.html'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/owntracks/show_maps.html        | 77 ++++++++++---------
 1 file changed, 39 insertions(+), 38 deletions(-)
diff --git a/src/DjangoBlog-master/templates/owntracks/show_maps.html b/src/DjangoBlog-master/templates/owntracks/show_maps.html
index 3aeda36..4cf2d49 100644
--- a/src/DjangoBlog-master/templates/owntracks/show_maps.html
+++ b/src/DjangoBlog-master/templates/owntracks/show_maps.html
@@ -1,8 +1,9 @@
+```
 <!doctype html>
 <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta charset="utf-8">  {# 设置字符编码 #}
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">  {# 兼容IE浏览器 #}
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">  {# 移动端视口设置 #}
     <style>
         html,
         body,
@@ -10,7 +11,7 @@
             width: 100%;
             height: 100%;
             margin: 0px;
-        }
+        }  {# 设置全屏地图容器样式 #}
 
         #loadingTip {
             position: absolute;
@@ -21,62 +22,62 @@
             background: red;
             color: #fff;
             font-size: 14px;
-        }
+        }  {# 加载提示样式 #}
     </style>
-    <title>运动轨迹</title>
+    <title>运动轨迹</title>  {# 页面标题 #}
 </head>
 
 <body>
-<div id="container"></div>
-<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.4&key=9c89950bdfbcecd46f814309384655cd'></script>
+<div id="container"></div>  {# 地图容器 #}
+<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.4&key=9c89950bdfbcecd46f814309384655cd'></script>  {# 高德地图API #}
 <!-- UI组件库 1.0 -->
-<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
+<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>  {# 高德地图UI组件 #}
 <script type="text/javascript">
-    //创建地图
+    //创建地图  {# 初始化地图 #}
     var map = new AMap.Map('container', {
-        zoom: 4
+        zoom: 4  {# 初始缩放级别 #}
     });
 
-    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
+    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {  {# 加载路径简化和jQuery库 #}
 
-        if (!PathSimplifier.supportCanvas) {
+        if (!PathSimplifier.supportCanvas) {  {# 检查Canvas支持 #}
             alert('当前环境不支持 Canvas！');
             return;
         }
 
-        //just some colors
+        //just some colors  {# 定义颜色数组 #}
         var colors = [
             "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
             "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
             "#651067", "#329262", "#5574a6", "#3b3eac"
         ];
 
-        var pathSimplifierIns = new PathSimplifier({
+        var pathSimplifierIns = new PathSimplifier({  {# 创建路径简化实例 #}
             zIndex: 100,
             //autoSetFitView:false,
             map: map, //所属的地图实例
 
-            getPath: function (pathData, pathIndex) {
+            getPath: function (pathData, pathIndex) {  {# 获取路径数据 #}
 
                 return pathData.path;
             },
-            getHoverTitle: function (pathData, pathIndex, pointIndex) {
+            getHoverTitle: function (pathData, pathIndex, pointIndex) {  {# 获取悬停标题 #}
 
                 if (pointIndex >= 0) {
                     //point
-                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
+                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;  {# 显示点信息 #}
                 }
 
-                return pathData.name + '，点数量' + pathData.path.length;
+                return pathData.name + '，点数量' + pathData.path.length;  {# 显示路径点数量 #}
             },
-            renderOptions: {
+            renderOptions: {  {# 渲染选项 #}
                 pathLineStyle: {
-                    dirArrowStyle: true
+                    dirArrowStyle: true  {# 方向箭头样式 #}
                 },
-                getPathStyle: function (pathItem, zoom) {
+                getPathStyle: function (pathItem, zoom) {  {# 获取路径样式 #}
 
-                    var color = colors[pathItem.pathIndex % colors.length],
-                        lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));
+                    var color = colors[pathItem.pathIndex % colors.length],  {# 循环使用颜色 #}
+                        lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));  {# 根据缩放级别计算线宽 #}
 
                     return {
                         pathLineStyle: {
@@ -84,46 +85,46 @@
                             lineWidth: lineWidth
                         },
                         pathLineSelectedStyle: {
-                            lineWidth: lineWidth + 2
+                            lineWidth: lineWidth + 2  {# 选中状态线宽 #}
                         },
                         pathNavigatorStyle: {
-                            fillStyle: color
+                            fillStyle: color  {# 导航点填充颜色 #}
                         }
                     };
                 }
             }
         });
 
-        window.pathSimplifierIns = pathSimplifierIns;
+        window.pathSimplifierIns = pathSimplifierIns;  {# 将实例挂载到全局窗口对象 #}
 
-        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
+        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);  {# 添加加载提示 #}
 
-        $.getJSON('/owntracks/get_datas?date={{ date }}', function (d) {
+        $.getJSON('/owntracks/get_datas?date={{ date }}', function (d) {  {# 获取轨迹数据 #}
 
             if (!d || !d.length) {
-                $("#loadingTip").text("没有数据...")
+                $("#loadingTip").text("没有数据...")  {# 无数据提示 #}
                 return;
             }
-            $('#loadingTip').remove();
-            pathSimplifierIns.setData(d);
+            $('#loadingTip').remove();  {# 移除加载提示 #}
+            pathSimplifierIns.setData(d);  {# 设置路径数据 #}
 
             //initRoutesContainer(d);
 
             function onload() {
-                pathSimplifierIns.renderLater();
+                pathSimplifierIns.renderLater();  {# 延迟渲染 #}
             }
 
             function onerror(e) {
-                alert('图片加载失败！');
+                alert('图片加载失败！');  {# 错误处理 #}
             }
 
-            d.forEach(function (item, index) {
+            d.forEach(function (item, index) {  {# 遍历数据创建路径导航 #}
                 var navg1 = pathSimplifierIns.createPathNavigator(index, {
-                    loop: true,
-                    speed: 1000,
+                    loop: true,  {# 循环播放 #}
+                    speed: 1000,  {# 播放速度 #}
                 });
 
-                navg1.start();
+                navg1.start();  {# 开始播放轨迹 #}
             })
 
         });
