Vue中Google Maps API调用setMap(null)无法清除标记问题

• markers数组未存储真实Marker实例
  若添加标记时存入数组的是自定义封装对象、数据副本，而非new google.maps.Marker()返回的原生实例，调用setMap(null)自然不会生效。打印markers数组内容，确认每一项都是Google Maps API生成的Marker对象。

• Vue响应式数组变更方式错误
  Vue对数组直接赋值markers = []的变更检测存在局限，旧Marker实例可能因被响应式系统的依赖引用残留，无法被彻底清理。改用markers.splice(0, markers.length)清空数组，确保响应式系统追踪到数组变更。

• 地图实例引用不一致
  创建Marker时传入的map实例，与调用setMap(null)时关联的地图对象不是同一个（比如地图实例被重新创建、引用丢失），会导致清除操作不作用于当前显示的地图。将地图实例存在Vue的data或ref中，确保全程使用同一引用。

• 异步操作时序冲突
  calculateRoute中的路线请求是异步逻辑时，可能出现clearAllMarkersFromMap执行完毕后，旧标记的异步添加流程仍在执行，导致标记被清除后又重新渲染。用Promise或async/await控制时序，确保清除操作在所有旧标记的异步逻辑完成后执行。

• Marker实例被重复存储
  添加标记时若重复将同一Marker实例存入markers数组，清除时仅处理了部分引用，残留的Marker实例仍会显示在地图上。添加标记前做去重检查，或打印markers数组长度、Marker的唯一标识，确认无重复存储。

内容的提问来源于stack exchange，提问作者Josh Yehezkiel Nusera Parinuss