我有一个页面有两个选项卡.第一个标签有照片,第二个是谷歌地图.问题是谷歌地图没有完全绘制,因为它是一个隐藏的div.所以我使用onclick()将initialize()函数移动到map选项卡的href.这是您第一次点击它,但当您返回到照片选项卡,然后回到地图选项卡,地图只是部分绘制.如果您再次单击地图选项卡,它将完美运行.有任何想法吗？
<script type="text/javascript">
$(function () {
var tabContainers = $('div.tabs > div');
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
谷歌地图javascript：
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(<?=$lat ?>,<?=$lng ?>);
var myOptions = {
zoom: 15,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
position: latlng,map: map,title:"<?=$fulladdress ?>"
});
}
</script>
HTML：
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">Photos</a></li>
<li><a href="#map_canvas" onclick="initialize(); return false;">Map</a></li>
</ul>
<div id="first"> </div>
<div id="map_canvas" ></div>
解决方法
在您需要调整地图大小之前,我已经看到过：
google.maps.event.trigger(map,'resize'); map.setZoom( map.getZoom() );
这是V3：
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
多一点信息：
