高德地图2.0适配

聚合篇

问题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);
}
相关推荐
前端小巷子几秒前
最长递增子序列:从经典算法到 Vue3 运行时核心优化
前端·vue.js·面试
zayyo几秒前
深入解读 SourceMap:如何实现代码反解与调试
前端
龙在天3 分钟前
以为 Hooks 是银弹,结果是新坑
前端
wayhome在哪13 分钟前
前端高频考题(css)
前端·css·面试
wayhome在哪22 分钟前
前端高频考题(html)
前端·面试·html
冰糖雪梨dd38 分钟前
vue在函数内部调用onMounted
前端·javascript·vue.js
CC__xy43 分钟前
《ArkUI 记账本开发:状态管理与数据持久化实现》
java·前端·javascript
Nicholas681 小时前
flutter滚动视图之ProxyWidget、ProxyElement、NotifiableElementMixin源码解析(八)
前端
lichenyang4531 小时前
[特殊字符] React 自定义 Hook 实现防抖(Debounce)
前端·react.js·前端框架