vue2 + 高德地图marker无法清除

写bug的小张

已于 2023-05-22 16:27:39 修改

阅读量3k

点赞数 2

文章标签： javascript 前端 vue.js

于 2023-03-18 15:12:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46639390/article/details/129637018

版权

文章讲述了在Vue应用中使用高德地图API时遇到的清除Marker问题。原来的问题在于`removeMarker()`函数中尝试移除一个新的实例，而不是之前添加到地图上的实例。解决方案是将Marker对象保存在数据属性中，然后在`removeMarker()`中使用这个保存的引用进行删除。`addMarker()`和`removeMarker()`方法的正确实现对于管理地图上的标记至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下vue中使用高德地图的marker标记点无法清除的原因

  <span @click="removeMarker()">rem</span>
  <span @click="addMarker()">add</span>

  //这是不行的代码（能行才怪，我也是脑残了想出来这种写法。）
  //清除marker的话用map.clearMap()也可行，但是如果单纯清除marker的话不建议使用;
 removeMarker () {
 	let marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [116.405467, 39.907761],
        anchor: 'bottom-center'
      });
      console.log("准备尝试删除marker")
      this.map.remove(marker);
    },

    addMarker () {
      //就是这里的原因
      let marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [116.405467, 39.907761],
        anchor: 'bottom-center'
      });
      this.map.add(this.marker);
      console.log("已经点击")
    },

下面是可行的代码

 data () {
    return {
      marker: null,
      }
    };

removeMarker () {
      console.log(this.marker, "哈哈哈哈哈")
      this.map.remove(this.marker);
      console.log("尝试删除marker", this.airplane.gnss.latitude, this.airplane.gnss.longitude)
    },

    addMarker () {
      //就是这里的原因
      this.marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [116.405467, 39.907761],
        anchor: 'bottom-center'
      });
      this.map.add(this.marker);
      console.log("已经点击")
    },