如何通过 npm 安装谷歌地图？答案

【问题标题】：How to install google maps through npm?如何通过 npm 安装谷歌地图？
【发布时间】：2017-10-23 18:43:37
【问题描述】：

npm 上是否有任何可用于谷歌地图的软件包？还是我真的应该粘贴这个

<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY">
</script>

到我的 index.html 并在每次刷新时下载这个 js 文件？

这太烦人了，因为有时我会收到ReferenceError: google is not defined。

【问题讨论】：

另外，api key 是不是突然暴露了？

标签： javascript npm maps

【解决方案1】：

官方谷歌地图包 (@google/maps) 仅适用于节点。在浏览器环境中，您需要使用非官方的包或在您的站点中包含官方脚本。

对于 ReferenceError 问题，请确保 google maps 的 script 标签在您的代码的 script 标签之上，以便它首先加载。如果不是，您的脚本可能会在创建 google 全局变量之前运行。

一个非官方的包是google-maps，可以在浏览器中使用。

【讨论】：

这个包仅适用于 Node.js 吗？网络使用怎么样？
@Henry 看起来像for web the node packages for it are unofficial，google-maps
我正在尝试使用 'google.maps.LatLng' 或 'google.maps.Polygon' 之类的对象（仅在客户端可用）.. 没有成功。有什么帮助吗？
@JustinPoehnelt 在 npm 上用于谷歌地图的网络包是非官方的
那么为什么这个答案会引导用户使用一个在浏览器环境中不起作用的包？

【解决方案2】：

或者我真的应该粘贴这个到我的 index.html 并在每次刷新时下载这个 js 文件？

是的。这是这样做的唯一方法。有一些包可以为您动态执行此操作，但行为是相同的。

重申一下，没有用于在 NPM 上加载用于 Web 环境的 Google Maps JavaScript 的官方包。其他人引用的@google/maps 仅用于节点。

google is not defined可以通过在加载谷歌地图脚本时使用回调查询参数来避免错误。

更新 - 2020/01/17

我写了@googlemaps/js-api-loader 来帮助动态加载脚本并支持承诺。

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

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

loader
  .load()
  .then(() => {
    new google.maps.Map(div, mapOptions);
  })
  .catch(e => {
    // do something
  });

【讨论】：

我认为 google 需要传递到 .then() 方法中的回调中，例如 .then(google) => {...}
google 也是全局定义的，所以这不是必需的，但它也是解析值

【解决方案3】：

您得到的ReferenceError 可能是因为您没有以正确的方式调用库。

在Google's Documentation 中建议您应该指定一个回调（如initMap），该回调将在API 完成加载时调用。您需要对 Map 执行的任何操作都应包含在该函数中，以确保 API 已加载且 google 已定义。

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

【讨论】：

【解决方案4】：

我在使用 React + TypeScript 时遇到了同样的问题。首先，我用这一行安装了 Google Maps SDK；

npm install @google/maps

但是TypeScript编译器报错了，还给我这行来安装；

npm install @types/google__maps

然后它起作用了。

import { createClient } from "@google/maps"

const googleMaps = createClient({
  key: "YOUR_API_KEY"
})

【讨论】：

【解决方案5】：

是的，那里有一些软件包。你可以试试这个。

npm - google maps

【讨论】：

我很确定这不是官方包