Google Maps API V3中带有两个或更多KML图层的互动图例 [英] Interactive legend in Google Maps API V3 with two or more KML layers

问题描述

我对JavaScript和Google Maps API相当陌生（基本上是Web GIS的整个世界），我正在为几个KML层创建交互式图例（在这个例子中只有两个），或者像这样的< a href =http://www.strahlen.org/map/central.htm =nofollow> 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.htm but 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, really
function 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 objects
function removeAll() {
    for (var prop in kml) {
        if (kml[prop].obj) {
            kml[prop].obj.setMap(null);
            delete kml[prop].obj;}}};

// Append Class on Select
function 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 selector
var checkit = document.getElementById('b');
    checkit.checked = true;
toggleKML(checkit, 'b');
highlight(checkit, 'selector-b');}

这篇关于Google Maps API V3中带有两个或更多KML图层的互动图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！