127 lines
4.5 KiB
HTML
127 lines
4.5 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. 初始化地图
|
||
// const map = new BMapGL.Map('map-container') // 创建地图实例
|
||
// let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||
// map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
|
||
// map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||
|
||
function getUrlParams() {
|
||
const params = new URLSearchParams(window.location.search);
|
||
return {
|
||
lat: parseFloat(params.get('lat')) || 31.8734, // 默认值
|
||
lng: parseFloat(params.get('lng')) || 117.13805, // 默认值
|
||
proName: decodeURIComponent(params.get('proName')) || '-', // 默认值
|
||
chargePerson: decodeURIComponent(params.get('chargePerson')) || '-', // 默认值
|
||
location: decodeURIComponent(params.get('location')) || '-' // 默认值
|
||
};
|
||
|
||
}
|
||
|
||
const { lat, lng, proName, chargePerson, location } = getUrlParams()
|
||
const proInfo = {
|
||
lat,
|
||
lng,
|
||
proName,
|
||
chargePerson,
|
||
location
|
||
}
|
||
|
||
|
||
|
||
initMap(proInfo)
|
||
|
||
function initMap(proInfo) {
|
||
const map = new BMapGL.Map('map-container') // 创建地图实例
|
||
let point = new BMapGL.Point(proInfo.lng, proInfo.lat) // 创建点坐标
|
||
map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
|
||
map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||
|
||
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);
|
||
});
|
||
}
|
||
}
|
||
|
||
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
</html> |