2011-03-29 75 views
9

我使用Google Maps API v3显示加载一些KML的地图,并使用kml.setMap()方法显示/隐藏它们。谷歌地图API V3回调(KML加载)

我需要在KML加载时显示“加载”窗口,直到地图加载完成。

我试图用这样的:

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); 
}); 

但预期它并没有奏效。

“titlesloaded”事件不会始终被触发,可能是因为缓存的图像?

这是我的日志:

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 

并没有收到任何在隐藏/显示KML再次

回答

18

尝试在kmlLayer而不是地图上注册侦听器。我通过监听metadata_changed事件做了一些简单的测试,看起来工作正常。

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

我想你可以写为KML自己的自定义加载程序。这是一个简单的例子,它简单地测试KMLMetaData对象的返回值。你将不得不适应这个工作与多个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

如果我看当前基准(如2012年11月18日),你可以简单地听status_changed事件。我甚至无法找到metadata_changed事件。

+3

metadata_changed仍然存在,仍然没有记录!如果您想查看KML元数据,则需要它,因为我发现它并未填充到status_changed事件中。 – Doogal 2015-03-21 19:06:02

+0

截至2015年7月8日,“metadata_changed”仍然存在,但仍未记录。它仍然没有填充在“status_changed”事件中! – sntran 2015-07-08 04:24:40