<!-- static/map.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>
高德地图</title>
<script src="https://webapi.amap.com/loader.js"></script>
<script src="https://cdn.bootcss.com/
vue/2.6.11/
vue.js"></script>
<style>
#map-container {
width: 100%;
height: 584px;
border-radius: 22px;
z-index: 4;
}
</style>
</head>
<body>
<div id="map-container"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'cf331d54f67e306ca5c0b17f7122d559'
};
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=f3323c24769b10828db07f07c0fcec0d&plugin=AMap.MarkerCluster">
</script>
<script>
// 解析URL参数
const params = new URLSearchParams(location.search);
const points = JSON.parse(params.get('points'));
const markers = JSON.parse(params.get('markers'));
// 初始化地图
const map = new AMap.Map('map-container', {
zoom: 10,
center: [points[0].lng, points[0].lat],
pitch: 45,
showBuildingBlock: true
});
markers.forEach(marker => {
new AMap.Marker({
position: [marker.lng, marker.lat],
title: marker.title,
map: map
}).on('click', () => {
// 向UniApp发送点击事件
window.parent.postMessage({
type: 'markerClick',
title: marker.title
}, '*');
});
});
//构建带标题的HTML内容
markers.forEach(marker => {
// 构建HTML内容（包含图片和标题）
const content = `
<div style="position:relative; text-align:center;">
<img src="/static/images/flag.png"
style="width:40px; height:50px; display:block;">
<div style="position:absolute; bottom:-90%; left:0%; transform:translateX(-50%);
background: linear-gradient(180deg, rgba(227, 57, 59, 0.2) 0%, rgba(244, 124, 88, 0.2) 100%); padding:6px 0;
border-radius: 18px; white-space:wrap;
font-family:ShuHuiTi; font-size: 12px;font-weight: bold;
margin-top:5px;border: 2px solid #F47C58;color:#E4393C;width:80px;">
${marker.title}
</div>
</div>
`;
const markerObj = new AMap.Marker({
position: [marker.lng, marker.lat],
content: content, // 使用HTML内容
anchor: 'bottom-center', // 锚点在底部中心
offset: new AMap.Pixel(0, -25) // 向上偏移
});
markerObj.on('click', () => {
console.log(marker, '111');
// 将数据转为字符串
const message = JSON.stringify({
type: 'markerClick',
title: marker.title
});
window.parent.postMessage(message, '*');
});
map.add(markerObj);
});
// 准备聚合数据
const clusterPoints = markers.map(marker => ({
lnglat: [marker.lng, marker.lat],
title: marker.title,
originalData: marker // 保留原始数据
}));
// 点聚合初始化函数
function initCluster() {
const cluster = new AMap.MarkerCluster(map, clusterPoints, {
gridSize: 80,
maxZoom: 15,
minClusterSize: 2,
renderClusterMarker: function(context) {
const count = context.count;
// 根据聚合点数量计算大小
const div = document.createElement('div');
div.className = 'cluster-marker';
div.style.backgroundColor = 'rgba(255,153,0,0.6)';
div.style.border = '1px solid rgba(255,153,0,1)';
div.style.borderRadius = '50%';
div.style.color = '#fff';
div.style.textAlign = 'center';
div.style.lineHeight = '40px';
div.style.width = '40px';
div.style.height = '40px';
div.innerHTML = count;
return div;
},
// 1. 添加标记点
renderMarker: function(context) {
const markerData = context.data[0].originalData;
// console.log('markerData.title', markerData.title);
const content = `
<div style="position:relative; text-align:center;">
<img src="/static/images/flag.png"
style="width:40px; height:50px; display:block;">
<div style="position:absolute; bottom:-90%; left:50%; transform:translateX(-50%);
background: linear-gradient(180deg, rgba(227, 57, 59, 0.2) 0%, rgba(244, 124, 88, 0.2) 100%);
padding:6px 0;
border-radius: 18px;
white-space:nowrap;
font-family:ShuHuiTi;
font-size: 12px;
font-weight: bold;
margin-top:5px;
border: 2px solid #F47C58;
color:#E4393C;
width:80px;">
${markerData.title}
</div>
</div>
`;
// console.log('markerDatat', markerData);
const markerObj = new AMap.Marker({
position: [markerData.lng, markerData.lat],
content: content,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, -25)
});
markerObj.on('click', function() {
window.parent.postMessage({
type: 'markerClick',
title: markerData.title
}, '*');
});
return markerObj;
}
});
}
// 加载点聚合插件
AMap.plugin('AMap.MarkerCluster', function() {
initCluster(); // 插件加载完成后执行初始化
});
// 2. 绘制路线
const path = points.map(p => [p.lng, p.lat]);
new AMap.Polyline({
path: path,
strokeColor: "#3366FF",
strokeWeight: 5,
map: map
});
// 3. 添加起点终点标记
points.forEach((point, i) => {
new AMap.Marker({
position: [point.lng, point.lat],
content: `<div class="point-label">${i === 0 ? '起' : '终'}</div>`,
offset: new AMap.Pixel(-10, -10),
map: map
});
});
// 4. 绘制驾车路径（如果需要，可以注释掉直线路径，保留驾车路径）
// 注意：这里同时绘制了直线和驾车路径，可能会重叠
if (points.length >= 2) {
AMap.plugin('AMap.Driving', () => {
const driving = new AMap.Driving({
map: map, // 这样驾车路线会直接显示在地图上
policy: AMap.DrivingPolicy.LEAST_TIME
});
driving.search(
[points[0].lng, points[0].lat],
[points[points.length - 1].lng, points[points.length - 1].lat],
(status, result) => {
// 可以根据结果处理
}
);
});
}
</script>
</body>
</html>uniapp的
vue2
项目使用webview
嵌套高德地图，地图聚合点无法正常显示，都是只有默认图标，还有地图点击事件，无法正常回传给 <view class="description-card">
<web-view :src="mapUrl" @message="handleMessage"></web-view>
</view>// 接收WebView消息
handleMessage(e) {
console.log(e, '点击了标记点');
// e.detail.data 是一个数组，数组的每个元素是H5发送的消息（字符串）
const [message] = e.detail.data;
try {
const data = JSON.parse(message);
if (data.type === 'markerClick') {
// 处理标记点击
}
} catch (e) {
console.error('解析消息失败', e);
}
},
扫一扫
1558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
