Google Maps API V3中带有两个或更多KML图层的互动图例

本文介绍了Google Maps API V3中带有两个或更多KML图层的互动图例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我对JavaScript和Google Maps API相当陌生（基本上是Web GIS的整个世界），我正在为几个KML层创建交互式图例（在这个例子中只有两个），或者像这样的 http://www.strahlen.org/map/central.htm 但是对于KML图层。I'm fairly new to JavaScript and Google Maps API(basically, the whole world of web GIS) and I'm struggling with creating interactive legend for several KML layers (in this example, only two) or something like this http://www.strahlen.org/map/central.htmbut for KML layers.以下是我的代码： Here is my code: <script>var tocka =new google.maps.LatLng(46.150346, 15.863571);function initialize (){var neven = {center: tocka,zoom: 15,mapTypeId:google.maps.MapTypeId.HYBRID};var map = new google.maps.Map(document.getElementById("googleMap"), neven); var ctaLayer = new google.maps.KmlLayer({ url: 'https://dl.dropboxusercontent.com/u/126827789/kuce.kmz' }); ctaLayer.setMap(map); var ctaLayer = new google.maps.KmlLayer({ url: 'https://dl.dropboxusercontent.com/u/126827789/neven.kmz' }); ctaLayer.setMap(map);}google.maps.event.addDomListener(window,'load',initialize);</script>所以..如果可能的话，我想添加一些复选框在这两个kml文件之间切换？ So.. I want to add some checkboxes to toggle between this two kml files if it is possible?欢迎任何帮助和建议。 先谢谢您， Neven。Any help and advice is more then welcome.Thank you in advance,Neven.推荐答案地图的内容，只是一个切换选项。我从另一个问题得到了这个答案（在Google Maps v3中切换KML图层）但我把它清理干净，因为它最初并不适合我。它现在运作良好。这里有一个我有： So you are not really asking for a legend concerning the content of the maps, just a toggle option. I got this answer from another question (Toggle KML Layers in Google Maps v3) but I cleaned it up because it did not initially work for me. It works well now. Here is one I have:// Define the kml layers var kml = { a: { name: "Elevation Contours", url:'https://website.com/id/LimaContours200.kml'}, b: { name: "Districts", url: 'https://https://website.com/id/LimaDistricts.kml'},c:{ name: "CAPECO Zones", url: 'https://website.com/id/ZonasCapeco.kml'}}function initialize(){ var mapOptions ={ zoom: 12, center: new google.maps.LatLng(-12.0456072,-76.9991801), mapTypeId: google.maps.MapTypeId.SATELLITE,}; //Display the map map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); createTogglers(); removeAll(); startup();};// the important function... kml[id].xxxxx refers back to the top function toggleKML(checked, id) { if (checked) { var layer = new google.maps.KmlLayer(kml[id].url,{ preserveViewport: true, suppressInfoWindows: true}); //store kml as obj kml[id].obj = layer; kml[id].obj.setMap(map);} else { kml[id].obj.setMap(null); delete kml[id].obj;}};// create the controls dynamically because it's easier, reallyfunction createTogglers() { var html = "<form><ul>"; for (var prop in kml) { html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" + " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" + kml[prop].name + "<\/li>";}html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + "Remove all layers<\/a><\/li>" + "<\/ul><\/form>"; document.getElementById("toggle_box").innerHTML = html;};// easy way to remove all objectsfunction removeAll() { for (var prop in kml) { if (kml[prop].obj) { kml[prop].obj.setMap(null); delete kml[prop].obj;}}};// Append Class on Selectfunction highlight(box, listitem) { var selected = 'selected'; var normal = 'normal'; document.getElementById(listitem).className = (box.checked ? selected: normal);};function startup(){// for example, this toggles kml b on load and updates the menu selectorvar checkit = document.getElementById('b'); checkit.checked = true;toggleKML(checkit, 'b');highlight(checkit, 'selector-b');} 这篇关于Google Maps API V3中带有两个或更多KML图层的互动图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！