谷歌地图在 ES6 文件上的回调答案

【问题标题】：google maps callback on ES6 file谷歌地图在 ES6 文件上的回调
【发布时间】：2018-01-30 07:41:46
【问题描述】：

我正在尝试在 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 函数中打印了 this 值，它是未定义的.

【问题讨论】：

export function initMap 你导入这个导出吗？
不，我添加导出只是为了测试，但我尝试在另一个 js (main.js) 中导入该函数，它也不起作用。
好吧，删除 export，并在（可以肯定）加载 googleapis 之前加载您的 js 文件（您没有显示如何或在何处执行此操作）-哦，等等... browserify ...没有读到那一点
我们无法真正可靠地帮助您查看代码的整个布局、包含的内容、包含的内容等...您加载 Google 地图的方式，initMap()需要是全局定义的函数，在 google 初始化时可用。

标签： javascript google-maps scope callback ecmascript-6

【解决方案1】：

如果您想在不转译的情况下交付 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
})
...

【讨论】：

【解决方案2】：

通过使用 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

【讨论】：

实际上我只是尝试过这个并且有效： import * as mapObj from "./modules/map"; window.initMap = mapObj.initMap;
@ArturoRV 是的，当然。不要忘记标记答案:)
不确定什么是最好的方法，但非常感谢您的帮助！似乎没有办法从控制台或 html 访问 ES6 js 中定义的函数
我标记了它，但似乎我没有足够的声誉:(
@ArturoRV 您可以点击 ✔ 标志。声望足够时您将可以投票，但标记答案不需要积分。