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

Question

谷歌地图的npm是否有可用的套餐？或者我真的应该粘贴这个

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

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

这太烦人了,因为有时我会得到ReferenceError: google is not defined.

Answer 1

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

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

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

加载 google 地图脚本时使用回调查询参数可以避免google is not Defined错误。

更新 - 2020/01/17

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

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
  });

Answer 2

官方谷歌地图npm包@ google/maps就是这样做的.它可以用于

__PRE__

使用上面提到的脚本方法不会下载脚本两次.许多浏览器缓存javascript文件,因此使用__CODE__将下载几次并停止,通过browserify使用谷歌地图模块将不会改变任何东西.