具有两个或更多KML图层的Google Maps API V3中的交互式图例

Question

我对JavaScript和Google Maps API（基本上是Web GIS的整个世界）都很陌生，我正在努力为几个KML图层创建交互式图例（在这个例子中，只有两个）或类似这样的http://www.strahlen.org/map/central.htm但是对于KML层。

这是我的代码：

<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文件之间切换？

欢迎任何帮助和建议。提前谢谢你，Neven。

Answer 1

所以你并没有真正要求关于地图内容的传说，只是一个切换选项。我从另一个问题（Toggle KML Layers in Google Maps v3）得到了这个答案，但我清理了它，因为它最初不适合我。它现在运作良好。这是我的一个：

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