谷歌地图回调ES6文件

Question

我正在尝试在 ES6 文件上添加回调，但它找不到它。

我收到此错误消息："initMap 不是一个函数">

我的文件是这样的：

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

我的JS文件是：

export function initMap()
{
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
fetch('/data/markers.json')
.then(function(response){return response.json()})
.then(plotMarkers);
}

我正在使用浏览器化和巴贝尔化来转译 js 文件

我尝试上下移动东西，到目前为止没有运气，它的唯一方法是直接在 html 上添加 initMap 函数，如本指南所示：

https://developers.google.com/maps/documentation/javascript/adding-a-google-map

实际上我找不到/理解 ES6 上的函数在哪里运行(范围是什么(我在 initMap 函数中打印了这个值，它是未定义的。

Answer 1

通过使用callback=initMap，谷歌地图预计initMap将是全球性的。

您可以通过执行以下操作将其公开为全局window.initMap = initMap：

window.initMap = () => {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
fetch('/data/markers.json')
.then(function(response){return response.json()})
.then(plotMarkers);
};

另一种方法是import脚本并在另一个文件中公开全局，如您所提到的：

import * as mapObj from "./modules/map";
window.initMap = mapObj.initMap

Answer 2

如果您想在不转译的情况下交付 ES6 代码(使用始终延迟的<script type="module">(，您可能会遇到同样的问题，上面的解决方案并不总是有效。

我认为问题是延迟脚本的执行顺序有点随机，如果 API 脚本在您的 ES6 代码之前运行，则仍然会显示错误。

您可以通过从 API<script>中删除&callback=initMap并等待定义 API 来解决此问题：

const googleDefined = (callback) => typeof google !== 'undefined' ? callback() : setTimeout(() => googleDefined(callback), 100)
googleDefined(() => {
// init map
})
...