Javascript 边界更改后清除标记，vue cookbook谷歌地图

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

为了更好地理解，我提供了参考资料 烹饪书不是我的代码，但非常相似

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_项目中迭代新的标记，没有任何问题。但是旧的标记保持不变，尽管当我console.logthis.get_项目时，在边界改变后，只有新的标记在那里。所以问题是如何用新的标记更新地图

虚拟现实

---

我以前没有使用过这个API。但是我看到你发布的烹饪书链接中没有提到删除标记。我认为正在发生的是，您正在挂载上注册一个新的标记，这当然很好，但当组件被销毁时，您并没有删除它

声明将标记上的setMap设置为null，以便将其删除。因此，如果您保留在挂载钩子中创建的标记的引用，您可以在beforedrook中删除它

GoogleMapMarker.vue

让自我=这个；这是不必要的

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();
});

---

谢谢你回复我。在问题解决之前！！谢谢你指出自己的部分。很高兴我能帮忙。您确定使用匿名函数时未解决self=此错误吗？噢，已解决。没问题。。。谢谢你也指出了这一点。不起作用，标记没有被移除

  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;

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();
});