vue高德地图移除定位点
时间: 2023-11-14 22:12:09 浏览: 99
vue使用高德地图根据坐标定位点的实现代码
要移除高德地图上的定位点,可以使用AMap.Map的remove方法。具体步骤如下:
1. 在需要移除定位点的组件中,引入AMap对象:import AMap from 'vue-amap';
2. 在mounted生命周期函数中,获取地图实例:const map = new AMap.Map('mapContainer');
3. 在需要移除定位点的时候,调用map.remove()方法即可。
示例代码如下:
<template>
<div>
<div id="mapContainer"></div>
</div>
</template>
<script>
import AMap from 'vue-amap';
export default {
name: 'MapContainer',
data() {
return {
map: null,
marker: null
};
},
mounted() {
AMap.initAMapApiLoader({
key: '你的key',
plugin: ['AMap.Geolocation']
});
this.initMap();
},
methods: {
initMap() {
this.map = new AMap.Map('mapContainer');
this.addMarker();
},
addMarker() {
this.marker = new AMap.Marker({
position: [116.397428, 39.90923],
map: this.map
});
},
removeMarker() {
this.map.remove(this.marker);
}
}
};
</script>
<style scoped>
#mapContainer {
width: 100%;
height: 500px;
}
</style>
阅读全文