98 lines
3.5 KiB
HTML
98 lines
3.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 () {
|
|
// const map = new BMapGL.Map('map-container') // 创建地图实例
|
|
// let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
|
// map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
|
|
// map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
|
// })
|
|
|
|
// 存储从UniApp接收的数据
|
|
let receivedProjectInfo = null;
|
|
|
|
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) // 启用滚轮放大缩小
|
|
|
|
// 2. 监听UniApp发送的消息
|
|
uni.onMessage(function (message) {
|
|
|
|
// 3. 处理接收到的projectInfo数据
|
|
if (message.type === 'projectInfo' && message.data) {
|
|
receivedProjectInfo = message.data;
|
|
// 4. 根据接收的数据进行地图操作（示例）
|
|
handleProjectInfoOnMap(map, receivedProjectInfo);
|
|
}
|
|
});
|
|
})
|
|
|
|
// 根据项目信息操作地图的方法
|
|
function handleProjectInfoOnMap(map, projectInfo) {
|
|
// 示例1: 如果项目信息包含经纬度，移动地图到该位置
|
|
if (projectInfo.longitude && projectInfo.latitude) {
|
|
const projectPoint = new BMapGL.Point(projectInfo.longitude, projectInfo.latitude);
|
|
map.centerAndZoom(projectPoint, 15); // 移动并放大到项目位置
|
|
|
|
// 示例2: 在项目位置添加标记
|
|
// const marker = new BMapGL.Marker(projectPoint);
|
|
// map.addOverlay(marker);
|
|
|
|
const icon = new BMapGL.Icon(require('@/static/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)
|
|
|
|
// 示例3: 显示项目信息弹窗
|
|
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>
|
|
`);
|
|
marker.addEventListener('click', function () {
|
|
map.openInfoWindow(infoWindow, projectPoint);
|
|
});
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</html> |