Google Maps API V3 回调（KML 加载）答案

【问题标题】：Google Maps API V3 callbacks (KML loading)Google Maps API V3 回调（KML 加载）
【发布时间】：2011-07-25 13:34:57
【问题描述】：

我正在使用 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 时什么也没收到

【问题讨论】：

标签： jquery ajax google-maps google-maps-api-3

【解决方案1】：

尝试在 kmlLayer 而不是地图上注册一个监听器。我通过监听 metadata_changed 事件进行了一些简单的测试，它似乎工作正常。

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

【讨论】：

【解决方案2】：

我想您可以为 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>

【讨论】：

【解决方案3】：

如果我查看当前参考（截至 2012 年 11 月 18 日），您可以简单地收听 status_changed 事件。我什至找不到 metadata_changed 事件了。

【讨论】：

metadata_changed 仍然存在并且仍然没有记录！当您想查看 KML 元数据时需要它，因为我发现它没有填充到 status_changed 事件中
截至 2015 年 7 月 8 日，“metadata_changed”仍然存在并且仍然没有记录。而且它仍然没有在“status_changed”事件中填充！