javascript - latlngbounds - Google Maps fitBounds no funciona correctamente
google maps map (2)
Muéstranos un enlace al paciente. ¿Cuántos países tienes en la matriz de países? ¿El mundo entero? ¿Tus límites cruzan el anti-meridiano?
country.lat y country.lng son un punto por país, y eso no es suficiente para definir el cuadro delimitador del país. ¿Es eso una especie de "centroide de país"?
Si ese es el caso, y si tiene marcadores al este del centro de gravedad del país más oriental, o al oeste del centro del oeste del país, esos marcadores, por supuesto, quedarán fuera de los límites que está definiendo.
El método map.fitBounds() funciona bien. :-)
Marcelo.
Tengo un problema con las funciones de googlemaps fitBounds.
for (var i = 0; i < countries.length; i++) {
var country = countries[i];
var latlng = new google.maps.LatLng(parseFloat(country.lat), parseFloat(country.lng));
mapBounds.extend(latlng);
}
map.fitBounds(mapBounds);
Algunos iconos se mostrarán fuera de la ventana gráfica / área visible.
¿Y la idea?
Gracias por adelantado.
Considere el siguiente ejemplo, que generará 10 puntos aleatorios en el noreste de Estados Unidos, y aplica el método fitBounds() .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps LatLngBounds.extend() Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById(''map''), {
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var markerBounds = new google.maps.LatLngBounds();
var randomPoint, i;
for (i = 0; i < 10; i++) {
// Generate 10 random points within North East USA
randomPoint = new google.maps.LatLng( 39.00 + (Math.random() - 0.5) * 20,
-77.00 + (Math.random() - 0.5) * 20);
// Draw a marker for each random point
new google.maps.Marker({
position: randomPoint,
map: map
});
// Extend markerBounds with each random point.
markerBounds.extend(randomPoint);
}
// At the end markerBounds will be the smallest bounding box to contain
// our 10 random points
// Finally we can call the Map.fitBounds() method to set the map to fit
// our markerBounds
map.fitBounds(markerBounds);
</script>
</body>
</html>
Actualizando este ejemplo muchas veces, ningún marcador sale de la ventana gráfica. Como máximo, a veces un marcador se recorta ligeramente desde la parte superior cuando se oculta detrás de los controles:
Demo de Google Maps LatLngBounds.extend () http://img825.imageshack.us/img825/7424/fitboundsfit.png
Tampoco vale la pena que fitBounds() siempre deje un pequeño margen entre el objeto LatLngBounds y la ventana LatLngBounds . Esto se muestra claramente en las capturas de pantalla a continuación, donde el cuadro delimitador rojo representa los LatLngBounds que se pasan al método fitBounds() :
relleno FitBounds http://img204.imageshack.us/img204/9149/fitit.png
relleno de fitBounds http://img441.imageshack.us/img441/9615/fitus.png
Puede que también esté interesado en consultar las siguientes publicaciones de sobre el tema: