1

我找到了使用 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>

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

4

1 回答 1

2

看起来KmlLayer你创建的每一个都是孤立的；它们被分配给一个var名为local 的函数tr，但从未分配给任何在多次调用中仍然可用的东西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;
    };
};
于 2012-05-13T14:51:56.717 回答