Javascript “显示地图\u画布分区”复选框_Javascript_Html_Css_Google Maps Api 3

Javascript “显示地图\u画布分区”复选框

javascript html css google-maps-api-3

Javascript “显示地图\u画布分区”复选框,javascript,html,css,google-maps-api-3,Javascript,Html,Css,Google Maps Api 3,我想根据复选框选择显示谷歌地图画布，但当我点击它时，我看不清楚地图，地图显示不正确，“地图功能”也不起作用。。。。。css链接设置de map_canvas div大小，如果我删除此函数，则显示映射效果完美。代码如下： <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <li

我想根据复选框选择显示谷歌地图画布，但当我点击它时，我看不清楚地图，地图显示不正确，“地图功能”也不起作用。。。。。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>


函数查找（inputString）{
如果（inputString.length==0）{
//隐藏建议框。
$（“#建议”）.hide（）；
}否则{
$.post（“do_search.php”，{queryString:“+inputString+”}，
功能（数据）{
如果（data.length>0）{
警报（数据）；
$（“#建议”）.show（）；
$（'#autoSuggestionsList'）.html（数据）；
}
});
}
}//查找
//警报（查询字符串）；
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（-35.48833，-62.97528），
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
var drawingManager=new google.maps.drawing.drawingManager({
drawingMode:google.maps.drawing.OverlyType.MARKER，
drawingControl：对，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
绘图模式：[
google.maps.drawing.overlytype.POLYGON
]
},
标记选项：{
图标：“images/beachflag.png”
},
循环操作：{
填充颜色：'#ffff00'，
不透明度：1，
冲程重量：5，
可点击：false，
是的，
zIndex:1
}
});
drawingManager.setMap（map）；
google.maps.event.addListener（drawingManager，'polygoncomplete'，函数（多边形）{
//警报（“Poligono cerrado”）；
var坐标=”；
var path=polygon.getPath（）；
对于（var i=0；i


有什么想法吗？
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（-35.48833，-62.97528），
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
var drawingManager=new google.maps.drawing.drawingManager({
drawingMode:google.maps.drawing.OverlyType.MARKER，
drawingControl：对，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
绘图模式：[
google.maps.drawing.overlytype.POLYGON
]
},
标记选项：{
图标：“images/beachflag.png”
},
循环操作：{
填充颜色：'#ffff00'，
不透明度：1，
冲程重量：5，
可点击：正确，
是的，
zIndex:1
}
});
drawingManager.setMap（map）；
google.maps.event.addListener（drawingManager，'polygoncomplete'，
函数（多边形）{
//警报（“Poligono cerrado”）；
var坐标=”；
var path=polygon.getPath（）；
对于（var i=0；i

像这样更改代码
      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>