Vue.js GoogleMaps API 与 @googlemaps/js-api-loader答案

【问题标题】：Vue.js GoogleMaps API with @googlemaps/js-api-loaderVue.js GoogleMaps API 与 @googlemaps/js-api-loader
【发布时间】：2022-06-20 12:02:18
【问题描述】：

感谢您阅读我的问题:)

我正在尝试在我的 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>

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

【问题讨论】：

标签： javascript vue.js google-maps-api-3

【解决方案1】：

尝试像这样添加new：

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

【讨论】：

非常感谢！我以为我已经尝试过了，但显然有些不同。

【解决方案2】：

如果它不起作用，也试试这个：

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

【讨论】：