带有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

回答

相关问题