display map_canvas div oncheck 상자

체크 박스 선택에 따라 Google지도 캔버스를 표시하고 싶지만지도를 잘 볼 수 없다면지도가 잘못 표시되고 '지도 기능'이 ' t 중 하나를 작동 ..... CSS 링크를 표시 map_canvas div 크기를 설정하면이 쇼 기능을지도 완벽하게 작동 제거 할 수 있습니다. 코드는 다음과 같습니다.display map_canvas div oncheck 상자

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 

<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"> </script> 

<script type="text/javascript" src="../jquery-1.2.1.pack.js"></script> 


<script type="text/javascript"> 

function lookup(inputString) { 

    if(inputString.length == 0) { 



     // Hide the suggestion box. 

     $('#suggestions').hide(); 

    } else { 


     $.post("do_search.php", {queryString: ""+inputString+""}, 
function(data){ 


      if(data.length >0) { 
         alert(data); 
       $('#suggestions').show(); 
       $('#autoSuggestionsList').html(data); 
      } 
     }); 
} 


} // lookup 





//alert(queryString); 


</script> 



<script> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-35.48833, -62.97528), 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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

    var drawingManager = new google.maps.drawing.DrawingManager({ 
     drawingMode: google.maps.drawing.OverlayType.MARKER, 
     drawingControl: true, 
     drawingControlOptions: { 
     position: google.maps.ControlPosition.TOP_CENTER, 
     drawingModes: [ 
      google.maps.drawing.OverlayType.POLYGON 
     ] 
     }, 
     markerOptions: { 
     icon: 'images/beachflag.png' 
     }, 
     circleOptions: { 
     fillColor: '#ffff00', 
     fillOpacity: 1, 
     strokeWeight: 5, 
     clickable: false, 
     editable: true, 
     zIndex: 1 
     } 
    }); 
    drawingManager.setMap(map); 
    google.maps.event.addListener(drawingManager, 'polygoncomplete',  function(polygon) { 
     //alert('Poligono cerrado'); 

     var coordinates = ""; 

     var path = polygon.getPath(); 

     for (var i = 0; i < path.getLength(); i++) 
      coordinates += path.getAt(i) + ","; 

     //alert(coordinates); 
     lookup(coordinates); 

     drawingManager.drawingControlOptions.drawingModes = []; 
     drawingManager.drawingControl = false; 
     drawingManager.setMap(map); 



    }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<script> 
function fnchecked(blnchecked) 
{ 
if(blnchecked) 
{ 
document.getElementById("map_canvas").style.display = ""; 
} 
else 
{ 
document.getElementById("map_canvas").style.display = "none"; 
} 

} 
</script> 
</head> 
<body> 
<input type="checkbox" name="fldcheckbox" id="fldcheckbox" onclick="fnchecked(this.checked);"/>mapa 
<div id="map_canvas" style="display:none;"> 
    </div> 
</body>

아이디어가 있으십니까?

출처

2012-10-18 Gustavo Benito Silva

 function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-35.48833, -62.97528), 
      zoom: 7, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

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

     var drawingManager = new google.maps.drawing.DrawingManager({ 
      drawingMode: google.maps.drawing.OverlayType.MARKER, 
      drawingControl: true, 
      drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: [ 
       google.maps.drawing.OverlayType.POLYGON 
      ] 
      }, 
      markerOptions: { 
      icon: 'images/beachflag.png' 
      }, 
      circleOptions: { 
      fillColor: '#ffff00', 
      fillOpacity: 1, 
      strokeWeight: 5, 
      clickable: true, 
      editable: true, 
      zIndex: 1 
      } 
     }); 
     drawingManager.setMap(map); 
     google.maps.event.addListener(drawingManager, 'polygoncomplete',  
function(polygon) { 
      //alert('Poligono cerrado'); 

      var coordinates = ""; 

      var path = polygon.getPath(); 

      for (var i = 0; i < path.getLength(); i++) 
       coordinates += path.getAt(i) + ","; 

      //alert(coordinates); 
      lookup(coordinates); 

      drawingManager.drawingControlOptions.drawingModes = []; 
      drawingManager.drawingControl = false; 
      drawingManager.setMap(map); 



     }); 
     } 


    </script> 
    <script> 
    function fnchecked(blnchecked) 
    { 
    if(blnchecked) 
    { 
     document.getElementById("map_canvas").style.display = "block"; 
    initialize(); 
    } 
    else 
    { 
    document.getElementById("map_canvas").style.display = "none"; 
    } 

    } 
    </script>

변경이

출처

2012-10-18 04:06:45

완벽한 같은 코드, 감사합니다! –

display map_canvas div oncheck 상자

답변

관련 문제