vue2 + 高德地图marker无法清除

记录一下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("已经点击")
    },

高德地图文档地址：https://lbs.amap.com/demo/jsapi-v2/example/map-componets/map-overlays