高德地图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);
}