2010-05-14 27 views
72

Estoy cambiando de v2 a v3 google maps api y tengo un problema con la función gMap.getBounds().Google Maps Api v3 - getBounds no está definido

Necesito obtener los límites de mi mapa después de su inicialización.

Aquí está mi código javascript:


var gMap; 
$(document).ready(

    function() { 

     var latlng = new google.maps.LatLng(55.755327, 37.622166); 
     var myOptions = { 
      zoom: 12, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions); 

     alert(gMap.getBounds()); 
    } 
); 

Así que ahora me alerta que gMap.getBounds() no está definido.

He intentado obtener los valores getBounds en el evento click y funciona bien para mí, pero no puedo obtener los mismos resultados en el evento load map.

También getBounds funciona bien mientras se carga el documento en Google Maps API v2, pero falla en V3.

¿Podría ayudarme a resolver este problema?

Respuesta

118

En los primeros días de la API v3, el método getBounds() requería que las baldosas del mapa terminaran de cargarse para que devolviera los resultados correctos. Sin embargo, ahora parece que se puede escuchar a bounds_changed evento, que se dispara incluso antes del evento tilesloaded:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps v3 - getBounds is undefined</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 map = new google.maps.Map(document.getElementById("map"), { 
     zoom: 12, 
     center: new google.maps.LatLng(55.755327, 37.622166), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     google.maps.event.addListener(map, 'bounds_changed', function() { 
     alert(map.getBounds()); 
     }); 
    </script> 
</body> 
</html> 
+1

¡Eso es exactamente lo que necesito! gracias =). Solucionó mi problema. – DolceVita

+0

gracias .... ¡ojalá hubiera mirado aquí hace una hora! – kinet

+0

esto es muy útil para mí, casi perdí 2 horas por esto – arjuncc

18

Cabe trabajando, al menos de acuerdo a la documentación de getBounds(). Sin embargo:

var gMap; 
$(document).ready(function() { 
    var latlng = new google.maps.LatLng(55.755327, 37.622166); 
    var myOptions = { 
     zoom: 12, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions); 
    google.maps.event.addListenerOnce(gMap, 'idle', function(){ 
     alert(this.getBounds()); 
    }); 
}); 

Véalo funcionar here.

+0

Gracias por este enlace, realmente buen sistema de prueba – DolceVita

+0

Esta debería ser la respuesta aceptada. inactivo se llama mucho antes de tener que esperar a que se carguen todas las teselas. – treznik

+0

@treznik: ¿Cómo determinaste que el evento 'idle' se disparó antes del evento' tilesloaded'? Para mí, el evento 'tilesloaded' se dispara constantemente antes del evento' idle'. –

14

Estaba diciendo que la solución de Salman es mejor porque el evento idle se llama antes que el tilesloaded, ya que espera a que se carguen todas las teselas. Pero en una mirada más cercana, parece que se llama bounds_changed incluso antes y también tiene más sentido, ya que estás buscando los límites, ¿no? :)

Así que mi solución sería:

google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){ 
    alert(this.getBounds()); 
}); 
+1

Cuando se hizo esta pregunta, 'bounds_changed' no habría funcionado, ya que' getBounds() 'requería que se cargaran las teselas. +1 por sugerirlo. Actualizaré mi respuesta. –

9

En otros comentarios aquí, se aconsejó utilizar el evento "bounds_changed" sobre "inactivo", que estoy de acuerdo. Ciertamente bajo IE8 que desencadena "inactivo" antes de "bounds_changed" en mi máquina de desarrollo al menos, dejándome con una referencia a null en getBounds.

Sin embargo, el evento "bounds_changed" se activará continuamente cuando arrastre el mapa. Por lo tanto, si desea utilizar este evento para comenzar a cargar marcadores, será pesado en su servidor web.

Mi solución multi navegador para este problema:

google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){ 
    loadMyMarkers(); 
    google.maps.event.addListener(gmap, "idle", loadMyMarkers); 
}); 
+1

Este es el método que empleo, por las mismas razones :-) – oodavid

1

Bueno, no estoy seguro de si estoy demasiado tarde, pero aquí está mi solución utilizando gmaps.js plugin:

map = new GMaps({...}); 

// bounds loaded? if not try again after 0.5 sec 
var check_bounds = function(){ 

     var ok = true; 

     if (map.getBounds() === undefined) 
      ok = false; 

     if (! ok) 
      setTimeout(check_bounds, 500); 
     else { 
      //ok to query bounds here 
       var bounds = map.getBounds(); 
     } 
    } 

    //call it 
    check_bounds(); 
Cuestiones relacionadas