1

JavaScriptを使用してKmlLayersのオン/オフを切り替えるためのさまざまなソリューションを見つけました。私が見たすべてのスクリプトは、レイヤーごとに個別の関数を必要としますが、すべてのレイヤーに1つの関数だけを持たせたいので、Webページに新しいレイヤーを追加するときに、既存の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」だけが必要な場合もよいでしょう。

4

1 に答える 1

2

KmlLayer作成したそれぞれが孤立しているように見えます。それらはvarという名前のローカル関数に割り当てられ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 に答える