Vue.js ‘google’ is not defined 使用 Google Maps JavaScript API Loader

在本文中，我们将介绍如何使用 Google Maps JavaScript API Loader 在 Vue.js 中避免出现 “google is not defined” 的错误，并展示一些示例来解决这个问题。

什么是 Google Maps JavaScript API Loader？

Google Maps JavaScript API Loader 是一个用于加载和使用 Google Maps JavaScript API 的工具。它可以帮助我们在网页中使用 Google 地图功能，并提供了一些便捷的方法和选项来控制地图的加载和使用。

在使用 Vue.js 开发项目时，经常会遇到需要在组件中使用 Google 地图的场景。Vue.js 提供了一些方法来集成 Google 地图，但有时会因为异步加载的问题导致 “google is not defined” 的错误。

解决 “google is not defined” 的错误

为了解决 “google is not defined” 的错误，我们可以使用 Google Maps JavaScript API Loader。下面是一个简单的示例来演示如何在 Vue.js 组件中加载和使用 Google 地图：

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

<script>
export default {
  mounted() {
    const loader = new Loader({
      apiKey: 'YOUR_API_KEY', // 替换为你的 API Key
      version: 'weekly',
    });

    loader.load().then(() => {
      this.initMap();
    });
  },
  methods: {
    initMap() {
      const map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      });
    },
  },
};
</script>

在上面的代码中，我们通过创建一个 Loader 实例，并使用 load 方法来加载 Google 地图的 JavaScript API。在加载成功后，我们调用 initMap 方法来初始化地图。

使用 Vue.js 插件

除了使用 Google Maps JavaScript API Loader，我们还可以使用 Vue.js 插件来更方便地集成 Google 地图。下面是一个使用 vue3-google-map 插件的示例：

npm install vue3-google-map

<template>
  <div>
    <GmapMap :center="{ lat: -34.397, lng: 150.644 }" :zoom="8">
      <GmapMarker :position="{ lat: -34.397, lng: 150.644 }"></GmapMarker>
    </GmapMap>
  </div>
</template>

<script>
import { GmapMap, GmapMarker } from "vue3-google-map";

export default {
  components: {
    GmapMap,
    GmapMarker,
  },
};
</script>

将以上代码添加到你的 Vue 组件中，然后通过引入 GmapMap 和 GmapMarker 组件来创建地图和标记。通过设置相应的属性，你可以自定义地图的中心和缩放。