隐藏 div 中的谷歌地图答案

【问题标题】：Google maps in hidden div隐藏 div 中的谷歌地图
【发布时间】：2011-08-16 20:10:29
【问题描述】：

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

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

【问题讨论】：

标签： javascript html maps hidden

【解决方案1】：

在您需要调整地图大小之前，我已经看到了这一点：

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

这是针对 V3 的：

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

【讨论】：

谢谢，但这并没有解决问题。地图在我第一次点击地图选项卡时加载良好，但如果我点击照片选项卡然后返回地图选项卡，那么它只会部分加载。
@Rob 嗯，这很有趣，地图肯定被称为“地图”吗？当你调整它的大小时，地图就在范围内？
你可以在这里看到它的实际效果：link
也许尝试在第 45 行的 function initialize() { 之前插入 var map; 。希望这是一个范围问题，把它放在全球范围内
@DougMolineux 非常感谢，它节省了我很多时间 :)

【解决方案2】：

在为此苦苦挣扎了一天之后，我按照提问者的链接找到了他的问题。

我多次看到这个sn-p

google.maps.event.trigger(map, 'resize');

我只是找不到插入这段代码的正确位置。作为一个编程新手，我尝试了所有地方，包括在初始化之后，在调用地图之后，到处都是。没有任何效果。

然后我决定跟随一个真实的情况，真正问这个问题的人。这就是他所做的，为他或她工作，也为我工作。我做了一个小的改变，因为它总是这样。他/她的链接是 cmets 之一。

我的 adobe DW 没有在点击时提供此选项，但是……它可以工作。您应该直接尝试隐藏 div 的标记锚点。这可能是合适的地方。在 body 标签（或锚标签）处调用 init 和 centerer。单击地图后，它将使地图居中。

<body  onclick="initialize(); center_map();">

之后

function initialize {
....

}

有这个

<script type="text/javascript">
function center_map() {
var center = map.getCenter();
    document.getElementById("your_div_name").style.width = 'auto';
    document.getElementById("your_div_name").style.height = '250px';
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
}
</script>

世界各地的新手注意：更改上面的div的名称。把你的真实尺寸。有人说你需要实数的大小。但是任何时候你点击身体的任何部分，它都会运行这个功能。尝试更具体地了解您的 onclick 功能。希望这可以帮助别人。

【讨论】：

【解决方案3】：

这对我有用：

google.maps.event.trigger(map, 'resize');

但是，在标签显示之后...

$('a[href="#mytab"]').on('shown', function (e){
       google.maps.event.trigger(map, 'resize'); moveTo(); 
     });  // realocate the map

我用的是bootstrap，在jquery UI中找到类似的功能。

【讨论】：

【解决方案4】：

通过 Pete 提供的链接，我能够解决这个问题。

您可能有一个名为 calcRoute() 的函数。您可能需要触发此功能两次。起初，当它被触发时，它会很好地加载，但是当您更改选项卡时，您可能还需要再次触发该功能。应该可以！

【讨论】：

【解决方案5】：

我通过将调整大小的地图绑定到取消隐藏部分容器的控制器来解决这个问题。这里的重要部分与需要单击两次来调整地图大小有关，在于 setTimeout 位。这将提供足够的延迟，以允许在地图周围的包装器上计算宽度。

/**
 * This example will work with foundation 4 sections. However, the idea is the same for any collapsed map. 
 * Load a map object
 * Find it's parent (which is hidden)
 * Bind a click event to the element which 'unhides' your container
 * */
(function($) {
  Drupal.behaviors.foundationCollapseHack =  {
      attach: function(context, settings) {
          // check whether we have a map
          if(typeof settings.vrListingMap != 'undefined') {
              // on page load
              $(window).load(function() {
                // grab a map object
                var map = Drupal.behaviors.vrwebListingMaps.map;
                // if we have a section container
                if($(map.b).parents('.section-container').length > 0) {
                    // find any maps in these tabs and bind a click to it
                    $(map.b).parents('section').find('p.title').children('a').click(function() {
                      // B.c of timing - it's important to wrap the resize stuff in a timeOut.
                      // This assures that getComputedStyle is not null when resize fires
                      setTimeout(function() {
                          var coord = map.getCenter();
                          google.maps.event.trigger(map, "resize");
                          map.setCenter(new google.maps.LatLng(coord.lat(), coord.lng()), settings.vrListingMap.options.default_zoom);    
                        }, 0 );
                    });
                  }
               });
           }
        }
    }

})(jQuery);

【讨论】：