帶有KML圖層控件的Google Maps JS API

我發現使用JavaScript切換KmlLayers開啓/關閉的不同解決方案。我見過的所有腳本都需要爲每個圖層分別使用不同的函數，但是我希望對所有圖層只有一個函數，因此在向我的網頁添加新圖層時，我不必編輯現有的JavaScript代碼。帶有KML圖層控件的Google Maps 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 }); 
    } 
    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-13 14:51:56

感謝您的答覆。現在它效果更好，可以打開和關閉單個圖層，但使用多個圖層進行操作仍然很棘手。您可以在此處測試此頁面：http：//www.eiranet.lv/kartes/Anjo/kmz/karte.html –

在檢查完您的頁面後，進行了一些更改。見上面的代碼。 –

完美:)我還發現有關geoxml3 http://code.google.com/p/geoxml3/與此腳本，您可以直接使用覆蓋從PC，而不是發送到谷歌，所以它可以提供更好的性能。 –

帶有KML圖層控件的Google Maps JS API

回答

相關問題