聚合篇
问题1:2.0默认不支持自定义marker,需要'AMap.Adaptor'适配器; 备注:1.4.15 聚合叫'MarkerClusterer', 2.0叫'MarkerCluster';
typescript
AMapLoader.load({
plugins: ["AMap.MarkerCluster", 'AMap.Adaptor']
})
问题2: 没有addMarker、removeMarker;且2.0的addData、setData对marker无效; 解决:每次更新的时候创建一个'MarkerCluster' 并把上一个'MarkerCluster'删除
typescript
// 如果有就删除
if (curClusterToll && curClusterToll.setData) {
curClusterToll.setData([]);
curClusterToll = null;
}
// 创建新的聚合对象
curClusterToll = new (window as any).AMap.MarkerCluster(map, [...yourMarkers], {
gridSize: 60, // 建议60不然太近的就展不开了
minClusterSize: 2,
maxZoom: 12,
});
问题3:marker第一次加载,视窗内可视的marker的label是居中的,看不见的展开后label全是错位的;

解决:绑定'renderMarker',在显示的时候重新指定一下labe
typescript
curClusterToll = new (window as any).AMap.MarkerCluster(map, [...yourMarkers], {
gridSize: 60,
minClusterSize: 2,
maxZoom: 12,
// API 将在绘制每个非聚合点的时候调用这个方法
renderMarker: (context: any) => {
/* 重新赋值label,也可以简写
context.marker.setLabel({...context.marker.getLabel()})
*/
const tmpLabel = context.marker.getLabel()
context.marker.setLabel({...tmpLabel})
}
});
Marker篇
问题1:当默认不想显示label,鼠标一上去显示label的时候位置偏移问题;

解决:当鼠标移入时、鼠标移动时添加监听; 备注:目前label会闪一下然后居中显示;比显示位置不对强;
typescript
const markerLabel = {
direction:'top',
content: `<div class="site_marker_name">
桃源收费站
</div>`,
}
// 鼠标移入
marker.on('mouseover', () => {
marker.setLabel({...markerLabel})
});
// 鼠标在marker中移动
marker.on('mousemove', () => {
marker.setLabel({...markerLabel})
});
// 鼠标离开隐藏
marker.on('mouseout', () => {
marker.setLabel({content: ``,})
})
问题2:label单独创建后给marker,渲染后会偏移; 解决: 直接吧label写在marker中
typescript
// 1.4.15
let marker = new (window as any).AMap.Marker({
})
marker.setLabel( {
direction:'top',
content: `<div class="site_marker_name">
桃源收费站
</div>`,
})
// 2.0调整后
let marker = new (window as any).AMap.Marker({
label: {
direction:'top',
content: `<div class="site_marker_name">
桃源收费站
</div>`,
}
})
划线工具AMap.MouseTool
问题: 2.0版本无法通过鼠标左键双击和右键单击结束绘制 解决:地图监听鼠标双击和鼠标右键事件
typescript
map.on('rightclick', (e: any) => {
// 结束会议线
handleEndDrawing();
})
map.on('dblclick', () => {
// 结束会议线
handleEndDrawing();
});
const handleEndDrawing = () => {
mouseTool.close(true);
}