谷歌地图API V3回调函数（KML加载）

Question

谷歌地图API V3回调函数（KML加载）

9

我正在使用Google Maps API v3来显示地图，加载一些KML文件并使用kml.setMap()方法来进行显示/隐藏。

在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时没有收到任何东西

- Thiago Belem

3个回答

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>

- Michal

2

如果我查看当前参考资料（截至2012年11月18日），您只需监听status_changed事件即可。我甚至找不到metadata_changed事件了。

- fietserwin

3

metadata_changed仍然存在且仍未记录！当您想查看KML元数据时，它是必需的，因为我发现在status_changed事件中没有填充它。 - Doogal

截至2015年7月8日，“metadata_changed”仍然存在且未记录。而且在“status_changed”事件中仍未填充！ - Sơn Trần-Nguyễn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Björn · Accepted Answer

尝试在kmlLayer上注册监听器而不是地图。我进行了一些简单的测试，监听metadata_changed事件，它似乎运行良好。

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