javascript - 谷歌 map 回调在ES6文件

我正在尝试在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);
}

我正在使用browserify和babelify来转译js文件

我已经尝试过上下移动，但到目前为止还没有运气，唯一可行的方法是直接在html上添加initMap函数，如本指南所示:

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

实际上，我找不到/无法理解ES6上的函数在哪里运行(作用域是哪一个)，我在initMap函数内部打印了这个值，并且它是未定义的。

最佳答案

通过使用callback=initMap，Google Maps期望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