Google지도 polygon 표시/숨기기 확인란을 사용하여 표시/숨기기

체크 박스 입력을 사용하여 간단한 다각형 온/오프 토글을하려하지만 다음 코드가 작동하지 않습니다. 나는 Google에서 수색을하고 몇 가지 해결책을 찾았지만 어느 누구도 저에게 일하지 않았습니다.Google지도 polygon 표시/숨기기 확인란을 사용하여 표시/숨기기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
    <style>html, body, #map-canvas{height: 100%; margin: 0px; padding: 0px; height: 590px;} </style> 
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
       function toggleLayer(firLayer,id) 
       { 
        if ($('#'+id).is(':checked')) { 
          firLayer.setMap(map); 
        } 
        else 
        { 
         firLayer.setMap(null); 
        } 
       } 

       function initialize() { 
        var mapOptions = { 
        zoom: 4, 
        center: new google.maps.LatLng(-14.886436490787712, -47.2685546875), 
        mapTypeId: google.maps.MapTypeId.TERRAIN 
        }; 

        var map = new google.maps.Map(document.getElementById('map-canvas'), 
         mapOptions); 

        var firCTB = [ 
        new google.maps.LatLng(1.03333333, -40.98333333), 
        new google.maps.LatLng(-2.00000000, -34.95000000), 
        new google.maps.LatLng(-0.10000000, -42.00000000), 
        new google.maps.LatLng(1.03333333, -40.98333333) 
        ]; 

       // Fir Ctb 
       drawCtb = new google.maps.Polygon({ 
        path: firCTB, 
        strokeColor: '#FFAA00', 
        strokeOpacity: 0.8, 
        strokeWeight: 3, 
        fillOpacity: 0.1 
        }); 

     } 
       google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
       </head> 
       <body> 
        <div id="map-canvas"></div> 
        <input id="fir_curitiba" type="checkbox" onClick="toggleLayer(drawCtb,'fir_curitiba')" /> Mostrar FIR Curitiba 
       </body> 
       </html>

감사합니다. 감사합니다.

출처

2014-03-12 user1460038

두 가지 문제점이 있습니다. 먼저 jQuery를 포함하지 않은 것처럼 보입니다. 따라서 $이 정의되지 않았습니다. 또한 toggleLayer(firLayer,id) 안에는 범위에없는 map을 사용하려고합니다 (정의되지 않음).

업데이트 : 두 번째 문제를 해결하려면 map 선언을 다음과 같이 이동할 수 있습니다 (전체 소스를 표시하도록 업데이트 됨).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <style>html, body, #map-canvas{height: 100%; margin: 0px; padding: 0px; height: 590px;} </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <!-- Include jQuery --> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 

     // Move map declaration 
     var map; 

     function toggleLayer(firLayer,id) 
     { 
      if ($('#'+id).is(':checked')) { 
       firLayer.setMap(map); 
      } 
      else 
      { 
       firLayer.setMap(null); 
      } 
     } 

     function initialize() { 
      var mapOptions = { 
       zoom: 4, 
       center: new google.maps.LatLng(-14.886436490787712, -47.2685546875), 
       mapTypeId: google.maps.MapTypeId.TERRAIN 
      }; 

      // Set map  
      map = new google.maps.Map(document.getElementById('map-canvas'), 
        mapOptions); 

      var firCTB = [ 
       new google.maps.LatLng(1.03333333, -40.98333333), 
       new google.maps.LatLng(-2.00000000, -34.95000000), 
       new google.maps.LatLng(-0.10000000, -42.00000000), 
       new google.maps.LatLng(1.03333333, -40.98333333) 
      ]; 

      // Fir Ctb 
      drawCtb = new google.maps.Polygon({ 
       path: firCTB, 
       strokeColor: '#FFAA00', 
       strokeOpacity: 0.8, 
       strokeWeight: 3, 
       fillOpacity: 0.1 
      }); 

     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
<div id="map-canvas"></div> 
<input id="fir_curitiba" type="checkbox" onClick="toggleLayer(drawCtb,'fir_curitiba')" /> Mostrar FIR Curitiba 
</body> 
</html>

이 정보가 도움이되기를 바랍니다.

출처

2014-03-12 17:23:31 Musket

안녕하세요! 당신은 jquery에 대해 옳았습니다. 그러나 어떻게 맵 변수로 문제를 해결할 수 있습니까? 나는 코딩의 초보자입니다. – user1460038

도움을 주셔서 감사합니다,하지만 여전히로드 jquery 및지도 변수를 외부 intitilizar 함수로 이동 한 후 다각형을 표시 할 수 없습니다. 다른 팁? – user1460038

전체 소스를 포함하도록 답변을 업데이트했습니다. 잘하면 그것은 당신을 위해 지금 작동합니다. – Musket

Google지도 polygon 표시/숨기기 확인란을 사용하여 표시/숨기기

답변

관련 문제