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通过数据过滤实现表格合并

    vue通过数据过滤实现表格合并

    这篇文章主要为大家详细介绍了vue通过数据过滤实现表格合并,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • VUE实现强制渲染,强制更新

    VUE实现强制渲染,强制更新

    今天小编就为大家分享一篇VUE实现强制渲染,强制更新,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 很棒的vue弹窗组件

    很棒的vue弹窗组件

    这篇文章主要为大家详细介绍了vue弹窗组件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 一文教你学会在Vue3中自定义指令

    一文教你学会在Vue3中自定义指令

    这篇文章主要为大家详细介绍一下如何在Vue3中实现自定义指令,文中的示例代码讲解详细,具有一定的借鉴价值,需要的同学可以参考一下
    2022-07-07
  • 基于vue3实现一个简单的输入框效果

    基于vue3实现一个简单的输入框效果

    这篇文章主要为大家详细介绍了如何使用Vue3实现一个简单的输入框,可以实现输入文字,添加表情等功能,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • 基于Vite2.x的Vue 3.x项目的搭建实现

    基于Vite2.x的Vue 3.x项目的搭建实现

    这篇文章主要介绍了基于Vite2.x的Vue 3.x项目的搭建实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue实现压缩图片预览并上传功能(promise封装)

    vue实现压缩图片预览并上传功能(promise封装)

    这篇文章主要为大家详细介绍了vue实现压缩图片预览并上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • vue中的导航守卫使用及说明

    vue中的导航守卫使用及说明

    这篇文章主要介绍了vue中的导航守卫使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue的index.html中获取环境变量和业务判断图文详解

    vue的index.html中获取环境变量和业务判断图文详解

    这篇文章主要给大家介绍了关于vue的index.html中获取环境变量和业务判断的相关资料,对vue来说index.html是一个总的入口文件,vue是单页面应用,挂在id为app的div下然后动态渲染路由模板,需要的朋友可以参考下
    2023-09-09
  • vue中keep-alive、activated的探讨和使用详解

    vue中keep-alive、activated的探讨和使用详解

    这篇文章主要介绍了vue中keep-alive、activated的探讨和使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论