显示 map_canvas div 复选框答案

【问题标题】：display map_canvas div oncheck box显示 map_canvas div 复选框
【发布时间】：2012-10-18 03:55:27
【问题描述】：

我想根据复选框选择显示谷歌地图画布，但是当我点击它时，我看不到地图，它显示的地图不正确，并且“地图功能”也不起作用.. ... css 链接设置 de map_canvas div 大小，如果我删除此显示功能地图效果完美。代码如下：

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

有什么想法吗？

【问题讨论】：

标签： javascript html css google-maps-api-3

【解决方案1】：

      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>

像这样改变你的代码

【讨论】：