Google 地图 API：设置回调以添加 markers/polyline

Question

我正在尝试向生成的 Google 地图添加折线。折线的坐标是使用 jQuery（getJSON 函数）从我的网络服务器上的 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，函数本身也有回调？（顺便说一句，我的循环构造很好）。我尝试将 'defer' 添加到 googleapi 脚本标记，以及链接到我的 JavaScript 文件的标记。我删除了所有回调的东西，只执行了循环。我希望 expeditionCoordinates 数组能够在执行 googleapi 脚本标记之前完成初始化，尽管这也不起作用（地图仍在加载，只是没有折线）。

我是 Javascript 的新手，它是异步的，但我确实了解它们的工作原理，并且已经在一周左右的时间里成功地使用它们进行了基础级别的工作。

（这实际上让我想到了一个附带问题。到目前为止，我只使用了一个回调。我希望是这样的：

initMap(setPath)

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

Answer 1

您不能在 Google 地图 Javascript API v3 脚本包含的 callback 参数中传递参数。

这行不通：

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

如您所见。像这样的东西应该：

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

function setPath(callback) {
  $.getJSON('./expOneActivityData.json',
    function(data) {
      // Some looping contstruct to navigate through my JSON file.
      // create the expeditionCoordinates array
      callback(expeditionCoordinates);
    }
  );
};

function addPath(expeditionCoordinates) {
  var trekLine = new google.maps.Polyline({
    path: expeditionCoordinates,
    geodisc: true,
    stokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  trekLine.setMap(map);
}

使用它来异步加载 API:

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

Answer 2

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

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

function initMap() {
   //...
}

其中

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

Only parameter-less callback function could be specified this way.

2) 由于 jQuery.getJSON() 默认为 async 并且您正在传递函数回调，因此 setPath 函数的实现应如下所示：

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

工作示例

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

    setPath(function(data) {
        addPath(map,data);
    });
}

function setPath(callback) {
    $.getJSON('https://gist.githubusercontent.com/vgrem/91ba4d694157169b112c/raw/5bdd81c6f5bdfa5ba2d0ca8d5494129b329399d8/expOneActivityData.json',
        function (data) {
            callback(data);
        }
    );
};


function addPath(map,expeditionCoordinates) {
    var trekLine = new google.maps.Polyline({
        path: expeditionCoordinates,
        geodisc: true,
        stokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    trekLine.setMap(map);
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map-canvas {
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"
            async defer></script>

Answer 3

但是，您可以add a one-time event listener模仿发送回叫。

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 和您的代码过程中，尽管在您已经削减 new Map 代码之后添加事件监听器似乎有点松散奇数。

请注意，虽然它的逻辑更线性一些，但加载速度可能不如 Vadim 的回答中的异步 "the right way" 快。

Google 地图 API：设置回调以添加 markers/polyline

Google Maps API: Setting up callbacks for adding markers/polyline

javascript

google-maps

callback

polyline

google-maps-api-3