Google지도 레이어 켜고 끄기

Question

맞춤 Google지도 (http://www.southdevonaonb.org.uk/cordialemapping/)를 만들고 있는데 레이어를 켜고 끄는 데 문제가 있습니다.

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

을 다음과 같은 자바 스크립트 :

는

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

당신은 아직 모두 추가하지 않은 스크립트에서 볼 수 있습니다 - 예를 들어,

나는 HTML에서 간단한 체크 박스를 사용하고 있습니다 위에 링크 된 페이지의 목록에있는 레이어와 jQuery Accordian Plugin을 사용하여 탭의 메뉴 스타일을 지정했습니다.

내가 지금까지 추가 한 레이어는 괜찮아 지겠지만, 내가 얻는 문제는 페이지가로드 될 때 가끔 레이어가 표시되고 숨겨진 다른 시간이므로 확인란에 체크 표시가 필요합니다. 몇 번이나 나타납니다.

이 문제를 해결하기위한 해결책을 찾으려고합니다.지도 페이지가 확인란을 선택하지 않고 숨겨진 채로로드합니다. 그런 다음 체크 박스가 체크 된 상태에서 체크 박스가 해제되면 레이어가 켜졌다가 다시 꺼지게됩니까?

Answer 1

myOptions 변수를 설정 한 후 세미콜론이 누락되었습니다.

귀하의 코드에서 발견 된 더 많은 문제로이를 업데이트하고 있습니다.

맵을 레이어로 설정하는 for 루프가 잘못되었습니다. 레이어 배열의 길이는 301이지만 수동으로 인덱스 300에 항목을 설정했기 때문입니다. 값이 포함 된 배열 인덱스 사이에 간격이 있으면 레이어 배열을 맹목적으로 반복 할 수 없습니다. 당신이 정말로 루프를 수행하려는 경우, 당신은 내가 이것에 대한 문서를 찾을 수 있지만 그렇게

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

Answer 2

처럼 인덱스를 확인 안전에 필요, 내 경험, Google지도 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 
    } 
}