帶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地圖不會縮放

回答

相關問題