我有一个页面有两个选项卡.第一个标签有照片,第二个是谷歌地图.问题是谷歌地图没有完全绘制,因为它是一个隐藏的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
多一点信息: