2012-06-19 3 views
2

나는 전단지의 표준 레이어 컨트롤을 사용하여 해제 할 수있는 여러 정적 레이어가있는 리플렛 맵에서 작업 해 왔습니다.리플렛에 사용자 지정 레이어 컨트롤 만들기

최근에는 onclick 메서드를 사용하여 사용자가 (현재 정적 인) 범례의 이미지 중 하나를 클릭 할 때지도에서 레이어를 추가하거나 제거하는 기능을 실행하려고했습니다. 이 작업을 얻으려면 여러 가지 방법을 시도했다 그리고 자바 스크립트 및 웹 페이지 요소로드 순서를 함께 할 수있다 생각하고 있어요 (하지만 난 이렇게 잘못 될 수있는이 꽤 새로운 해요).

어쨌든, 내 코드의 너무 많이에서 붙여 넣기없이 - 나는 등 문서의 머리에 모든 스크립트를로드 해요 :

<html> 
<head> 
<title>St. Louis River Estuary Deep Map</title> 
<link rel="stylesheet" href="css/leaflet.css" /> 

<!--[if lte IE 8]> 
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /> 
<![endif]--> 
<script type="text/javascript" src="js/leafletcopy.js"></script> 
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script> 
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script> 
<script type= "text/javascript" src="js/googlemaps.js"></script> 


<script type="text/javascript"src='js/wax.leaf.min.js'></script> 

<script type='text/javascript' src='js/htmlswitch.js'></script> 
<link rel='stylesheet' href='css/webmapstylesheet1.css'/> 
<!--[if lte IE 8]> 
<link rel="stylesheet" href="leaflet.ie.css" /> 
<![endif]--> 

<script type="text/javascript" src="js/hearding.js"></script> 
<script type="text/javascript" src="js/boundaries.js"></script> 
<script type="text/javascript" src="js/bath1.js"></script> 
<script type="text/javascript" src="js/bath2.js"></script> 
<script type="text/javascript" src="js/bath3.js"></script> 
<script type="text/javascript" src="js/monitoring.js"></script> 

function removeRecreation() { 
       map.removeLayer(recreationLayer); 
      }; 


window.onload = function() { 

    //create global map variable 

    var map; 
    var recreationLayer; 

나는 '생각 내가 첨부 된 이미지에서 클릭 할 때 함수를 호출 할 때 removeRecreation 함수가 효과적으로 작동하도록 전역 변수를 정의 할 변수를 모르겠습니다. 다음 코드와 같이 사전에

https://mywebspace.wisc.edu/axler/SLRE_Deep_Map/index2.html

</script> 
</head> 

<body> 
    <div id ="divHeader"> 
     <h1>St. Louis River Deep Map</h1> 
     <div class="navHome"><a href="http://stlre.pebbleonline.com/">return home</a></div> 
    </div> 


    <div id="legend"> 
     <h2>Legend:</h2> 
     <hr> 

     <p class ="legend"><img onclick = "removeRecreation();" src ="images/recreation1.png">Exploring</p>` 

감사 :

라이브 버전에서 확인하실 수 있습니다!

답변

4

"var map"을 수행 할 때 실제로는 window.onload에 전달하는 함수에 상대적인 지역 변수를 선언하므로 removeRecreation 함수는이를 인식하지 못합니다. 이 문제를 해결하려면 "var map"을 맨 위로 이동하십시오 (removeRecreation 정의 전).