fitbounds () in Google maps api V3 non si adatta limiti

StackOverflow https://stackoverflow.com/questions/2494756

Domanda

Sto utilizzando il geocoder da Google API v3 per visualizzare una mappa di un paese. Ho la finestra consigliata per il paese, ma quando voglio adattare la mappa per questo viewport, non funziona (vedere i limiti prima e dopo la chiamata della funzione fitBounds nel seguente codice).

Che cosa sto facendo di sbagliato?

Come posso impostare la finestra della mia mappa per 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))
    }
);
È stato utile?

Soluzione

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, la finestra restituito dal geocoder non dipende dal livello di formato, layout o zoom della mappa. Pertanto il metodo fitBounds() regola viewport della mappa in modo da visualizzare l'LatLngBounds passata in pieno 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>

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

Paese: US

US

Paese: RU

RU

Paese: IT

IT

Altri suggerimenti

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top