Vue3+Pinia环境下Google Map标记添加失败问题咨询

错误的核心原因是你把Vue的响应式ref对象直接传给了Google Maps API，而它需要的是实际的Map实例。

你用ref(null)创建的map是一个响应式包装对象，真正的Google Map实例存储在map.value里。之前写的map或者map: map，传递的都是这个包装器，并非API要求的Map实例，所以会触发setMap: not an instance of Map错误。

修复代码 #

修改Marker创建逻辑，将map替换为map.value：

let marker = new google.maps.Marker({
  position: loc,
  map: map.value,
  title: "Hello World!",
})

如果用setMap方法添加标记，同样要传入map.value：

marker.setMap(map.value)

额外检查点 #

• 确认currPos.value是合法的经纬度格式（比如{ lat: 纬度值, lng: 经度值 }），避免地图初始化异常
• 验证discoverStore.items[0].location的结构正确，能生成有效的google.maps.LatLng实例

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