Vue百度地图maker标注的添加和删除方式
更新时间：2024年03月19日 15:13:18 作者：宁采不是臣
这篇文章主要介绍了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])
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中注册全局组件的三种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本
这篇文章主要介绍了Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
这篇文章主要介绍了最新vue-cli 2.9.1的webpack存在问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
文章介绍了如何在Vue中通过Click方法获取原事件的参数,包括默认参数、自定义参数以及如何同时获取原生事件和自定义参数的方法2024-12-12
本文主要介绍Vue.js中监听器和计算属性的相关知识点，包括对普通属性的监听、对对象的监听、对数组的监听，以及计算属性的Set方法，计算属性与监听器的区别等等2021-05-05
本文介绍了如何在Vue3项目中封装一个时间信息收集组件,采用双向绑定响应式数据,通过对Element-Plus的Slider组件二次封装,实现时间轴功能,解决了小数计算导致匹配问题和v-model绑定组件无效问题,感兴趣的朋友跟随小编一起看看吧2024-09-09
本文通过实例代码给介绍了vue使用自定义组件实现通讯录功能,需要的朋友可以参考下2018-09-09
本文主要介绍了浅谈Vue DIFF，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了 Vue 子组件内的 props 对象里的 default 参数是如何定义Array、 Object 、或 Function 默认值的正确写法说明，感兴趣的朋友跟随小编一起看看吧2022-08-08
vue3中$attrs的变化与inheritAttrs的使用详解
$attrs现在包括class和style属性。 也就是说在vue3中$listeners不存在了，vue2中$listeners是单独存在的，在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性，这篇文章主要介绍了vue3中$attrs的变化与inheritAttrs的使用 ,需要的朋友可以参考下2022-10-10
最新评论