plhw57tbe
/
SoftwareMethodology
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新 'src/DjangoBlog-master/templates/owntracks/show_maps.html'

Browse Source
fz_branch
pa2g3nmk9 4 months ago
parent 4748fd93b9
commit 49cc934f20
1 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File

77
src/DjangoBlog-master/templates/owntracks/show_maps.html
Unescape View File

@ -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(); {# 开始播放轨迹 #}
})
});

Write Preview
Loading…
Cancel
Save