高德地图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);
}
相关推荐
拾光拾趣录10 分钟前
🔥FormData+Ajax组合拳,居然现在还用这种原始方式?💥
前端·面试
不会笑的卡哇伊19 分钟前
新手必看!帮你踩坑h5的微信生态~
前端·javascript
bysking20 分钟前
【28 - 记住上一个页面tab】实现一个记住用户上次点击的tab,上次搜索过的数据 bysking
前端·javascript
Dream耀22 分钟前
跨域问题解析:从同源策略到JSONP与CORS
前端·javascript
前端布鲁伊23 分钟前
【前端高频面试题】面试官: localhost 和 127.0.0.1有什么区别
前端
HANK23 分钟前
Electron + Vue3 桌面应用开发实战指南
前端·vue.js
極光未晚39 分钟前
Vue 前端高效分包指南:从 “卡成 PPT” 到 “丝滑如德芙” 的蜕变
前端·vue.js·性能优化
郝亚军42 分钟前
炫酷圆形按钮调色器
前端·javascript·css
Spider_Man44 分钟前
别再用Express了!用Node.js原生HTTP模块装逼的正确姿势
前端·http·node.js
htt23211 小时前
前端记录项目中用到的js
前端·ecmascript·es6