如何在Vue中删除Google地图标记？

Question

我正在使用 Google API 来显示地图、标记和多边形。
\n当我添加新标记时，以前的标记并没有消失。

\n

我将地图、标记和多边形保存在数据状态中。

\n

data() {\n    return {\n    google: window.google,\n    map: null,\n    activeInfoWindow: null,\n    polygons: [],\n    markers: []\n    }\n},\n

\n

在显示新标记之前，我尝试使用marker.setMap(null)删除以前的标记

\n

filtersResults: function (filterResults) {\n    // REMOVE PREVIOUS ACTIVE MARKER\n    this.markers.map((marker) => marker.setMap(null))\n},\n

\n

我也尝试清空标记数组。什么也没发生，标记仍然显示在地图上。\n\n

\n

setMap 不是未定义的，这是我 console.log(marker.setMap) 时的结果

\n

\xc6\x92 (c){try{this.set(a,b(c))}catch(d){_.Pe(_.Oe("set"+_.Bf(a),d))}}\n

\n

  data() {\n      return {\n        google: window.google,\n        map: null,\n        activeInfoWindow: null,\n        polygons: [],\n        markers: []\n      }\n    },\n    async mounted() {\n      const { LatLng, Map, MapTypeId } = this.google.maps\n        this.map = new Map(document.getElementById(\'map\'), {\n            zoom: 10,\n            center: new LatLng(process.env.INITIAL_LAT, process.env.INITIAL_LNG),\n            mapTypeId: MapTypeId.ROADMAP\n        })\n    },\n    watch: {\n      filtersResults: function (filterResults) {\n        // REMOVE PREVIOUS ACTIVE MARKER\n        this.markers.map((marker) => marker.setMap(null))\n        this.markers = []\n      },\n      assets: {\n        handler: function (newValue) {\n          const { map } = this\n          if (isNotNullAndUndefined(newValue) && map) {\n            \n            // ! GENERATE MARKER IN HERE\n            this.markers = newValue.map((value) => {\n              const { location } = value\n              return this.generateMarkers({\n                latitude: dotFormat(location.lat),\n                longitude: dotFormat(location.lng),\n                details: value\n              })\n            })\n          }\n        },\n        immediate: true\n      }\n    },\n    methods: {\n      generateMarkers({ latitude, longitude, details }) {\n        const { map, google } = this\n        const { LatLng, Marker } = google.maps\n\n        const marker = new Marker({\n          position: new LatLng(latitude, longitude),\n          draggable: false\n        })\n\n        marker.setMap(map)\n        return marker\n      },\n    }\n  }\n

\n

Answer 1

当我们将 存储在数组Markers中时markers，vue.js 3 会将它们转换为Proxy对象。
当我们稍后调用时，这会导致问题Proxy.setMap(null)；Google 地图不知何故不喜欢这样，可能是因为代理对象不是最初添加到地图中的===原始对象。Marker

我发现的解决方法是toRaw()在使用任何转换为Proxy​​对象的 Google 地图对象之前使用：

import {toRaw} from 'vue';

this.markers.map((marker) => toRaw(marker).setMap(null))