2025-08-01 17:02:21 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
|
|
|
|
|
|
<script type="text/javascript"
|
|
|
|
|
|
src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<title>百度地图</title>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
#map-container {
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/** 去除百度地图的水印和logo */
|
|
|
|
|
|
.BMap_cpyCtrl,
|
|
|
|
|
|
.anchorBL {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="map-container"></div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
2025-09-23 16:16:46 +08:00
|
|
|
|
document.addEventListener('UniAppJSBridgeReady', function () {
|
|
|
|
|
|
// // 1. 初始化地图
|
|
|
|
|
|
|
|
|
|
|
|
function getUrlParams() {
|
|
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
2025-10-28 10:18:47 +08:00
|
|
|
|
const projectInfo = JSON.parse(params.get('projectInfo'))
|
|
|
|
|
|
return projectInfo
|
2025-08-01 17:02:21 +08:00
|
|
|
|
|
2025-09-23 16:16:46 +08:00
|
|
|
|
}
|
2025-08-01 17:02:21 +08:00
|
|
|
|
|
2025-10-28 10:18:47 +08:00
|
|
|
|
const projectInfo = getUrlParams()
|
2025-09-23 16:16:46 +08:00
|
|
|
|
|
2025-10-28 10:18:47 +08:00
|
|
|
|
initMap(projectInfo)
|
2025-09-23 16:16:46 +08:00
|
|
|
|
|
|
|
|
|
|
function initMap(proInfo) {
|
|
|
|
|
|
const map = new BMapGL.Map('map-container') // 创建地图实例
|
2025-10-28 10:18:47 +08:00
|
|
|
|
let point = new BMapGL.Point(proInfo[0].lng, proInfo[0].lat) // 创建点坐标
|
2025-09-23 16:16:46 +08:00
|
|
|
|
map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
|
|
|
|
|
|
map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
2025-10-28 10:18:47 +08:00
|
|
|
|
projectInfo.forEach(item => {
|
|
|
|
|
|
handleProjectInfoOnMap(map, item)
|
|
|
|
|
|
})
|
2025-09-23 16:16:46 +08:00
|
|
|
|
|
2025-10-28 10:18:47 +08:00
|
|
|
|
// handleProjectInfoOnMap(map, proInfo)
|
2025-09-23 16:16:46 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function handleProjectInfoOnMap(map, projectInfo) {
|
|
|
|
|
|
// 示例1: 如果项目信息包含经纬度，移动地图到该位置
|
|
|
|
|
|
if (projectInfo.lng && projectInfo.lat) {
|
2025-10-28 10:18:47 +08:00
|
|
|
|
|
|
|
|
|
|
|
2025-09-23 16:16:46 +08:00
|
|
|
|
const projectPoint = new BMapGL.Point(projectInfo.lng, projectInfo.lat);
|
|
|
|
|
|
map.centerAndZoom(projectPoint, 15); // 移动并放大到项目位置
|
|
|
|
|
|
const icon = new BMapGL.Icon('./image/location.png', new BMapGL.Size(36, 36), {
|
|
|
|
|
|
anchor: new BMapGL.Size(12, 24), // 图标锚点，使图标底部中心点与坐标点重合
|
|
|
|
|
|
})
|
|
|
|
|
|
// 创建marker并应用自定义图标
|
|
|
|
|
|
const marker = new BMapGL.Marker(projectPoint, {
|
|
|
|
|
|
icon: icon,
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
map.addOverlay(marker)
|
|
|
|
|
|
|
|
|
|
|
|
|
2025-10-28 10:18:47 +08:00
|
|
|
|
// const infoWindow = new BMapGL.InfoWindow(`
|
|
|
|
|
|
// <h3 style="color: #002db6; margin: 0 0 10px 0; font-size: 18px;">${projectInfo.proName}</h3>
|
|
|
|
|
|
// <p>负责人: ${projectInfo.chargePerson}</p>
|
|
|
|
|
|
// <p>所在地: ${projectInfo.location}</p>
|
|
|
|
|
|
// `);
|
2025-09-23 16:16:46 +08:00
|
|
|
|
|
|
|
|
|
|
const label = new BMapGL.Label(projectInfo.proName, {
|
|
|
|
|
|
position: projectPoint,
|
|
|
|
|
|
offset: new BMapGL.Size(0, 0), // 调整偏移量，使文字在marker正下方
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 设置label样式
|
|
|
|
|
|
label.setStyle({
|
|
|
|
|
|
color: '#002db6',
|
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
|
border: 'none',
|
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
padding: '5px',
|
|
|
|
|
|
whiteSpace: 'nowrap',
|
|
|
|
|
|
fontSize: '18px',
|
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
|
transform: 'translateX(-45%)' // 关键：让Label向左移动自身宽度的一半
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
map.addOverlay(label)
|
|
|
|
|
|
marker.addEventListener('click', function () {
|
2025-10-28 10:18:47 +08:00
|
|
|
|
// map.openInfoWindow(infoWindow, projectPoint);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 向父组件传参然后跳转相关页面
|
|
|
|
|
|
uni.postMessage({
|
|
|
|
|
|
data: {
|
|
|
|
|
|
action: 'navigateToProject',
|
|
|
|
|
|
projectInfo: projectInfo
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2025-09-23 16:16:46 +08:00
|
|
|
|
});
|
2025-08-01 17:02:21 +08:00
|
|
|
|
}
|
2025-09-23 16:16:46 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-08-01 17:02:21 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
