Google Maps with fitBounds

次のコードは正常に動作しますが、指定された点までズームされていません。Google Maps with fitBounds

私はLatlng directを取ると、アドレスを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

を*正確に*うまくいきませんか？ –

はマーカーとズームに移動しません。ここでURL http://www.promeb.nl/test_google_maps.html – mebots

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); 

     } 
    }); 
}

UPDATE：ここ が良い答えです。最後の例では、map.fitbounds(latlngbounds)メソッドが繰り返し呼び出され、多くのマーカーがある場合に問題を引き起こす可能性があります。 this questionの答えを使用すると、非同期ループを作成してmap.fitbounds(latlngbounds)が1回だけ呼び出されることを確認できます。

//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

Tanks Bryan、それは今働いています – mebots

私はmap.fitBounds（）を何度も呼び出さない例で答えを更新しました。 –

Google Maps with fitBounds

答えて

関連する問題