百度地图：添加图标覆盖物、点击事件功能总结

一、需求描述：

百度地图添加覆盖物BMapGL、VUE3

• Marker 添加图标覆盖物
• 添加点击事件且添加选中效果

二、添加覆盖物（vue3语法）：

const otherInfo = {
	lng:'',
	lat:'',
	address:'',
	phone:'',
	id:''
}
const marker = new BMapGL.Marker(
	{ lng: 经度, lat: 纬度 },
	{ icon: new BMapGL.Icon(new URL('@/assets/图标.png', import.meta.url).href,new BMapGL.Size(61, 90)), 
	// 当图标位置不合适时 可适当调整
	offset: new BMapGL.Size(-4, -9) }
)
// 多数情况下 地图上需要同时展示多种类型的marker
// 给marker设置类型 以防后续需要清除某一类型的marker
marker["markerType"] = "类型1"; 
// 添加点击事件
marker.addEventListener("click", (e) => {
	// 处理业务逻辑：添加弹窗展示信息、提示语、添加选中效果等
	handelMarkerClick(marker,e,otherInfo)
})
marker.addEventListener("mouseover", function(e) {
    var label = this.getLabel()
    label.setStyle({ display: "block" });
});
marker.addEventListener("mouseout", function(e) {
    var label = this.getLabel()
    label.setStyle({ display: "none" });
});
// 将marker添加到地图上
map.addOverlay(marker)

三、点击事件处理业务逻辑：

const handelMarkerClick = (marker,e,otherInfo) => {
		// offset 设置label 相对于marker的位置
		const label = new BMapGL.Label('', { offset: new BMapGL.Size(30, -200) })
		label.setStyle({
				fontSize: '14px',
				backgroundColor: 'transparent',
				color: '#fff',
				border: 'none',
				'z-index': 10,
				'box-sizing': 'border-box'
		})
		// 可以css 设置label样式
		label.setContent(`<div class="label-bg active">
			<div class="phone">${otherInfo.phone}</div>
			<div class="address" style="align-items:center">
				${otherInfo.address}
			</div>
		</div>`)
		marker.setLabel(label)
		let icon = new BMapGL.Icon(new URL('@/assets/选中.png', import.meta.url).href, new BMapGL.Size(10, 13));
		// 替换选中效果的图标
		marker["markerType"] = "active"; 
		marker.setIcon(icon);
		label.addEventListener("click", (e) => {
			// label 也可添加点击事件
		});
}

四、清除marker、清除label：

const allOverlay = map.getOverlays();
// 清除所有marker
state.map.clearOverlays(); 

// 清除指定类型的marker
allOverlay.forEach((item, index) => {
  if(item.markerType&&item.markerType=='类型1') {
    map.removeOverlay(item);
  } 
})

// marker附加的label需要单独清除且用到了jq（暂时没有找到更好的替代方法、有待优化）
const domLabelPane = map.getPanes().labelPane;
$(domLabelPane).empty();

五、寄语：

我们要努力 但是不必着急 繁花锦簇 硕果累累都需要过程