<!DOCTYPE html>
|
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<th:block th:include="include :: header('轨迹图展示')"/>
|
<!-- 百度地图API -->
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=R3FfyIEbBAWNckTqRSopHQktdkgp924F"></script>
|
</head>
|
<body>
|
<!-- 地图容器 -->
|
<div class="container-div" id="map-container">
|
</div>
|
<th:block th:include="include :: footer"/>
|
<script th:inline="javascript">
|
// 1. 获取后端传递的轨迹数据
|
const trackPoints = [[${trackPoints}]];
|
// 转换为百度地图坐标数组
|
const path = trackPoints.map(point => new BMapGL.Point(point.longitude, point.latitude));
|
|
// 2. 初始化地图
|
function initMap() {
|
// 创建地图实例，中心点设为第一个轨迹点
|
const map = new BMapGL.Map("map-container");
|
const centerPoint = path[0] || new BMapGL.Point(116.404, 39.915);
|
map.centerAndZoom(centerPoint, 14); // 14为地图缩放级别
|
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
|
// 3. 添加轨迹线
|
const polyline = new BMapGL.Polyline(path, {
|
strokeColor: "#3388ff", // 线颜色
|
strokeWeight: 5, // 线宽度
|
strokeOpacity: 0.8 // 线透明度
|
});
|
map.addOverlay(polyline);
|
|
// 4. 为每个轨迹点添加标记和信息窗口
|
trackPoints.forEach((point, index) => {
|
const markerPoint = new BMapGL.Point(point.longitude, point.latitude);
|
// 创建标记
|
const marker = new BMapGL.Marker(markerPoint);
|
map.addOverlay(marker);
|
|
// 创建信息窗口内容
|
const infoWindow = new BMapGL.InfoWindow(`
|
<div style="font-size:14px;">
|
<p>序号：${index + 1}</p>
|
<p>经度：${point.longitude}</p>
|
<p>纬度：${point.latitude}</p>
|
<p>时间：${point.createTime}</p>
|
</div>
|
`);
|
|
// 点击标记显示信息窗口
|
marker.addEventListener("click", () => {
|
map.openInfoWindow(infoWindow, markerPoint);
|
});
|
});
|
|
// 5. 调整地图视野以显示整个轨迹
|
if (path.length > 1) {
|
map.setViewport(path); // 自动适配轨迹范围
|
}
|
}
|
|
// 页面加载完成后初始化地图
|
window.onload = initMap;
|
</script>
|
</body>
|
</html>
|
