带fitBounds的Google地图不会缩放

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

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

来源

2011-12-19 mebots

什么* *究竟出了问题？ – 2011-12-19 18:16:42

不会转到标记并缩放。与这里的网址http://www.promeb.nl/test_google_maps.html – mebots 2011-12-19 19:28:55

谷歌的地理编码器是异步的，因此所有的点都被地理编码前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); 

     } 
    }); 
}

UPDATE： 这是一个更好的答案。在最后一个例子中，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.

来源

2011-12-19 19:25:57

坦克布赖恩，它现在的工作 – mebots 2011-12-19 19:45:40

我更新了一个不会调用'map.fitBounds（）'多次的例子的答案。 – 2011-12-19 20:09:37

带fitBounds的Google地图不会缩放

回答

相关问题