Question

大家好我正在建立一个网站，它有一个复选框，如果该框被选中它将显示谷歌地图，如果不是它将隐藏它。当我在没有.hide()和.show()的情况下加载它时，它可以正常工作，但是当我使用hide()和show()方法时，它会加载地图的一部分。

代码

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
<script>
 var MAPID = "map";

 function initialize(){
 var loc     = new google.maps.LatLng(23.70656905403075,-53.58581517968753);
 var options = {
 zoom      : 8,
 center    : loc,
 mapTypeId : google.maps.MapTypeId.ROADMAP
};

var map     = new google.maps.Map(document.getElementById(MAPID),options);
var marker  = new google.maps.Marker({
 position  : loc,
 map       : map,
 draggable : true,
 animation : google.maps.Animation.DROP,
title     : "Hello world"
});
google.maps.event.addListener(marker,"dragend",function(e){
updateloc(this.position);
});

marker.setMap(map);
}

function updateloc(loc){
$("#lat").val(loc.lat());
$("#long").val(loc.lng());
}
$(document).ready(function(){
            $("#map_canvas").hide();
            $("#lat").hide();
            $("#long").hide();
            $("#theMap").change(function(){
                    if(this.checked)
                    $("#map_canvas").show();
                    else
                    $("#map_canvas").hide();
                    }); 
            }); 



</script>
</head>
<body onload="initialize();" >
<form>
<input type="checkbox" id="theMap">
<div id="map" style="width:400px;height:400px"></div>
<input id="lat" />
<input id="long" />
</form>
</body>
</html>

Answer 1

我发现有类似问题的人http://www.csie.nctu.edu.tw/~wctang/mapv3test.html 我做了google.maps.event.trigger(map,'resize');并修复了问题。

谷歌地图在.show（）之后无法正确显示

1 个答案: