带有 fitBounds 的谷歌地图不缩放答案

【问题标题】：Google Maps with fitBounds don't zoom带有 fitBounds 的谷歌地图不缩放
【发布时间】：2012-01-23 19:57:37
【问题描述】：

以下代码可以正常工作，只是它没有缩放到给定点。

如果我直接使用 Latlng，它可以工作，无需将地址转换为 Latlng。

我需要将地址转换为 latlng，因为我从数据库中获取地址。

有谁知道出了什么问题？

    <!DOCTYPE html> 
<html>  
<head>  
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
   <title>Google Maps Test</title>  
   <script src="http://maps.google.com/maps/api/js?sensor=false"  
           type="text/javascript"></script>  
</head>  
<body>  
   <div id="map" style="width: 600px; height: 400px;"></div>  

   <script type="text/javascript">  

   var arrAddress = new Array();

   arrAddress[0] = "kelbergen, Amsterdam";
   arrAddress[1] = "Kraailookstraat, Amsterdam";
   arrAddress[2] = "krootstraat, Amsterdam";

   var optionMap = {
          zoom: 16,
          MapTypeId: google.maps.MapTypeId.ROADMAP,
          };

    var map = new google.maps.Map(document.getElementById('map'), optionMap);

    var geocoder = new google.maps.Geocoder();

    var latlngbounds = new google.maps.LatLngBounds();

    for(var i = 0; i < arrAddress.length; i++) {

        geocoder.geocode( { 'address': arrAddress[i]}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {

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

                    latlngbounds.extend(results[0].geometry.location);
            }
        });

    }

    map.fitBounds(latlngbounds);

    </script>  
</body>  
</html>

【问题讨论】：

不去标记和缩放。这里的网址promeb.nl/test_google_maps.html

标签： javascript google-maps-api-3

【解决方案1】：

Google 的地理编码器是异步的，因此在对所有点进行地理编码之前调用 map.fitbounds(latlngbounds)。解决此问题的最简单方法是将map.fitbounds(latlngbounds) 放在extend 调用之后。

for(var i = 0; i < arrAddress.length; i++) {
     geocoder.geocode( { 'address': arrAddress[i]}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {

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

                latlngbounds.extend(results[0].geometry.location);
                map.fitBounds(latlngbounds);

        }
    });
}

更新： 这是一个更好的答案。在最后一个示例中，map.fitbounds(latlngbounds) 方法被重复调用，当有很多标记时，这可能会产生问题。使用this question 中的答案，您可以创建一个异步循环以确保map.fitbounds(latlngbounds) 只被调用一次。

//replaced the for loop.
asyncLoop(arrAddress.length, function(loop) {
    geocoder.geocode({                           
        'address': arrAddress[loop.iteration()] //loop counter
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            latlngbounds.extend(results[0].geometry.location);    
        }

        //increment the loop counter.
        loop.next();
    });
}, function() {
    //when the loop is complete call fit bounds.
    map.fitBounds(latlngbounds);
});    

function asyncLoop(iterations, func, callback) {
    var index = 0;
    var done = false;
    var loop = {
        next: function() {
            if (done) {
                return;
            }

            if (index < iterations) {
                index++;
                func(loop);

            } else {
                done = true;
                callback();
            }
        },

        iteration: function() {
            return index - 1;
        },

        break: function() {
            done = true;
            callback();
        }
    };
    loop.next();
    return loop;
}

示例已更新： fiddle of the working code.

【讨论】：

我用一个不多次调用map.fitBounds() 的例子更新了答案。