javascript - ejemplos - google.maps.marker example
fitbounds() en Google maps api V3 no se ajusta a los límites (2)
Estoy usando el geocodificador de Google API v3 para mostrar un mapa de un país. Obtengo la ventana gráfica recomendada para el país, pero cuando quiero ajustar el mapa a esta ventana gráfica, no funciona (ver los límites antes y después de llamar a la función fitBounds en el siguiente código).
¿Qué estoy haciendo mal?
¿Cómo puedo configurar la ventana results[0].geometry.viewport de mi mapa en los 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))
}
);
Esto sucede porque fitBounds() necesita fitBounds() a una ventana fitBounds() que se ajuste al lienzo del mapa utilizando el nivel de zoom máximo posible. Por otro lado, la ventana gráfica devuelta por el geocodificador no depende del tamaño, el diseño o el nivel de zoom del lienzo del mapa. Por lo tanto, el método fitBounds() ajusta la vista del mapa para ver los LatLngBounds pasados en su totalidad en el centro del mapa.
Es posible que desee comprobar el siguiente ejemplo para una demonstation más clara:
<!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>
A continuación se muestran algunas capturas de pantalla de varios países del ejemplo anterior. El cuadro delimitador rojo es la ventana gráfica devuelta por el geocodificador. Tenga en cuenta la diferencia entre el cuadro delimitador y la ventana fitBounds() real, según lo ajustado por fitBounds() :
País: EE.UU.
País: RU
País: IT
Solo para informarle de qué manera puede personalizarse esto, he preparado una muestra de lo que puede hacer si prefiere perder parte del cuadro delimitador en la ventana gráfica.
una muestra con solo
fitBounds: http://jsbin.com/cakuhaca/1/edituna muestra para cuando no le importe que toda la ventana gráfica esté visible y siempre haga zoom en un nivel más: http://jsbin.com/rofupidi/1/edit
una muestra cuando solo te importa si el stip del cuadro delimitador que estás perdiendo tiene más de X píxeles en sentido horizontal o vertical http://jsbin.com/rezapuye/1/edit