具有KML图层控件的Google Maps JS API [英] Google Maps JS API with KML layer control
问题描述
我发现使用JavaScript切换KmlLayers的不同解决方案。我看到的所有脚本都需要为每一层单独的功能，但是我想为所有图层只有一个功能，所以当我添加一个新的图层到我的网页时，我不必编辑现有的JavaScript代码。
I have found different solutions for switching KmlLayers on/off using JavaScript. All scripts that I've seen require separate functions for each layer, but I want to have only one function for all layers so when adding a new layer to my web page I don't have to edit the existing JavaScript code.
我的代码：
<!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'。
Here is my problem: actually I can switch multiple layers on but I can't turn them off. I think that all of the code is good except function toggle(). Also, it would be good if 'rel' attributes wouldn't be necessary, only 'id'.
推荐答案
看起来像您创建的每个 KmlLayer 将被孤立;它们被分配到一个函数本地 var 命名为 tr ，但是从未分配给将在多个调用中保持可用的任何内容到 toggle（）。我建议对 toggle（）函数进行一些更改：
It looks like each KmlLayer that you create gets orphaned; they are assigned to a function local var named tr, but then never assigned to anything that will remain available across multiple calls to toggle(). I suggest some changes to the toggle() function:
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)
};
};
在更详细地查看您的页面后，我建议其他更改：
After reviewing your page in some more detail, I suggest additional changes:
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;
};
};
这篇关于具有KML图层控件的Google Maps JS API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
