Question

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

我收到此错误消息：＆＃34; initMap不是函数＆＃34;

我的文件是这样的：

!IFDEF JPEG_SUPPORT
LIBS        = $(LIBS) $(JPEG_LIB)
EXTRAFLAGS  = -DJPEG_SUPPORT -DOJPEG_SUPPORT $(EXTRAFLAGS)
!ENDIF

，我的js文件是：

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

我使用browserify和babelify来转换js文件

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

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

实际上我找不到/理解ES6上的函数运行的位置（范围是什么）我在initMap函数中打印了 this 值并且未定义

Answer 1

使用callback=initMap，Google地图预计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 &callback=initMap中删除<script>并等待API定义来解决此问题：

const googleDefined = (callback) => typeof google !== 'undefined' ? callback() : setTimeout(() => googleDefined(callback), 100)

googleDefined(() => {
    // init map
})
...

谷歌地图回调ES6文件

2 个答案: