[英]How to toggle between KML/KMZ layers in Google Maps api v3
I'm developing a web page with a Google maps application. 我正在使用Google Maps应用程序开发网页。 Currently, I have a functional search bar and map that displays three KML/KMZ layers. 目前,我有一个功能良好的搜索栏和地图,其中显示了三个KML / KMZ图层。 I need to be able to toggle between each of the layers, either display one of them, two of them or all three. 我需要能够在每个图层之间切换,或者显示其中一个,其中两个或全部三个。 There is a similar function in Google Earth, but I need it in Google Maps. Google Earth中有一个类似的功能,但我需要在Google Maps中使用。 How can I do this? 我怎样才能做到这一点?
Here is my code for the map and search bar: 这是我的地图和搜索栏代码:
<script type="text/javascript">
var geocoder;
var map;
var marker;
function initialize() {
geocoder = new google.maps.Geocoder ();
var latlng = new google.maps.LatLng (40.43, -74.00);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marker = new google.maps.Marker({map:map});
var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/NY_Radar_data.kmz');
ctaLayer.setMap(map);
var ctaLayer = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml');
ctaLayer.setMap(map);
var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/OKX_Radar_data%20(1).kmz');
ctaLayer.setMap(map);
}
function codeAddress () {
var address = document.getElementById ("address").value;
geocoder.geocode ( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results [0].geometry.location);
marker.setPosition(results [0].geometry.location);
map.setZoom(14);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
It's simply setMap(null)
to hide one, setMap(map)
to show. 它只是setMap(null)
来隐藏一个, setMap(map)
来显示。 I keep a global array variable layers
, to keep track of which layer to toggle: 我保留了一个全局数组变量layers
,以跟踪要切换的层:
var layers = [];
layers[0] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/NY_Radar_data.kmz',
{preserveViewport: true});
layers[1] = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml',
{preserveViewport: true});
layers[2] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/OKX_Radar_data%20(1).kmz',
{preserveViewport: true});
The preserveViewport option stops the map from jumping around when the layers are toggled. 当切换图层时,preserveViewport选项可阻止地图跳来跳去。
Here's the function to toggle: 这是切换功能:
function toggleLayer(i) {
if(layers[i].getMap() === null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
}
Note it's using the global variable. 请注意,它使用的是全局变量。 Finally the HTML, you can use checkboxes or buttons, and even a radio button by setting only one active layer at first and enabling the right one when the radio set is updated. 最后,HTML,您可以使用复选框或按钮,甚至单选按钮,方法是:首先仅设置一个活动层,并在更新单选集时启用正确的图层。
Large weather <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked>
<input type="button" id="layer1" onclick="toggleLayer(1)" value="Racks">
Small weather <input type="checkbox" id="layer2" onclick="toggleLayer(2)" checked>
The whole demo is here, controls on top left of map: http://jsbin.com/irahef/edit#preview 整个演示在这里,控件在地图的左上方: http : //jsbin.com/irahef/edit#preview
Heiter's answer is good but a little addition to the code in the jsbin example, if you want to have the layers be undisplayed on initialization is to change Heiter的回答很好,但是如果要在初始化时不显示图层,则可以对jsbin示例中的代码进行一些补充,以进行更改
layers[i].setMap(map);
to 至
layers[i].setMap(null);
and then make sure your checkboxes are unchecked. 然后确保未选中您的复选框。
I tried the code posted above by Heitor, and noticed that clicking the layers on and off changes the order that they are displayed on the map. 我尝试了Heitor在上面发布的代码,并注意到单击图层的开和关会更改它们在地图上显示的顺序。 I implemented this solution to preserve the order of the layers, but it might be somewhat inefficient. 我实现了此解决方案以保留层的顺序,但效率可能有些低下。 If anyone has any suggestions please share. 如果有人有任何建议,请分享。
function toggleLayer(i) { var j; for (j = 0; j < layers.length ; j++ ) { if (j != i) { if (layers[j].getMap() === null) { layers[j].setMap(null); } else { layers[j].setMap(map); } } else { //toggle the selected layer if (layers[j].getMap() === null) { layers[j].setMap(map); } else { layers[j].setMap(null); } } } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.