Vue中Google Maps API地图标记无法移除问题求助

问题原因 #

核心问题出在Vue的响应式深度代理机制：

• 你用ref<google.maps.Marker[]>([])创建了响应式数组，Vue会对数组内的每个Marker实例做深度代理（包装成Proxy对象）。
• 调用marker.setMap(null)时，实际触发的是Proxy代理后的方法，而非Google Maps Marker的原生实例方法，导致标记移除逻辑无法正常执行。

解决方案 #

用shallowRef替代ref存储Marker数组：

• shallowRef仅对数组的顶层引用做响应式处理，不会深度代理内部的Marker对象，能保证调用的是Marker的原生方法，同时满足我们跟踪数组引用变化的需求。

修改后的代码示例 #

脚本部分修改 #

<script setup lang="ts">
import { Loader } from '@googlemaps/js-api-loader'
import { onMounted, ref, shallowRef } from 'vue'

const loader = new Loader({
  apiKey: '<your-API-key-here>',
  libraries: ['places']
})

const map = ref<google.maps.Map>()
const mapContainer = ref<HTMLDivElement>()
// 改用shallowRef避免深度代理Marker实例
const markers = shallowRef<google.maps.Marker[]>([])

onMounted(async () => {
  await loader.load()

  map.value = new google.maps.Map(mapContainer.value as HTMLDivElement, {
    zoom: 4,
    center: { lat: 40, lng: -100 }
  })
})

const clearMarkers = () => {
  markers.value.forEach((marker) => {
    marker.setMap(null)
  })
  markers.value = []
}

const addMarkers = () => {
  const newMarkers = [
    { lat: 37.535916, lng: -96.524573 },
    { lat: 46.021019, lng: -117.147974 },
    { lat: 40.662888, lng: -81.018198 }
  ]

  newMarkers.forEach((marker) => {
    markers.value.push(new google.maps.Marker({ map: map.value, position: marker }))
  })
}
</script>

模板部分保持不变 #

<div ref="mapContainer" style="width: 500px; height: 500px">Google Map will load here</div>

验证逻辑 #

修改后调用clearMarkers时，marker.setMap(null)会直接触发Google Maps Marker的原生方法，正确移除地图上的标记，同时清空markers数组。

内容的提问来源于stack exchange，提问作者chipit24