google-maps-api-3 - Google Maps API v3 - 多个地理编码器请求后的 fitBounds

我想要做的是使用 AJAX 和 JSON 加载一堆地址，找出每个地址的经纬度，在 map 上放置标记，然后使用 fitBounds() 放大以便所有标记都可见。听起来很简单。

我已经压缩了大部分内容，但我的问题是 fitBounds() 部分。

基本上似乎正在发生的是在循环遍历每个地址并找到纬度和经度时，它似乎在循环下方加载 fitBounds() 函数。

所以它正在调用 fitBounds() 但在 marker_bounds 数组中还没有任何东西。我原以为它会在进入 fitBounds() 函数之前完成循环，但我猜 geocoder.geocode() 函数必须使其继续加载 JavaScript 的其余部分，同时确定纬度和经度。

我的代码如下:

var geocoder;
var map;
var marker_bounds = [];

var myOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

$.post('addresses.php', function(data) {

    var next_filter = '';
    for(var x=0;x<data.addresses.length;x++) {

        geocoder.geocode( { 'address': data.addresses[x].address}, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {

                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                var latLng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                marker_bounds.push(latLng);
            }

        });
    }

    var latlngbounds = new google.maps.LatLngBounds();
    for ( var i = 0; i < marker_bounds.length; i++ ) {
       latlngbounds.extend(marker_bounds[i]);
    }
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);

}, 'json');

在所有地理编码完成后，是否有可以调用的函数？

最佳答案

好的，这就是我学到的。

地理编码方法进行异步调用，因此地理编码方法所在的页面将在地理编码器在该过程中完成查找地址之前很久就完成。

您需要在运行地理编码方法后调用函数 (addressBounds) 并计算它已地理编码的地址数 (address_count)。

每次调用 addressBounds 函数时，检查是否已查找所有地址( if (total_addresses == address_count) )，然后运行 ​​fitBounds() 函数。

我的最终代码

var geocoder;
var map;
var markerBounds = [];

var myOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

google.maps.event.addListenerOnce(map, 'idle', function(){

    $.post('addresses.php', function(data) {

        var total_addresses = data.addresses.length;
        var address_count = 0;
        for(var x=0;x<total_addresses;x++) {

            geocoder.geocode( { 'address': data.addresses[x].address }, function(results, status) {

                address_count++;

                if (status == google.maps.GeocoderStatus.OK) {

                    marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });

                    var infowindow = new google.maps.InfoWindow();
                    infowindow.setContent(address);
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map, marker);
                    });

                    var myLatLng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                    addressesBounds(total_addresses, address_count, myLatLng);

                }

            });

        }

    }, 'json');

});

function addressesBounds(total_addresses, address_count, myLatLng) {

    markerBounds.push(myLatLng);

    // make sure you only run this function when all addresses have been geocoded
    if (total_addresses == address_count) {
        var latlngbounds = new google.maps.LatLngBounds();
        for ( var i = 0; i < markerBounds.length; i++ ) {
           latlngbounds.extend(markerBounds[i]);
        }
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);
    }
}