Question

以下代码可以正常工作，但不会缩放到给定的点。

如果我直接使用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>

Answer 1

Google的地理编码器是异步的，因此在对所有点进行地理编码之前调用map.fitbounds(latlngbounds)。解决此问题的最简单方法是在扩展调用之后立即放置map.fitbounds(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);

        }
    });
}

<强>更新这是一个更好的答案。在最后一个示例中，重复调用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.

带有fitBounds的Google地图不会缩放

1 个答案: