<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1
.0">
<title>高德地图</title>
<script src="https://gitee
.com/dcloud/uni-app/raw/dev/dist/uni
.webview
.1
.6
.4
.js"></script>
<style>
#map-container {
width: 100%;
height: 584px;
border-radius:
22px;
z-index: 4;
}
.amap-marker img {
display: none; /* 隐藏默认图标 */
}
</style>
</head>
<body>
<
div id="map-container"></
div>
<script>
// 安全配置
window
._AMapSecurityConfig = {
securityJsCode: '
cf331d54f67e306ca5c0b17f71
22d559'
};
</script>
<script src="https://webapi
.amap
.com/maps?v=
2.0&key=f33
23c
24769b108
28db07f07c0fcec0d&plugin=AMap
.MarkerCluster"></script>
<script>
// 确保UniApp通信桥接准备就绪
function setupUniBridge() {
return new Promise(resolve => {
if (window
.uni && typeof uni
.postMessage === 'function') {
return resolve();
}
document
.addEventListener('UniAppJSBridgeReady', resolve);
});
}
// 向UniApp发送消息
async function sendMessageToUniApp(data) {
await setupUniBridge();
if (window
.uni && typeof uni
.postMessage === 'function') {
uni
.postMessage({
data: [JSON
.stringify(data)] // 必须包装在数组中
});
} else if (window
.parent) {
window
.parent
.postMessage({
type: 'webviewMessage',
data: JSON
.stringify(data)
}, '*');
}
}
// 解析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
.length ? [points[0]
.lng, points[0]
.lat] : [116
.3974
28, 39
.909
23],
showBuildingBlock: true
});
// 1
. 绘制路线
if (points
.length > 0) {
const path = points
.map(p => [p
.lng, p
.lat]);
new AMap
.Polyline({
path: path,
strokeColor: "#3
2CD3
2",
strokeWeight: 5,
map: map
});
// 添加起点终点标记
points
.forEach((point, i) => {
new AMap
.Marker({
position: [point
.lng, point
.lat],
offset: new AMap
.Pixel(-10, -10),
map: map
});
});
}
//
2. 初始化聚合点（使用官方推荐方式）
let cluster; // 存储聚合实例
function initCluster() {
// 转换数据格式为高德官方要求的格式
const clusterPoints = markers
.map(marker => ({
lnglat: [marker
.lng, marker
.lat], // 注意属性名是lnglat
title: marker
.title,
originalData: marker
}));
// 销毁旧实例（如果存在）
if (cluster) {
cluster
.setMap(null);
}
// 创建聚合实例
cluster = new AMap
.MarkerCluster(map, clusterPoints, {
gridSize: 80, // 聚合网格像素大小
maxZoom: 18, // 最大聚合级别
minClusterSize:
2, // 最小聚合数量
// 自定义聚合点样式（官方推荐方式）
renderClusterMarker: function(context) {
const count = context
.count;
const
div = document
.createElement('
div');
div.style
.background = '#FF9A44';
div.style
.borderRadius = '50%';
div.style
.width = '40px';
div.style
.height = '40px';
div.style
.display = 'flex';
div.style
.alignItems = 'center';
div.style
.justifyContent = 'center';
div.style
.color = 'white';
div.style
.fontWeight = 'bold';
div.style
.zIndex = '
99';
div.innerHTML = count;
return
div;
},
// 自定义非聚合点样式
renderMarker: function(context) {
const markerData = context
.data[0]
.originalData;
const marker = new AMap
.Marker({
position: [markerData
.lng, markerData
.lat],
content: `
<
div style="position:relative; text-align:center;z-index:100;">
<img src="https://a
.amap
.com/jsapi_demos/static/demo-center/icons/poi-marker-1
.png"
style="width:40px; height:50px; display:block;">
<
div style="position:absolute; bottom:-90%; left:50%; transform:translateX(-50%);
background: rgba(
227, 57, 59, 0
.1); padding:6px 0;
border-radius: 18px; white-space:nowrap;
font-size: 1
2px;font-weight: bold;
margin-top:5px;border:
2px solid #F47C58;color:#E4393C;width:80px;">
${markerData
.title}
</
div>
</
div>
`,
offset: new AMap
.Pixel(-
20, -40)
});
// 绑定点击事件
marker
.on('click', async function(e) {
await sendMessageToUniApp({
type: 'markerClick',
data: markerData
});
});
return marker;
}
});
// 绑定聚合点点击事件
cluster
.on('click', async function(e) {
await sendMessageToUniApp({
type: 'clusterClick',
data: {
count: e
.clusterData
.count,
center: e
.clusterData
.center,
markers: e
.clusterData
.markers
}
});
});
}
// 3
. 地图加载完成后初始化聚合点
map
.on('complete', function() {
if (markers
.length > 0) {
initCluster();
}
});
</script>
</body>
</html>
聚合点还是默认图标，没有失效自定义样式
扫一扫
4501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
