在 Webpack 包中加载 Google Maps API 回调脚本的问题
[英]Problems loading Google Maps API callback script in Webpack bundle
问题描述
I have a function initMap() that is supposed to be called when the Google Maps API has finished loading.
我有一个函数initMap()应该在 Google Maps API 加载完成时调用。 This function manages all of the settings for the map I use in my web-app.此功能管理我在网络应用程序中使用的地图的所有设置。
initMap() lives in a file called init-map.js . initMap()位于一个名为init-map.js的文件中。
I'm migrating to Webpack, so init-map.js is now being included in index.js using require('./scripts/init-map.js .我正在迁移到 Webpack，因此init-map.js现在使用require('./scripts/init-map.js包含在index.js 。
I'm getting an error InvalidValueError: initMap is not a function , but when I load init-map.js using its own <script> tag, I don't get the error.我收到错误InvalidValueError: initMap is not a function ，但是当我使用它自己的<script>标签加载init-map.js ，我没有收到错误消息。
Causes error:导致错误：
<html>
<head>
...
<script src="bundle.js"></script> <!-- init-map.js is required in this file -->
</head>
<body>
....
<script src="https://maps.googleapis.com/maps/api/js?key=🔑&callback=initMap" async defer></script>
</body>
</html>
Works without issue:工作没有问题：
<html>
<head>
...
<script src="bundle.js"></script>
<script src="./scripts/init-map.js"></script>
</head>
<body>
....
<script src="https://maps.googleapis.com/maps/api/js?key=🔑&callback=initMap" async defer></script>
</body>
</html>
I don't understand how to make initMap() available for the Google Maps API when it makes the callback.我不明白如何initMap()回调时使initMap()可用于 Google Maps API。
I would also prefer to have the init-map.js managed within index.js .我还希望在index.js管理init-map.js 。
2 个解决方案
解决方案1
0 2020-06-01 17:40:34
我相信这是因为捆绑程序将您的 initMap 函数的名称更改为单个字母之类的名称，例如e或f 。
解决方案2
-1 2017-04-16 09:05:49
Please check your calling part.请检查您的呼叫部分。 Is it throwing 404 errors?它会抛出 404 错误吗？ on inspect element -> Network在检查元素 -> 网络
Try using from "./scripts/init-map.js" to "/scripts/init-map.js" or "scripts/init-map.js"尝试使用从“./scripts/init-map.js”到“/scripts/init-map.js”或“scripts/init-map.js”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.