var layer;
|
|
$(document).ready(function () {
|
layui.use(['layer'], function () {
|
layer = layui.layer;
|
});
|
});
|
|
function initMap() {
|
// 检查高德地图API是否加载成功
|
if (typeof AMap === 'undefined') {
|
layer.msg("地图加载失败，请检查网络连接！", {icon: 2});
|
return;
|
}
|
|
// 检查容器是否存在
|
var mapContainer = document.getElementById("map");
|
if (!mapContainer) {
|
layer.msg("地图容器未找到！", {icon: 2});
|
return;
|
}
|
|
// 检查数据
|
if (!patrolRecordList || patrolRecordList.length === 0) {
|
layer.msg("暂无轨迹数据！", {icon: 2});
|
var defaultPoint = [116.404, 39.915]; // 高德地图使用数组格式[经度,纬度]
|
map = new AMap.Map("map", {
|
zoom: 12,
|
center: defaultPoint
|
});
|
return;
|
}
|
|
// ========== 高德地图初始化与轨迹渲染 ==========
|
// 1. 初始化地图
|
var map = new AMap.Map("map", {
|
zoom: 13,
|
center: [116.404, 39.915] // 默认中心点
|
});
|
|
// 2. 获取轨迹点数据
|
if (patrolRecordList.length === 0) {
|
layer.msg("暂无轨迹数据！", {icon: 2});
|
map.setZoom(14);
|
return;
|
}
|
|
// 3. 构造轨迹点数组和标记点数组
|
var points = []; // 轨迹坐标点
|
var markers = []; // 地图标记点
|
var cardElements = document.querySelectorAll('.track-card'); // 所有卡片元素
|
|
patrolRecordList.forEach(function (record, index) {
|
var lng = record.longitude;
|
var lat = record.latitude;
|
var point = [lng, lat]; // 高德地图使用数组格式[经度,纬度]
|
points.push(point);
|
|
// 创建地图标记点
|
var marker = new AMap.Marker({
|
position: point,
|
map: map
|
});
|
markers.push(marker);
|
|
// 标记点弹窗信息
|
var infoWindow = new AMap.InfoWindow({
|
content: `
|
<div style="font-size: 12px; line-height: 1.8; padding: 10px;">
|
<p><strong>巡检人：</strong>${record.createBy}</p>
|
<p><strong>巡检时间：</strong>${new Date(record.createTime).toLocaleString()}</p>
|
<p><strong>经纬度：</strong>${lat}, ${lng}</p>
|
</div>
|
`,
|
offset: new AMap.Pixel(0, -30)
|
});
|
|
// 标记点点击事件：高亮对应卡片 + 显示弹窗
|
marker.on('click', function () {
|
// 移除所有卡片的active样式
|
cardElements.forEach(el => el.classList.remove('active'));
|
// 高亮当前卡片
|
cardElements[index].classList.add('active');
|
// 滚动到当前卡片
|
cardElements[index].scrollIntoView({behavior: 'smooth', block: 'center'});
|
// 显示弹窗
|
infoWindow.open(map, point);
|
});
|
|
// 卡片点击事件：定位到对应标记点 + 高亮卡片
|
cardElements[index].addEventListener("click", function () {
|
// 移除所有卡片的active样式
|
cardElements.forEach(el => el.classList.remove('active'));
|
// 高亮当前卡片
|
this.classList.add('active');
|
// 地图中心定位到当前标记点
|
map.setCenter(point);
|
map.setZoom(15);
|
// 显示标记点弹窗
|
infoWindow.open(map, point);
|
// 轻微动画效果（高德地图没有直接的bounce动画，可以使用跳动效果）
|
marker.setAnimation('AMAP_ANIMATION_DROP');
|
});
|
});
|
|
// 寻找points中间的点位作为中心点
|
var midIndex = Math.floor(points.length / 2);
|
var centerPoint = points[midIndex] || [116.404, 39.915];
|
map.setCenter(centerPoint);
|
|
// 4. 绘制轨迹折线
|
var polyline = new AMap.Polyline({
|
path: points,
|
strokeColor: "#1890ff", // 主色调：蓝色
|
strokeWeight: 6, // 折线宽度
|
strokeOpacity: 0.8, // 透明度
|
isOutline: true,
|
outlineColor: '#ffffff',
|
borderWeight: 1
|
});
|
map.add(polyline);
|
|
// 5. 地图自适应所有轨迹点
|
map.setFitView();
|
|
// 6. 初始提示
|
layer.msg("轨迹加载完成！点击卡片可定位到对应点位", {
|
icon: 1,
|
time: 3000,
|
offset: ['20px', '20px']
|
});
|
}
|
|
// 页面加载完成后初始化地图
|
window.onload = initMap;
|
