3

大家好，我正在建立一个网站，它有一个复选框，如果选中该框，它将显示谷歌地图，如果没有，它将隐藏它。当我没有加载它.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>
4

1 回答 1

3

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

于 2012-12-23T01:42:16.043 回答