3
大家好，我正在建設一個網站，它有一個複選框，如果該框被選中，它會顯示谷歌地圖，如果沒有，它會隱藏它。當我加載它沒有.hide()和.show()它工作正常，但是當我使用hide()和show()方法它會加載一部分地圖。谷歌地圖無法正確顯示後.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>
您的示例代碼似乎不起作用，地圖始終可見。 – geocodezip
你必須添加你的APIKEY – abdul
我不允許發佈它。 – abdul