边界更改后清除标记，Vue 食谱谷歌地图

Question

我有一个关于在更新新边界后清除标记的问题。新标记将添加到地图中，但旧标记保持不变。这有点尴尬，因为每次我发布具有新边界的请求时，Vuex 状态都会更新......

我正在提供参考资料以更好地理解 Vue 食谱 和食谱的代码沙箱(不是我的代码，但非常相似。

map-loader.vue

在这里，我创建地图并毫无问题地请求边界。每次拖动地图时，我都会在 Vuex 的新数组中获得新标记。

<template>
<div>
<div class="google-map" ref="googleMap"></div>
<template v-if="Boolean(this.google) && Boolean(this.map)">
<slot
:google="google"
:map="map"
/>
</template>       
</div>
</template>
<script>
import GoogleMapsApiLoader from 'google-maps-api-loader'
import { mapGetters } from 'vuex'
export default {
props: {
mapConfig: Object,
apiKey: String,
info_and_center: Function,
},
data() {
return {
google: null,
map: null
}
},
async mounted() {
const googleMapApi = await GoogleMapsApiLoader({
apiKey: this.apiKey
})
this.google = googleMapApi
this.initializeMap()
},
watch:{
mapConfig(old_ad, new_ad){
this.initializeMap()
}
},
methods: {
initializeMap() {
const mapContainer = this.$refs.googleMap
this.map = new this.google.maps.Map(
mapContainer, this.mapConfig
)     
let self = this;
this.google.maps.event.addListener((this.map), 'idle', function(event) {
self.get_markers();
});
},
get_markers(){
let bounds = this.map.getBounds();
let south_west = bounds.getSouthWest();
let north_east = bounds.getNorthEast();
let payload = {
"from_lat": south_west.lat(),
"to_lat": north_east.lat(),
"from_lng": south_west.lng(),
"to_lng": north_east.lng(),
}

// manually clearing the array of markers
this.$store.state.project.projects = []
console.log(this.get_projects)
// it's cleared
this.$store.dispatch("load_projects_by_coords", payload)
},
},
computed: {
...mapGetters([
"get_projects"
])
}
}
</script>

更新

通常我不需要这样做，但在get_markers()中，我编写了代码以在新dispatch之前清除get_projects，但旧标记仍然保持不变。

地图.vue

<template>
<GoogleMapLoader
:mapConfig="mapConfig"
apiKey="my_key"
>
<template slot-scope="{ google, map}">
<GoogleMapMarker
v-for="marker in get_projects"
:key="marker.id"
:marker="marker"
:google="google"
:map="map"
/>
</template>
</GoogleMapLoader>
</template>
<script>
import GoogleMapLoader from './google-map-loader'
import GoogleMapMarker from './google-map-marker'
import { mapSettings } from './helpers/map-setting'
import { mapGetters } from "vuex";
export default {
components: {
GoogleMapLoader,
GoogleMapMarker,
},
computed: {
...mapGetters([
"get_projects",
"get_search_address_lat",
"get_search_address_lng",
]),
mapConfig () {
return {
...mapSettings,
center: this.mapCenter
}
},
mapCenter () {
return {lat: this.get_search_address_lat, lng: this.get_search_address_lng}
},
},
}

如您所见，我正在迭代get_projects内的新标记，没有任何问题。但是旧的标记保持不变，尽管当我console.log(this.get_projects)时，边界更改后只有新标记在那里。所以问题是如何使用新标记更新地图？

markers.vue

<script>
export default {
props: {
google: {
type: Object,
required: true
},
map: {
type: Object,
required: true
},
marker: {
type: Object,
required: true
},
},
mounted() {
let marker = new this.google.maps.Marker({
position: this.marker,
marker: this.marker,
map: this.map,
})
var contentString = "test";
var infowindow = new this.google.maps.InfoWindow({
content: contentString
});
this.google.maps.event.addListener(marker, 'click', function() {
this.map.setCenter(marker.getPosition());
infowindow.setContent(contentString);
infowindow.open(this.map, marker);
});
},
render(){},
}
</script>

Answer 1

我以前没有使用过这个 API。但我看到您发布的食谱链接中没有涵盖删除标记。我认为正在发生的事情是您在挂载上注册一个新标记，这当然很好，但是当组件被破坏时，您不会删除它。

文档说在Marker上使用setMap为 null，以便将其删除。因此，如果您保留对在mounted钩中创建的标记的引用，则可以在beforeDestroy钩中删除它。

GoogleMapMarker.vue

data: () => ({
mapMarker: null
}),
mounted() {
const { Marker } = this.google.maps;
this.mapMarker = new Marker({
position: this.marker.position,
marker: this.marker,
map: this.map,
icon: POINT_MARKER_ICON_CONFIG
});
},
beforeDestroy() {
this.mapMarker.setMap(null);
},

附言。let self = this;是不必要的。

let self = this;
this.google.maps.event.addListener((this.map), 'idle', function(event) {
self.get_markers();
});

匿名功能：

this.google.maps.event.addListener((this.map), 'idle', event => {
this.get_markers();
});