display map_canvas div oncheck box

我想根據複選框選擇顯示谷歌地圖畫布，但是當我點擊它時，我看不到地圖正確，它顯示地圖不正確，'地圖功能'不正確' t工作要麼..... CSS鏈接集de map_canvas div大小，如果我刪除此顯示功能地圖工程完美。這裏是代碼：display map_canvas div oncheck box

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

回答

相關問題