Vue3中移除Google Maps v3的AdvancedMarkerView时遇类型错误求助

这个错误是因为Pinia存储的标记对象被Vue的Proxy代理了，而Google Maps的AdvancedMarkerView内部包含不可配置、只读的属性（比如__e3_），直接修改代理对象的map属性时，Proxy的校验逻辑会因为原始对象属性的限制而抛出错误。

给你两个可行的解决办法：

方法1：使用toRaw()获取原始对象后操作 #

在修改map属性前，先用Vue的toRaw()方法拿到未被代理的原始Marker对象，再执行赋值操作：

import { toRaw } from 'vue'

// 遍历标记并移除
MapItemStore.mapMarkers.forEach((marker) => {
  const rawMarker = toRaw(marker)
  rawMarker.map = null
})
// 清空存储的标记列表
MapItemStore.mapMarkers = []

方法2：存储标记时标记为非响应式 #

在创建AdvancedMarkerView并添加到Pinia状态时，用markRaw()标记该对象为非响应式，这样Vue就不会对它进行Proxy代理，后续修改map属性就不会触发错误：

import { markRaw } from 'vue'

// 创建标记
const newMarker = new google.maps.marker.AdvancedMarkerView({
  position: { lat: 37.7749, lng: -122.4194 },
  map: yourMapInstance,
  // 其他配置...
})

// 存入Pinia前标记为非响应式
MapItemStore.mapMarkers.push(markRaw(newMarker))

之后再执行你原来的移除逻辑（直接设置marker.map = null）就不会报错了。

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