打開和關閉Google地圖圖層

Question

我正在構建自定義的Google地圖（http://www.southdevonaonb.org.uk/cordialemapping/），並遇到切換圖層打開和關閉的問題。

我使用的HTML一個簡單的複選框 - 例如：

Parish boundary line <input type="checkbox" id="layer100" onclick="toggleLayer(100)" checked><br /> 
Letterbox locations and results <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked><br /> 
Landscape challenges <input type="checkbox" id="layer1" onclick="toggleLayer(1)" checked><br /> 

和下面的JavaScript：

var geocoder; 
var map; 
var marker; 
var layers = []; 

function initialize() { 
geocoder = new google.maps.Geocoder(); 
var latlng = new google.maps.LatLng (50.31697, -3.670807); 
var myOptions = { 
    zoom: 10, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map-container"), 
    myOptions); 
    marker = new google.maps.Marker({map:map}); 

    layers[100] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/100.kml', {preserveViewport: true}); 
    layers[200] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/200.kml', {preserveViewport: true}); 
    layers[300] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/boundaryline.kml', {preserveViewport: true}); 




    layers[0] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta0.kml', {preserveViewport: true}); 
    layers[1] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta1.kml', {preserveViewport: true}); 
    layers[2] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta2.kml', {preserveViewport: true}); 
    layers[10] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta10.kml', {preserveViewport: true}); 
    layers[11] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta11.kml', {preserveViewport: true}); 
    layers[46] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/holbeton.kml', {preserveViewport: true}); 
    for (var i = 1; i < layers.length; i++) { 
    layers[i].setMap(map); 
    } 
    } 
function codeAddress() { 
    var address = document.getElementById ("address").value; 
    geocoder.geocode ({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results [1].geometry.location); 
     marker.setPosition(results [1].geometry.location); 
     map.setZoom(14); 
     } 
    else { 
     alert("Geocode was not successful for the following reason: " + status); 
      } 
}); 
} 

function toggleLayer(i) { 
    if(layers[i].getMap() === null) { 
    layers[i].setMap(map); 
    } 
    else { 
    layers[i].setMap(null); 
    } 
} 
    google.maps.event.addDomListener(window, 'load', initialize); 

你會從我還沒有被添加到所有的腳本見上面鏈接的頁面列表中的圖層，以及我使用jQuery Accordian Plugin爲選項卡設置了菜單。

我到目前爲止添加的圖層可以打開和關閉，但是我遇到的問題是，當頁面加載時，有時會顯示圖層，而其他時間會隱藏圖層，並且需要勾選複選框它會出現幾次。

我想找到一個解決方案來解決這個問題，這樣地圖頁面將首先加載未勾選的複選框並隱藏圖層。然後當勾選複選框時，圖層將會打開，然後再次關閉複選框未勾選？

Answer 1

您在設置myOptions變量後缺少一個分號。

我更新了這個代碼，發現了更多問題。

將for map設置爲圖層的for循環不正確。圖層數組的長度爲301，但這是因爲您在索引300處手動設置了一個項目。當包含值的數組索引之間存在間隙時，不能盲目地遍歷圖層數組。如果你真的想爲循環做了，那麼你需要安全檢查的指標，像這樣

for (var i = 1; i < layers.length; i++) { 
    if (typeof layers[i] != 'undefined') { 
     layers[i].setMap(map); 
    } 
} 

Answer 2

雖然我還沒有找到這個文件，在我的經驗，谷歌地圖API將不會顯示更多一次在地圖上超過5個KML圖層（這與FusionTablesLayers的限制類似，其記錄爲here）。

如果你不想讓你的圖層顯示出來，那麼請不要在你的initialize函數中調用setMap。然後，只有已經'檢查'的圖層（並且已添加到toggleLayer函數中的地圖）將顯示在地圖上。

您應該添加一個註釋，即向地圖添加5個以上的圖層將不起作用，或者您可以添加代碼以跟蹤最後5個添加圖層，並且在添加第6個圖層後將刪除第一個圖層（最近最少添加）層。

var addedlayers = []; 
function toggleLayer(i) { 
    if (layer.getMap() === null) { 
     addedlayers.push(i); 
     if(addedlayers.length > 5) { 
      var ejected = addedlayers.shift(); 
      layers[ejected].setMap(null); 
      document.getElementById("layer" + ejected).checked = false; 
     } 
     layers[i].setMap(map); 
    } else { 
     layers[i].setMap(null); 
     addedlayers.splice(addedlayers.indexOf(i)) //remove from addedlayers 
    } 
}