javascript – Google映射到隐藏的div

前端之家收集整理的这篇文章主要介绍了javascript – Google映射到隐藏的div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个页面有两个选项卡.第一个标签有照片,第二个是谷歌地图.问题是谷歌地图没有完全绘制,因为它是一个隐藏的div.所以我使用onclick()将initialize()函数移动到map选项卡的href.这是您第一次点击它,但当您返回到照片选项卡,然后回到地图选项卡,地图只是部分绘制.如果您再次单击地图选项卡,它将完美运行.有任何想法吗?

标签javascript

  1. <script type="text/javascript">
  2.  
  3. $(function () {
  4. var tabContainers = $('div.tabs > div');
  5.  
  6. $('div.tabs ul.tabNavigation a').click(function () {
  7. tabContainers.hide().filter(this.hash).show();
  8.  
  9. $('div.tabs ul.tabNavigation a').removeClass('selected');
  10. $(this).addClass('selected');
  11.  
  12. return false;
  13. }).filter(':first').click();
  14. });
  15.  
  16. </script>

谷歌地图javascript:

  1. <script type="text/javascript">
  2. function initialize() {
  3. var latlng = new google.maps.LatLng(<?=$lat ?>,<?=$lng ?>);
  4. var myOptions = {
  5. zoom: 15,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP
  6. };
  7. var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  8.  
  9. var marker = new google.maps.Marker({
  10. position: latlng,map: map,title:"<?=$fulladdress ?>"
  11. });
  12. }
  13. </script>

HTML:

  1. <div class="tabs">
  2. <ul class="tabNavigation">
  3. <li><a href="#first">Photos</a></li>
  4. <li><a href="#map_canvas" onclick="initialize(); return false;">Map</a></li>
  5. </ul>
  6.  
  7.  
  8. <div id="first"> </div>
  9. <div id="map_canvas" ></div>

解决方法

在您需要调整地图大小之前,我已经看到过:
  1. google.maps.event.trigger(map,'resize');
  2. map.setZoom( map.getZoom() );

这是V3:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

多一点信息:

https://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2?pli=1

猜你在找的JavaScript相关文章