Google지도 KML 레이어 컨트롤이있는 JS API

JavaScript를 사용하여 KmlLayers를 사용/사용 중지하는 여러 가지 솔루션을 찾았습니다. 필자가 본 모든 스크립트는 각 레이어에 대해 별도의 기능이 필요하지만 모든 레이어에 대해 하나의 기능 만 갖고 싶어하므로 웹 페이지에 새 레이어를 추가 할 때 기존 JavaScript 코드를 편집 할 필요가 없습니다.Google지도 KML 레이어 컨트롤이있는 JS API

내 코드 :

<!DOCTYPE html> 
<html><head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<style type="text/css"> 
    * {margin:0; padding:0; border:0; outline:0; font-size:100%; 
     vertical-align:baseline} 
    html, body {width:100%; height:100%} 
    #map {width:100%; height:95%} 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false&language=lv"> 
</script> 

<script type="text/javascript"> 
    var G = google.maps; var kml = null; var show = false; 

    function toggle() { 
     var tr = this.rel; 
     if (!tr) { 
      tr = new G.KmlLayer('http://www.eiranet.lv/kartes/Anjo/kmz/' + 
       this.id + '.kmz', {preserveViewport:true}) 
     }; 
     show = !show; 
     if (show) { 
      tr.setMap(map) 
     } 
     else { 
      tr.setMap(null) 
     }; 
    }; 

    function initialize() { 
     var layers = document.getElementsByTagName('input'); 
     var options = { 
      center: new G.LatLng(34.9, 137.3), 
      zoom: 10, 
      mapTypeId: G.MapTypeId.TERRAIN, 
      scaleControl: true, 
      overviewMapControl: true, 
      mapTypeControlOptions: { 
       style:G.MapTypeControlStyle.DROPDOWN_MENU } 
     }; 

     map = new G.Map(document.getElementById('map'), options); 

     for (var i=0; i<layers.length; i++) { 
      layers[i].type = 'checkbox'; 
      G.event.addDomListener(layers[i], 'click', toggle) 
     }; 
    }; 

    G.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
<div id="map"></div> 
<input id="Didzis_21.03-03.04" rel="d1"/> 
<input id="Didzis_04.04-17.04" rel="d2"/> 
<input id="Didzis_18.04-01.05" rel="d3"/> 
<input id="Didzis_02.05-15.05" rel="d4"/> 
</body></html>

여기 내 문제가 : 실제로 나는 여러 레이어를 전환 할 수 있지만 내가 그들을 해제 할 수 없습니다. 나는 모든 코드가 function toggle()을 제외하면 좋다라고 생각한다. 또한 'rel'속성이 필요하지 않고 'id'만 있으면 좋을 것입니다.

출처

2012-05-12 пацан

작성한 KmlLayer은 고아가됩니다. 그들은 tr 로컬 로컬 함수 var에 할당되지만, toggle()에 대한 여러 호출에서 계속 사용할 수있는 것은 할당되지 않습니다. 나는 toggle() 기능을 일부 변경 제안 : 답장을

function toggle() { 
    if (!this.kmlLayer) { 
     this.kmlLayer = new G.KmlLayer(
      'http://www.eiranet.lv/kartes/Anjo/kmz/' + this.id + '.kmz', 
      { preserveViewport:true }); 
     this.displayIsOn = false; 
    } 
    //show = !show; -- Remove this line, it is causing display state problems 
    if (this.displayIsOn) { 
     this.kmlLayer.setMap(null); 
     this.displayIsOn = false; 
    } 
    else { 
     this.kmlLayer.setMap(map); 
     this.displayIsOn = true; 
    }; 
};

출처

2012-05-13 14:51:56

감사 :

function toggle() { if (!this.kmlLayer) { this.kmlLayer = new G.KmlLayer( 'http://www.eiranet.lv/kartes/Anjo/kmz/' + this.id + '.kmz', { preserveViewport:true }); } show = !show; if (show) { this.kmlLayer.setMap(map) } else { this.kmlLayer.setMap(null) }; };

좀 더 자세히 페이지를 검토 한 결과, 추가 변경을 제안한다. 이제는 더 잘 작동하지만 단일 레이어를 켜고 끌 수는 있지만 여러 레이어로 조작하는 것은 까다로울 수 있습니다. 이 페이지는 여기에서 테스트 할 수 있습니다. http : //www.eiranet.lv/kartes/Anjo/kmz/karte.html –

페이지를 검토 한 후 몇 가지 사항을 변경했습니다. 위의 코드를 참조하십시오. –

완벽 :) 또한이 스크립트를 사용하여 geoxml3 http://code.google.com/p/geoxml3/에 대해 알았습니다. PC에서 직접 오버레이를 사용하여 Google에 전송하지 않아도 성능이 향상됩니다. –

Google지도 KML 레이어 컨트롤이있는 JS API

답변

관련 문제