Vue.js Google 地图 API 与 @googlemaps/js-api-loader

Question

感谢阅读我的问题:)

我正在尝试在我的 Vue.js 项目中实施 GoogleMaps 并使用 @googlemaps/js-api-loader（来自 https://developers.google.com/maps/documentation/javascript/overview#javascript）

我的代码如下所示：

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

const loader = new Loader({
  apiKey: '',
  version: 'weekly',
  libraries: ['places']
})

const map = ref([])

onMounted(async () => {
  await loader
    .load()
    .then(google => {
      map.value = google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      })
    })
    .catch(error => {
      console.log(error)
    })
    .then(function () {
    // always executed
    })
})
</script>

<template>
  <div
    id="map"
    class="map"
  />
</template>

<style>
  html,
  body,
  #map {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

但是地图没有显示，只有弹出窗口 window，地图无法正确加载。在控制台中出现此错误： typeError: this.set 不是函数。（在 'this.set("renderingType","UNINITIALIZED")' 中，'this.set' 未定义）有谁知道怎么弄运行（最好在<script setup>）？

Answer 1

尝试像这样添加 new :

map.value = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      })

Vue.js Google 地图 API 与 @googlemaps/js-api-loader

Vue.js GoogleMaps API with @googlemaps/js-api-loader

javascript

vue.js

google-maps-api-3