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

Question

我想要做的是使用AJAX和JSON加载一堆地址,找出每个地址的纬度和经度,在地图上放置标记,然后使用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'); 

在完成所有地理编码后,是否有可以调用的功能？

Answer 1

好的,这是我学到的.

1. 地理编码方法进行异步调用,因此地理编码方法所在的页面将在地理编码器完成该过程中查找地址之前很久就完成.
2. 您需要在addressBounds运行地理编码方法后调用function()并计算它已对地理编码的地址数(address_count).
3. 每次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);
    }
}