fitbounds() in Google maps api V3 non combacia con i limiti

Sto usando il geocoder da Google API v3 per visualizzare una mappa di un paese. Ottengo il viewport consigliato per il Paese ma quando voglio adattare la mappa a questo viewport, non funziona (vedi i limiti prima e dopo aver chiamato la funzione fitBounds nel codice qui sotto).fitbounds() in Google maps api V3 non combacia con i limiti

Cosa sto sbagliando?

Come si imposta la vista della mia mappa su results[0].geometry.viewport?

var geocoder = new google.maps.Geocoder(); 
geocoder.geocode(
    {'address': '{{countrycode}}'}, 
    function(results, status) { 
     var bounds = new google.maps.LatLngBounds(); 
     bounds = results[0].geometry.viewport; 
     console.log(bounds);   // ((35.173, -12.524), (45.244, 5.098)) 
     console.log(map.getBounds()); // ((34.628, -14.683), (58.283, 27.503)) 
     map.fitBounds(bounds);    
     console.log(map.getBounds()); // ((25.740, -24.806), (52.442, 17.380)) 
    } 
);

fonte

2010-03-22 jul

Questo accade perché la fitBounds() ha bisogno di scattare a una finestra che si inserisce la tela mappa utilizzando il livello di zoom massimo possibile. D'altra parte, il viewport restituito dal geocoder non dipende dalla dimensione, dal layout o dal livello di zoom dell'area di disegno della mappa. Pertanto, il metodo fitBounds() regola il viewport della mappa per visualizzare completamente il passaggio LatLngBounds al centro della mappa.

Si consiglia di controllare il seguente esempio per un demonstation più chiaro:

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

    <script type="text/javascript"> 
     var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP }; 
     var map = new google.maps.Map(document.getElementById("map"), myOptions); 
     var geocoder = new google.maps.Geocoder(); 

     geocoder.geocode({'address': 'RU'}, function (results, status) { 
     var ne = results[0].geometry.viewport.getNorthEast(); 
     var sw = results[0].geometry.viewport.getSouthWest(); 

     map.fitBounds(results[0].geometry.viewport);    

     var boundingBoxPoints = [ 
      ne, new google.maps.LatLng(ne.lat(), sw.lng()), 
      sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne 
     ]; 

     var boundingBox = new google.maps.Polyline({ 
      path: boundingBoxPoints, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 

     boundingBox.setMap(map); 
     }); 
    </script> 
</body> 
</html>

Qui di seguito alcuni screenshot per i vari paesi dalla nell'esempio precedente. Il riquadro rosso è il viewport restituito dal geocoder. Si noti la differenza tra il rettangolo di selezione e la finestra attuale, modificato dal fitBounds():

Paese: US

Paese: RU

Paese: IT

fonte

2010-03-22 23:45:16

Grazie Daniel. – jul

Ho avuto difficoltà a capire come fare anche questo, spiegazione dettagliata impressionante! – designermonkey

Grazie mille per la spiegazione approfondita. Il boundingBox è stata una grande idea per chiarire questo punto. – Symmetric

Giusto per farvi sapere in che modo questo può essere personalizzato, ho preparato un esempio di cosa si può fare se si preferisce perdere alcuni dei boundingBox nella finestra

un campione con un solo fitBounds : http://jsbin.com/cakuhaca/1/edit
un campione per quando non si cura che tutta la finestra è visibile e zoom sempre in un altro livello: http://jsbin.com/rofupidi/1/edit
un campione quando si cura solo se lo stip di th Il riquadro di delimitazione che stai perdendo è più di X pixel in orizzontale o verticale http://jsbin.com/rezapuye/1/edit

fonte

2012-10-30 10:49:08 kaskader

:(di questo collegamento sono morti. –

fissato con un collegamento più permanente – kaskader

morti ..... –

fitbounds() in Google maps api V3 non combacia con i limiti

risposta

Problemi correlati