Vue百度地图maker标注的添加和删除方式
作者：宁采不是臣
这篇文章主要介绍了Vue百度地图maker标注的添加和删除方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue百度地图maker标注的添加和删除
const lng = parseFloat(e.longitude)
const lat = parseFloat(e.latitude)
const point = new BMap.Point(lng, lat)
const marker = new BMap.Marker(point)
map.addOverlay(marker)
marker.setPosition(point)//添加标注
//删除标注文档上注明了是removeOverlay()这个方法，具体使用如下
marker.id = data[0].id//给marker添加id对应数组里的id（非必要不要赋值id，不要这么写）
const allOverlays = map.getOverlays()//返回地图上所有的覆盖物
//循环找到数组里面id和返回覆盖物相同的
for (let i = 0; i < allOverlays.length; i++) {
if (allOverlays[i].id == data[0].id) { //data[0].id即是你要删除标注的id
map.removeOverlay(allOverlays[i])
}
}百度地图API删除指定的覆盖物Marker
部分思路代码
1.给地图map添加覆盖物Marker，注意给marker设定一个唯一表示，我这里用的是后端传过来的id
const point = new BMap.Point(item.lng, item.lat) const marker = new BMap.Marker(point) marker.id = item.number this.map.addOverlay(marker)
2.根据getOverlays()方法获取到地图上所有的覆盖物，并判断覆盖物的id是否和需要删除的id一致，若一致则通过removeOverlay()删除指定的覆盖物
// 移除地图覆盖点
removeOverlay(lng, lat) {
const allOverlays = this.map.getOverlays()
for (let i = 0; i < allOverlays.length; i++) {
if (allOverlays[i].id && allOverlays[i].id === this.rowData.id) {
this.map.removeOverlay(allOverlays[i])
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。