2012-03-24 9 views

Antwort

7

Leider meinen Artikel nicht für Sie arbeiten, ist es ein bisschen veraltet.

Hier ist ein vollständiges Beispiel eines typischen Gmaps-Schalters, vorausgesetzt, Sie verwenden kml-Dateien.

<html> 
<head> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 

var map; 

// lets define some vars to make things easier later 
var kml = { 
    a: { 
     name: "MPLS/STPL", 
     url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c" 
    }, 
    b: { 
     name: "Bicycling Tour Routes", 
     url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9" 
    } 
// keep adding more if ye like 
}; 

// initialize our goo 
function initializeMap() { 
    var options = { 
     center: new google.maps.LatLng(44.9812, -93.2687), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), options); 

    createTogglers(); 
}; 

google.maps.event.addDomListener(window, 'load', initializeMap); 

// 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, 'selector1'); 
} 

</script> 

<style type="text/css"> 
.selected { font-weight: bold; } 
</style> 

</head> 
<body onload="startup()"> 
<div id="map_canvas" style="width: 100%; height: 600px;"></div> 
<div id="toggle_box" style="position: absolute; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 5; "></div> 
</body> 
</html> 

Dies ist pure js so natürlich mit jQuery können Sie die Dinge ein wenig einfacher tun. Hoffe das hilft!

+0

hat perfekt funktioniert, aber das Klicken auf Ebene nicht Pop-up-Attribut-Tabelle .. warum ?? – Zain

+0

Sie meinen das Infowindow? setze suppressInfoWindows: true to false - Ich ermutige Leute, die Google-Dokumentation zu lesen, sie enthält wirklich alles, was du jemals wissen musst! https://developers.google.com/maps/documentation/javascript/3.exp/reference – efwjames

3

Für kml Schicht Makel können Sie diese Funktion versuchen:

/** Toggles layer 
* @param {google.maps.KmlLayer} layer 
* @param {google.maps.Map} map 
**/ 
function toggleLayer(layer, map){ 
    layer.setMap(layer.getMap() ? null : map); 
} 

Speichern Sie Ihre Schichten in Array für weite Aktionen (zum Beispiel Makel).

Dann können Sie Schicht umschalten, indem es den Index auf diesem Array:

toggleLayer(layersArray[index], map); 

oder auf alle Schichten Makeln anzuwenden:

for(var index = 0; index < layersArray.length; ++index){ 
    toggleLayer(layersArray[index], map); 
} 
+0

Was ist, wenn ich zwei Schichten habe? Würde das noch funktionieren? Oder muss ich zwei separate Funktionen erstellen? Entschuldigung, ich bin ein Anfänger bei JavaScript. – mapr

+0

@Kolor Überprüfen Sie mein Update – Engineer