在Google Maps v3中切換KML圖層

是否有簡單的方法來設置複選框以切換（打開/關閉）Google Maps v3的KML圖層？我碰到these articles，但他們都沒有爲我工作。在Google Maps v3中切換KML圖層

2012-03-24 mapr

對不起我的文章沒有爲你工作，這是有點過時了。

這是一個典型的Gmaps切換的完整示例，假設您使用的是kml文件。

<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>

這是純粹的js所以當然使用jQuery你可以做的事情更容易一點。希望這可以幫助！

來源

2012-08-03 20:41:15 efwjames

完美工作，但點擊圖層不會彈出屬性表..爲什麼？ – Zain 2015-01-12 06:24:50

你的意思是infowindow？將suppressInfoWindows：true設置爲false - 我鼓勵人們閱讀Google文檔，它實際上包含您需要知道的所有內容！ https://developers.google.com/maps/documentation/javascript/3.exp/reference – efwjames 2015-08-11 21:21:37

用於切換KML層，你可以試試這個功能：

Store中的數組爲進一步動作（例如撥動）層。

然後你就可以在陣列上通過它的指數切換層：

toggleLayer(layersArray[index], map);

或者應用切換到所有圖層：

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

來源

2012-03-24 20:09:13 Engineer

如果我有兩層呢？這仍然有效嗎？或者我需要創建兩個獨立的功能？對不起，我是JavaScript的初學者。 – mapr 2012-03-24 20:18:42

@kolor檢查我的更新 – Engineer 2012-03-24 20:28:37

在Google Maps v3中切換KML圖層

回答

相關問題