javascript - 隐藏 div 中的 Google map

Question

我有一个包含两个选项卡的页面。第一个标签有照片，第二个标签有谷歌地图。问题是谷歌地图没有完全绘制，因为它位于隐藏的 div 中。所以我使用 onclick() 将 initialize() 函数移动到 map 选项卡的 href。这在您第一次单击它时有效，但是当您返回照片选项卡然后返回 map 选项卡时， map 仅部分绘制。如果您再次单击 map 选项卡，它会完美运行。有什么想法吗？

标签 javascript:

<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>

Answer 1

在你需要调整 map 大小之前我已经看到了这个:

google.maps.event.trigger(map, 'resize');
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