GoogleマップKMLレイヤーコントロールを使用したJS API

JavaScriptを使用してKmlLayersをオン/オフに切り替えるさまざまなソリューションが見つかりました。私が見たすべてのスクリプトでは、各レイヤーごとに別々の機能が必要ですが、すべてのレイヤーに対して1つの機能しか持たないため、新しいレイヤーをWebページに追加するときに既存のJavaScriptコードを編集する必要はありません。GoogleマップKMLレイヤーコントロールを使用したJS API

マイコード：

<!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'だけであれば良いでしょう。

出典

2012-05-12 пацан

作成した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 }); 
     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-13 14:51:56

ありがとう：

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) }; };

もう少し詳細にあなたのページを確認した後、私は追加の変更を示唆しています。今はそれがうまくいく、それは単一のレイヤーをオンとオフにすることは可能ですが、複数のレイヤーを操作するのは難しいです。このページはここでテストできます：http：//www.eiranet.lv/kartes/Anjo/kmz/karte.html –

ページを確認した後、いくつかの変更を加えました。上記のコードを参照してください。 –

パーフェクト:)また、このスクリプトでgeoxml3 http://code.google.com/p/geoxml3/を見つけたので、パソコンから直接オーバーレイを使用してGoogleに送信しないようにして、パフォーマンスが向上します。 –

GoogleマップKMLレイヤーコントロールを使用したJS API

答えて

関連する問題