Question

我正在尝试将GeoJSON加载到google maps javascript api，然后通过调用map.data.forEach来处理GeoJSON。我无法使map.data.forEach函数工作，似乎永远不会被调用。

GeoJSON被正确加载并显示在我的地图上。

为什么map.data.forEach在这里不起作用的任何建议？

这是我的代码：

var myMap;

function initialize() {
    // Create a simple map.
    myMap = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 8,
        center: {
            lat: 48.2081743,
            lng: 16.3738189
        }
    });

}

function calculate(map) {
    console.log("calculating")
    map.data.forEach(function (feature) {
        console.log("tester");
    });
    console.log("end calculating");
}

function loadGeoJson(map) {
    map.data.loadGeoJson('mini.json');
}

google.maps.event.addDomListener(window, 'load', function () {
    initialize();
    loadGeoJson(myMap);
    calculate(myMap);
});

Answer 1

这是由javascripts异步性质引起的。当你有代码

loadGeoJson(myMap);
calculate(myMap);

和loadGeoJson加载外部资源，calculate很可能在 loadGeoJson完成之前执行。很容易重现你的问题。

不幸的是google.maps.Data :: loadGeoJson中没有回调机会，但是如果你将calculate的调用包装成一个小的setTimeout，那么你应该是好的：

loadGeoJson(myMap); setTimeout(function() { calculate(myMap); }, 500);

从上面看到你的代码的小提琴 - ＆gt;的 http://jsfiddle.net/SAS6Q/

Answer 2

您还可以使用jQuery和Ajax同步加载JSON以避免设置时间延迟：

function loadGeoJson(map) {
  $.ajax({
    url: mini.json,
    dataType: 'json',
    async: false,
    success: function(data) 
              {var features = map.data.addGeoJson(data);}
    });
}

Google forEach map.data功能未调用

2 个答案: