2011-03-29 29 views
9

Estoy usando Google Maps API v3 para mostrar un mapa, cargar algunos archivos KML y mostrarlos/ocultarlos con el método kml.setMap().Google Maps API V3 devoluciones de llamada (carga de KML)

Necesito mostrar una ventana de "carga" mientras el archivo KML se está cargando hasta que el mapa se haya cargado por completo.

Me trataron de usar algo como esto:

google.maps.event.addListener(map, 'tilesloaded', function() { 
    var d = new Date(); 
    console.log('Loaded: ' + d); 
}); 

google.maps.event.addListener(map, 'bounds_changed', function() { 
    var d = new Date(); 
    console.log('Started: ' + d); 
}); 

pero no funcionó como se esperaba.

El evento "titlesloaded" no se activa siempre, probablemente porque las imágenes en caché?

Aquí es mi registro:

Started: Tue Mar 29 2011 16:22:03 GMT-0300 (BRT) <-- started loading map 
Loaded: Tue Mar 29 2011 16:22:06 GMT-0300 (BRT) <-- done loading map 
Started: Tue Mar 29 2011 16:22:30 GMT-0300 (BRT) <-- started plotting the KML 
Started: Tue Mar 29 2011 16:22:30 GMT-0300 (BRT) <-- started plotting the KML (again?!) 
Loaded: Tue Mar 29 2011 16:22:32 GMT-0300 (BRT) <-- done plotting the KML 

y recibió nada al tiempo que oculta/muestra el nuevo KML

Respuesta

18

Intente registrar un oyente en el kmlLayer en lugar del mapa. Hice algunas pruebas simples al escuchar el evento metadata_changed y parece funcionar bien.

google.maps.event.addListener(kmlLayer, "metadata_changed", function() { 
    console.debug("metadata_changed"); 
}); 
4

supongo que se podría escribir su propio cargador personalizado para KML. Aquí hay un ejemplo simple que simplemente prueba el valor de retorno del objeto KMLMetaData. Tendría que adaptar esto para trabajar con múltiples archivos KML.

<html> 
    <head> 
     <script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false"> 
     </script> 
     <script> 
    var map; 
    var cta_layer; 
    var loader; 
    var loaderId; 

    function initialize() { 
     loader = document.getElementById("loader"); 
     var kmlUrl = 'http://code.google.com/apis/kml/documentation/KML_Samples.kml'; 
     var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
     var myOptions = { 
      zoom: 4, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     cta_layer = new google.maps.KmlLayer(kmlUrl, {suppressInfoWindows: true,preserveViewport:true}); 
     cta_layer.setMap(map); 
     loaderId = setInterval("kmlLoader()", 10) 
    } 

    function kmlLoader() { 

     if (typeof cta_layer.getMetadata() == "object") { 

      loader.style.display = "none"; 
      clearInterval(loaderId); 
      return true; 
     } else { 
      return false; 
     } 
    } 

    function show() { 
     cta_layer.setMap(map) 
    } 

    function hide() { 
     cta_layer.setMap(null) 
    } 
     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="loader" style="background: red; color:white;display:block;"> 
      Loading.... 
     </div> 
     <div id="map_canvas" style="height: 500px;width: 500px;"> 
     </div> 
     <input type=button onclick="show()" value="Show"> 
     <input type=button onclick="hide()" value="Hide"> 
    </body> 
</html> 
2

Si miro a la referencia actual (del NoV 18 de, 2012), sólo tiene que escuchar el caso status_changed. Ni siquiera puedo encontrar el evento metadata_changed más.

+3

metadata_changed todavía está allí y todavía no está documentado! Es necesario cuando desea ver los metadatos KML, ya que he encontrado que no está rellenado en el evento status_changed – Doogal

+0

A partir del 8 de julio de 2015, "metadata_changed" aún está allí y aún no está documentado. ¡Y todavía no está incluido en el evento "status_changed"! – sntran

Cuestiones relacionadas