vue2 + 高德地图marker无法清除
高德地图文档地址:https://lbs.amap.com/demo/jsapi-v2/example/map-componets/map-overlays。
·
记录一下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
更多推荐
已为社区贡献2条内容
所有评论(0)