'google' 没有在谷歌地图的 Vue.Js 项目中定义答案

【问题标题】：'google' is not defined on Vue.Js project with Google Maps'google' 没有在谷歌地图的 Vue.Js 项目中定义
【发布时间】：2022-01-14 05:59:39
【问题描述】：

我正在尝试在使用 typescript 的 Vue.js 项目上创建一个没有第三方库的谷歌地图框，但我有些头疼。在实践中，我从官方网站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,
      });
    }
  },
};

【问题讨论】：

添加类型后你运行npm install了吗？
是的，但总是同样的错误
我知道这很麻烦，但是如果你可以从头开始创建一个新项目（这样你可能不想显示的信息就不会打开）并添加谷歌库和代码（这样你有一个只有问题部分的骨架项目），然后你可以将它托管在 github 或其他地方，其他人可以拉它并尝试给你一个问题的答案。我再次知道这很麻烦，但您绝对可以得到这样的正确（和快速）答案。你用的是 Vue2 还是 Vue3？
vue.js 3 的准确性

标签： typescript vue.js google-maps

【解决方案1】：

有@types/google.maps，然后是需要加载的实际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,
        });
     });
    
  },

【讨论】：

谢谢兄弟，很有帮助。

【解决方案2】：

您使用的方式（以及在 google 网站上写的内容）似乎是您的项目是纯打字稿。

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

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

【讨论】：