带有 KML 图层控制的 Google Maps JS API答案

【问题标题】：Google Maps JS API with KML layer control带有 KML 图层控制的 Google Maps JS API
【发布时间】：2012-05-20 18:01:36
【问题描述】：

我找到了使用 JavaScript 打开/关闭 KmlLayers 的不同解决方案。我见过的所有脚本都需要为每一层使用单独的函数，但我希望所有层都只有一个函数，因此在向我的网页添加新层时，我不必编辑现有的 JavaScript 代码。

我的代码：

<!DOCTYPE html>
<html><head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
    * {margin:0; padding:0; border:0; outline:0; font-size:100%; 
        vertical-align:baseline}
    html, body {width:100%; height:100%}
    #map {width:100%; height:95%}
</style>
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false&language=lv">
</script>

<script type="text/javascript">
    var G = google.maps; var kml = null; var show = false;

    function toggle() {
        var tr = this.rel;
        if (!tr) {
            tr = new G.KmlLayer('http://www.eiranet.lv/kartes/Anjo/kmz/' +
                this.id + '.kmz', {preserveViewport:true})
        };
        show = !show;
        if (show) {
            tr.setMap(map)
        }
        else {
            tr.setMap(null)
        };
    };

    function initialize() {
        var layers = document.getElementsByTagName('input');
        var options = {
            center: new G.LatLng(34.9, 137.3),
            zoom: 10,
            mapTypeId: G.MapTypeId.TERRAIN,
            scaleControl: true,
            overviewMapControl: true,
            mapTypeControlOptions: {
                style:G.MapTypeControlStyle.DROPDOWN_MENU }
        };

        map = new G.Map(document.getElementById('map'), options);

        for (var i=0; i<layers.length; i++) {
            layers[i].type = 'checkbox';
            G.event.addDomListener(layers[i], 'click', toggle)
        };
    };

    G.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
<input id="Didzis_21.03-03.04" rel="d1"/>
<input id="Didzis_04.04-17.04" rel="d2"/>
<input id="Didzis_18.04-01.05" rel="d3"/>
<input id="Didzis_02.05-15.05" rel="d4"/>
</body></html>

这是我的问题：实际上我可以打开多个图层，但无法关闭它们。我认为所有代码都很好，除了函数toggle()。此外，如果不需要 'rel' 属性，只需要 'id' 就好了。

【问题讨论】：

标签： google-maps dynamic google-maps-api-3 kml layer

【解决方案1】：

看起来您创建的每个KmlLayer 都被孤立了；它们被分配给名为tr 的本地函数var，但从未分配给在多次调用toggle() 时仍然可用的任何东西。我建议对toggle() 函数进行一些更改：

function toggle() {
    if (!this.kmlLayer ) {
        this.kmlLayer = new G.KmlLayer(
            'http://www.eiranet.lv/kartes/Anjo/kmz/' + this.id + '.kmz',
            { preserveViewport:true } );
    }
    show = !show;
    if (show) {
        this.kmlLayer.setMap(map)
    }
    else {
        this.kmlLayer.setMap(null)
    };
};

在更详细地查看了您的页面后，我建议进行其他更改：

function toggle() {
    if (!this.kmlLayer ) {
        this.kmlLayer = new G.KmlLayer(
            'http://www.eiranet.lv/kartes/Anjo/kmz/' + this.id + '.kmz',
            { preserveViewport:true } );
        this.displayIsOn = false;
    }
    //show = !show;  --  Remove this line, it is causing display state problems
    if ( this.displayIsOn ) {
        this.kmlLayer.setMap( null );
        this.displayIsOn = false;
    }
    else {
        this.kmlLayer.setMap( map );
        this.displayIsOn = true;
    };
};

【讨论】：

感谢您的回复。现在效果更好了，可以打开和关闭单层，但使用多层操作仍然很棘手。你可以在这里测试这个页面：eiranet.lv/kartes/Anjo/kmz/karte.html
在查看您的页面后进行了一些更改。见上面的代码。
完美 :) 我还发现了关于 geoxml3 code.google.com/p/geoxml3 的脚本，您可以直接从 PC 使用叠加层，而不是将它们发送给 Google，因此它可以提供更好的性能。