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实现表格首列相同数据合并的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue2.0 http请求以及loading展示实例

    Vue2.0 http请求以及loading展示实例

    下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue组件封装之dialog对话框组件详解

    Vue组件封装之dialog对话框组件详解

    这篇文章主要介绍了Vue组件封装之dialog对话框组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vite2.0 踩坑实录

    vite2.0 踩坑实录

    本文主要介绍了vite2.0 踩坑,记录了一些在配置项目中遇到的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue.js前端框架之事件处理小结

    Vue.js前端框架之事件处理小结

    这篇文章主要介绍了Vue.js前端框架之事件处理小结,本文给大家介绍了v-on 指令的基本用法,通过实例讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • vue实现发送短信倒计时和重发短信功能的示例详解

    vue实现发送短信倒计时和重发短信功能的示例详解

    这篇文章主要给大家介绍了vue实现发送短信倒计时和重发短信功能的相关知识,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 前端框架Vue.js构建大型应用浅析

    前端框架Vue.js构建大型应用浅析

    这篇文章主要为大家详细介绍了前端框架Vue.js构建大型应用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 详解如何使用 vue-cli 开发多页应用

    详解如何使用 vue-cli 开发多页应用

    本篇文章主要介绍了详解如何使用 vue-cli 开发多页应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 通过html文件来使用Vue的单文件组件形式详解

    通过html文件来使用Vue的单文件组件形式详解

    这篇文章主要介绍了通过html文件来使用Vue的单文件组件形式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • el-form组件使用resetFields重置失效的问题解决

    el-form组件使用resetFields重置失效的问题解决

    用el-form写了包含三个字段的表单,使用resetFields方法进行重置,发现点击重置或要清空校验时是失效的,所以本文给大家介绍了el-form组件使用resetFields重置失效的问题解决,需要的朋友可以参考下
    2023-12-12

最新评论