3

こんにちは、私はウェブサイトを構築しています。チェックボックスがオンの場合、Google マップが表示され、そうでない場合は非表示になります。なし.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 に答える