Google Maps API：设置回调以添加标记/折线

Question

我正在尝试向生成的 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();
}

.

function setPath(callback) {

   $.getJSON('./expOneActivityData.json',

       function (data) {

           //Some looping contstruct to navigate through my JSON file.   
       }
   })

   callback();
};

.

function addPath() {

    var trekLine = new google.maps.Polyline({

        path: expeditionCoordinates,
        geodisc: true,
        stokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    trekLine.setMap(map);

}

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

在我的 HTML 文件中，我有：

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

当我尝试在脚本标签中用 initMap(setPath(addPath)) 替换 initMap 时，我收到了来自 Google 的 400 Bad 请求。当然，在脚本标签中只有“callback=initMap”会给出：

TypeError: callback is not a function

与 initMap 定义中的 callback() 一起发生。

那么如何将函数传递给 googleapis，其中函数本身也有回调？（顺便说一句，我的循环结构很好）。我尝试将“延迟”添加到 googleapi 脚本标签，以及链接到我的 JavaScript 文件的标签。我删除了所有回调的东西，只执行循环。我希望 expeditionCoordinates 数组能够在 googleapi 脚本标记被执行之前完成初始化，尽管这也不起作用（地图仍然加载，只是没有折线）。

我对 Javascript 还很陌生，它是异步的，尽管我确实了解它们的工作原理，并且已经在基本级别成功地与它们合作了一周左右。

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

initMap(setPath)

当 setPath 的定义作为参数传递时，它没有附加 () ，因此不会立即执行。尽管在 setPath 中添加了一组括号，因为它也需要一个回调（addPath），这是否意味着它会立即被执行？）

Answer 1

提供的示例有几个问题：

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

function initMap() {
   //...
}

在哪里

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

只能以这种方式指定无参数的回调函数。

2）由于jQuery.getJSON()是async在默认情况下和你逝去的回调函数，执行setPath函数应该是这样的：

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

工作示例

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);
        }
    );
};