Javascript Google Maps API：设置用于添加标记/多段线的回调

我正在尝试向生成的Google地图添加多段线。多段线的坐标是使用jQuery（getJSON函数）从web服务器上的JSON文件中获取的。然而，我在回拨方面遇到了麻烦。我在一个单独的JavaScript文件中定义了三个函数，它们是：

function initMap(callback) {

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: {lat: 34.397, lng: 150.644},
        scrollwheel: false,
        zoom: 2
    });

    callback();
}

expeditionCoordinates是一个数组，每个元素都是一个具有纬度和经度属性的对象。它被声明为一个全局变量，值初始化发生在setPath（）的循环中

在我的HTML文件中，我有：

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

在initMap的定义中与callback（）在同一行发生

那么我如何将函数传递给googleapis，函数本身也有回调？（顺便说一句，我的循环结构很好）。我尝试在googleapi脚本标记中添加'defer'，也在链接到我的JavaScript文件的标记中添加'defer'。我删除了所有回调的内容，只删除了循环。我希望expeditionCoordinates数组能够在超出googleapi脚本标记之前完成初始化，尽管这也不起作用（地图仍然加载，只是没有多段线）

我对Javascript是相当陌生的，而且它是异步的，尽管我确实了解它们是如何工作的，并且已经成功地与它们进行了一周左右的基础工作

（这实际上让我想到了一个次要问题。到目前为止，我只处理过一次回调。我希望得到如下结果：

initMap(setPath)

---

作为setPath工作，当其定义作为参数传递时，没有附加（），因此不会立即执行。尽管向setPath添加一组括号，因为它也接受回调（addPath），这意味着它会立即执行吗？）

您不能在Google Maps Javascript API v3脚本包含的

回调中传递参数

这行不通：

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap(setPath(addPath))"></script>

使用此选项异步加载API：

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

所提供的示例存在几个问题：

1） 加载Google Maps API时，
回调
参数接受
回调函数名，函数本身应具有
以下签名：

function initMap() {
   //...
}

在哪里

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

工作示例


函数initMap（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：{lat:34.397，lng:150.644}，
滚轮：错误，
缩放：2
});
设置路径（函数（数据）{
addPath（地图、数据）；
});
}
函数setPath（回调）{
$.getJSON（'https://gist.githubusercontent.com/vgrem/91ba4d694157169b112c/raw/5bdd81c6f5bdfa5ba2d0ca8d5494129b329399d8/expOneActivityData.json',
功能（数据）{
回调（数据）；
}
);
};
功能添加路径（地图、远征坐标）{
var trekLine=new google.maps.Polyline({
路径：远征坐标，
geodisc：没错，
斯托克颜色：'#FF0000'，
笔划不透明度：1.0，
冲程重量：2
});
trekLine.setMap（map）；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图画布{
身高：100%；
}

但是，您可以模拟发送回调

var map;

function initMap(mapId, latLong, callback) {
    //...

    map = new google.maps.Map(document.getElementById(mapId), {
        zoom: 16,
        center: latlng
    });


    // This is what you're interested in...
    if ($.isFunction(callback)) {
        google.maps.event.addListenerOnce(map, 'tilesloaded', callback);
    }
}

这将回调排除在脚本
src
URL和您的代码过程之外，尽管在已经剪切
newmap
代码之后添加事件侦听器似乎有点奇怪

请注意，尽管它的逻辑更为线性，但它的加载速度可能不如Vadim回答中的异步“正确方式”快。
异步加载程序的回调函数（
initMap
）不能接受任何参数，它是一个函数指针。
<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap" async defer></script>

function initMap() {
   //...
}

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

function setPath(callback) {
    $.getJSON('./expOneActivityData.json',
        function (data) {
            callback(data);
        }
    );
};

var map;

function initMap(mapId, latLong, callback) {
    //...

    map = new google.maps.Map(document.getElementById(mapId), {
        zoom: 16,
        center: latlng
    });


    // This is what you're interested in...
    if ($.isFunction(callback)) {
        google.maps.event.addListenerOnce(map, 'tilesloaded', callback);
    }
}