javascript 如何通过 npm 安装谷歌地图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46896362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to install google maps through npm?
提问by feerlay
Is there any package available on npm for google maps? Or am I really supposed to paste this
谷歌地图的 npm 上有没有可用的包？或者我真的应该粘贴这个
<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY">
</script>
to my index.html and download this js file on every refresh?
到我的 index.html 并在每次刷新时下载这个 js 文件？
This is super annoying, because sometimes I get ReferenceError: google is not defined.
这太烦人了，因为有时我会得到ReferenceError: google is not defined.
采纳答案by Justin Poehnelt
Or am I really supposed to paste this to my index.html and download this js file on every refresh?
或者我真的应该将它粘贴到我的 index.html 并在每次刷新时下载这个 js 文件？
Yes. This is the only way to do so. There are some packages to dynamically do this for you, but the behavior is the same.
是的。这是唯一的方法。有一些包可以为您动态执行此操作，但行为是相同的。
To reiterate, there is no official package for loading the Google Maps JavaScript for the web environment on NPM. The @google/mapsreferenced by others is for node only.
重申一下，没有用于在 NPM 上为 Web 环境加载 Google Maps JavaScript 的官方包。在@google/maps被别人引用是唯一节点。
Update - 2020/01/17
更新 - 2020/01/17
I wrote @googlemaps/loaderto help load the script dynamically and support promises.
我写了@googlemaps/loader来帮助动态加载脚本并支持承诺。
google is not definederrors can be avoided by using the callback query parameter when loading the google maps script.
在加载 google 地图脚本时使用回调查询参数可以避免google is not defined错误。
回答by pfg
The official google maps package (@google/maps) is for node only. In a browser environment, you need to use an unofficial package or include the official script on your site.
官方谷歌地图包 ( @google/maps) 仅适用于节点。在浏览器环境中，您需要使用非官方包或在您的站点中包含官方脚本。
To the ReferenceError problem, make sure the script tag for google maps is above the script tag for your code so that it loads first. If it isn't, your script may run before the google global variable is created.
对于 ReferenceError 问题，请确保 google maps 的 script 标签位于您的代码的 script 标签上方，以便它首先加载。如果不是，您的脚本可能会在创建 google 全局变量之前运行。
One unofficial package is google-maps, which can be used in a browser.
一个非官方软件包是google-maps，它可以在浏览器中使用。
回答by snyderxc
The ReferenceErroryou're getting is likely because you're not calling the library the right way.
在ReferenceError你得到可能是因为你没有调用库的正确方法。
In Google's Documentationsuggests that you should specify a callback (like initMap) which would be called when the API finishes loading. Anything you need to do with the Map should go within that function so that you ensure the API is loaded and googleis already defined.
在Google 的文档中建议您应该指定一个回调（如initMap），当 API 完成加载时将调用该回调。您需要对 Map 执行的任何操作都应包含在该函数中，以便确保 API 已加载并google已定义。
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
回答by Serhan C.
I came across same problem when I was working with React + TypeScript. Firstly I installed Google Maps SDK with this line;
我在使用 React + TypeScript 时遇到了同样的问题。首先，我用这条线安装了 Google Maps SDK；
npm install @google/maps
But TypeScript compiler gave an error, also offered me this line to install;
但是TypeScript编译器报错，还给我提供了这一行来安装；
npm install @types/google__maps
and then it worked.
然后它起作用了。
import { createClient } from "@google/maps"
const googleMaps = createClient({
key: "YOUR_API_KEY"
})
回答by SomeRandomGuy
Yes there are a few packages out there. You can try this one out.
是的，那里有一些包裹。你可以试试这个。
