'google' 未在具有 Google 地图的 Vue.Js 项目中定义

Question

我正在尝试在使用打字稿的 Vue.js 项目中创建一个没有第三方库的 google 地图框，但我有些头疼。实际上，我运行来自官方网站 https://developers.google.com/maps/documentation/javascript/using-typescript “npm i -D @ types / google.maps” 的命令，我输入了下面的代码，但问题是“'google'未定义”发生。不知道是什么问题。

这里是代码

export default {
  mounted: function () {
    let map: google.maps.Map;
    const center: google.maps.LatLngLiteral = { lat: 30, lng: -110 };

    function initMap(): void {
      map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
        center,
        zoom: 8,
      });
    }
  },
};

Answer 1

您使用的方式（以及 google 站点中所写的方式）似乎是您的项目是纯打字稿。

由于您使用的是 Vue，因此我建议您使用以下库： https://vue3-google-map.netlify.app/getting-started/#your-first-map

他们在那里有一个使用示例，我认为与尝试使其工作相比，您将在 Vue3 中使用它获得更好的体验。（您可能可以删除 google 当前安装在 package.json 中的东西）

Answer 2

有@types/google.map，然后是需要加载的实际API。

import { Loader } from '@googlemaps/js-api-loader';

mounted: function () {
    const loader = new Loader({
      apiKey: "",
      version: "weekly",
      libraries: ["places"]
    });

    let map: google.maps.Map;
    const center: google.maps.LatLngLiteral = { lat: 30, lng: -110 };

    loader.load().then(() => { map = new 
       google.maps.Map(document.getElementById("map") as HTMLElement, {
        center,
        zoom: 8,
        });
     });
    
  },

'google' 未在具有 Google 地图的 Vue.Js 项目中定义

'google' is not defined on Vue.Js project with Google Maps

google-maps

typescript

vue.js