122 lines
4.1 KiB
HTML
122 lines
4.1 KiB
HTML
<!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">
|
||
document.addEventListener('UniAppJSBridgeReady', function () {
|
||
// // 1. 初始化地图
|
||
|
||
function getUrlParams() {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const projectInfo = JSON.parse(params.get('projectInfo'))
|
||
return projectInfo
|
||
|
||
}
|
||
|
||
const projectInfo = getUrlParams()
|
||
|
||
initMap(projectInfo)
|
||
|
||
function initMap(proInfo) {
|
||
const map = new BMapGL.Map('map-container') // 创建地图实例
|
||
let point = new BMapGL.Point(proInfo[0].lng, proInfo[0].lat) // 创建点坐标
|
||
map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
|
||
map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||
projectInfo.forEach(item => {
|
||
handleProjectInfoOnMap(map, item)
|
||
})
|
||
|
||
// handleProjectInfoOnMap(map, proInfo)
|
||
}
|
||
|
||
function handleProjectInfoOnMap(map, projectInfo) {
|
||
// 示例1: 如果项目信息包含经纬度，移动地图到该位置
|
||
if (projectInfo.lng && projectInfo.lat) {
|
||
|
||
|
||
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)
|
||
|
||
|
||
// 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>
|
||
// `);
|
||
|
||
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 () {
|
||
// map.openInfoWindow(infoWindow, projectPoint);
|
||
|
||
|
||
// 向父组件传参然后跳转相关页面
|
||
uni.postMessage({
|
||
data: {
|
||
action: 'navigateToProject',
|
||
projectInfo: projectInfo
|
||
}
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
</html> |