在 Vue3/Pinia 中设置谷歌地图标记

Question

我想根据从 vue3 pinia 商店获取的数据显示标记。 我很难在地图上设置我的第一个标记：

<script setup>
import { onMounted, ref } from 'vue'
import { Loader } from '@googlemaps/js-api-loader'
import { useDiscoverItemStore } from "@/stores/DiscoverItemStore"
const discoverStore = useDiscoverItemStore()

const MAPS_API_KEY = 'api-key'

const loader = new Loader({ apiKey: MAPS_API_KEY })
const mapDiv = ref(null)
let map = ref(null)

onMounted(async () => {
  await loader.load()
  map.value = new google.maps.Map(mapDiv.value, {
    center: currPos.value,
    zoom: 13,
  })

  await discoverStore.fetchItems()
  let loc = new google.maps.LatLng(discoverStore.items[0].location[0], discoverStore.items[0].location[1])

  console.log(loc)
  let marker = new google.maps.Marker({
    position: loc,
    map, // have also tried `map: map` 
    title: "Hello World!",
  })

  // have also tried `marker.setMap(map)`
})
</script>

我的控制台告诉我setMap: not an instance of Map; and not an instance of StreetViewPanorama setMap: not an instance of Map; and not an instance of StreetViewPanorama 。 这是我的控制台的完整读数：

为什么我不能将此标记添加到我的 google 地图map ref中？ 任何想法将不胜感激。

Answer 1

您的 Google 地图实例在map.value上

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