var layer;
|
|
$(document).ready(function () {
|
layui.use(['layer'], function () {
|
layer = layui.layer;
|
});
|
});
|
function initMap() {
|
// 可删除代码开始
|
// 检查百度地图API是否加载成功
|
if (typeof BMapGL === '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 = new BMapGL.Point(116.404, 39.915);
|
map.centerAndZoom(defaultPoint, 12);
|
map.enableScrollWheelZoom(true);
|
return;
|
}
|
//可删除代码结束
|
|
// ========== 百度地图初始化与轨迹渲染 ==========
|
// 1. 初始化地图
|
var map = new BMapGL.Map("map");
|
// 2. 获取轨迹点数据
|
if (patrolRecordList.length === 0) {
|
layer.msg("暂无轨迹数据！", {icon: 2});
|
var defaultPoint = new BMapGL.Point(116.404, 39.915);
|
map.centerAndZoom(defaultPoint, 14);
|
map.enableScrollWheelZoom(true);
|
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 = new BMapGL.Point(lng, lat);
|
points.push(point);
|
|
// 创建地图标记点
|
var marker = new BMapGL.Marker(point);
|
markers.push(marker);
|
|
// 标记点弹窗信息
|
var infoWindow = new BMapGL.InfoWindow(`
|
<div style="font-size: 12px; line-height: 1.8;">
|
<p><strong>点位名称：</strong>${record.pointName}</p>
|
<p><strong>巡检人：</strong>${record.createBy}</p>
|
<p><strong>巡检时间：</strong>${new Date(record.createTime).toLocaleString()}</p>
|
<p><strong>经纬度：</strong>${lat}, ${lng}</p>
|
<p><strong>轨迹点ID：</strong>${record.id}</p>
|
</div>
|
`);
|
|
// 标记点点击事件：高亮对应卡片 + 显示弹窗
|
marker.addEventListener("click", function () {
|
// 移除所有卡片的active样式
|
cardElements.forEach(el => el.classList.remove('active'));
|
// 高亮当前卡片
|
cardElements[index].classList.add('active');
|
// 滚动到当前卡片
|
cardElements[index].scrollIntoView({behavior: 'smooth', block: 'center'});
|
// 显示弹窗
|
this.openInfoWindow(infoWindow);
|
});
|
|
// 卡片点击事件：定位到对应标记点 + 高亮卡片
|
cardElements[index].addEventListener("click", function () {
|
// 移除所有卡片的active样式
|
cardElements.forEach(el => el.classList.remove('active'));
|
// 高亮当前卡片
|
this.classList.add('active');
|
// 地图中心定位到当前标记点
|
map.centerAndZoom(point, 15);
|
// 显示标记点弹窗
|
marker.openInfoWindow(infoWindow);
|
// 轻微动画效果
|
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
|
setTimeout(() => marker.setAnimation(null), 1500);
|
});
|
|
map.addOverlay(marker);
|
});
|
|
// 寻找points中间的点位
|
var midIndex = Math.floor(points.length / 2);
|
const centerPoint = points[midIndex] || new BMapGL.Point(116.404, 39.915);
|
map.centerAndZoom(centerPoint, 13); // 14为地图缩放级别
|
|
// 4. 绘制轨迹折线
|
var polyline = new BMapGL.Polyline(points, {
|
strokeColor: "#1890ff", // 主色调：蓝色
|
strokeWeight: 6, // 折线宽度
|
strokeOpacity: 0.8, // 透明度
|
strokeStyle: 'solid' // 实线
|
});
|
map.addOverlay(polyline);
|
|
// // 5. 起点/终点特殊标记
|
// // 起点标记
|
// var startMarker = new BMapGL.Marker(points[0], {
|
// icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
|
// offset: new BMapGL.Size(12, 34),
|
// imageOffset: new BMapGL.Size(0, 0) // 起点图标
|
// })
|
// });
|
// map.addOverlay(startMarker);
|
// // startMarker.setLabel(new BMapGL.Label("起点：" + patrolRecordList[0].pointName, {
|
// // offset: new BMapGL.Size(30, -15),
|
// // styles: {fontSize: '12px', color: '#fff', background: '#52c41a', padding: '0px 14px', borderRadius: '3px'}
|
// // }));
|
// startMarker.setLabel(new BMapGL.Label("起点：" + patrolRecordList[0].pointName, {
|
// offset: new BMapGL.Size(30, -15),
|
// styles: {
|
// fontSize: '12px',
|
// color: '#fff',
|
// background: '#52c41a',
|
// padding: '8px 8px', // 左右padding保持一致（14px），保证背景两侧空间对称
|
// borderRadius: '3px',
|
// textAlign: 'center' // 新增：强制文字在背景内水平居中
|
// }
|
// }));
|
//
|
// // 终点标记
|
// var endMarker = new BMapGL.Marker(points[points.length - 1], {
|
// icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
|
// offset: new BMapGL.Size(12, 34),
|
// imageOffset: new BMapGL.Size(-114, 0) // 终点图标
|
// })
|
// });
|
// map.addOverlay(endMarker);
|
// endMarker.setLabel(new BMapGL.Label("终点：" + patrolRecordList[patrolRecordList.length - 1].pointName, {
|
// offset: new BMapGL.Size(30, -15),
|
// styles: {fontSize: '12px', color: '#fff', background: '#ff4d4f', padding: '0px 14px', borderRadius: '3px'}
|
// }));
|
|
// 6. 地图自适应所有轨迹点
|
map.enableScrollWheelZoom(true); // 开启滚轮缩放
|
map.setViewport(points); // 适配所有轨迹点
|
|
// 7. 初始提示
|
layer.msg("轨迹加载完成！点击卡片可定位到对应点位", {
|
icon: 1,
|
time: 3000,
|
offset: ['20px', '20px']
|
});
|
}
|
|
// 页面加载完成后初始化地图
|
window.onload = initMap;
|
