Question

我有一个包含两个标签的页面。第一个标签有照片，第二个是谷歌地图。问题是谷歌地图没有完全绘制，因为它是隐藏的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>

Answer 1

在你需要调整地图大小之前我已经看过了：

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

Answer 2

经过一天的努力，我跟着提问者的链接解决了他的问题。

我多次看到这个片段

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

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

然后我决定跟随一个真实的情况，实际问这个问题的人。这就是他所做的，为他或她工作，它也为我工作。我做了一个小改动，因为它总是那样。他/她的链接是其中一条评论。

我的adobe DW没有提供此选项，但是......它有效。您应该直接尝试隐藏div的标记锚点。它可能是适当的地方。在body标签（或锚标签）上调用init和recenter。单击地图后，它将重新定位地图。

<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功能。希望这有助于某些人。

Answer 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中找到类似的函数。

Answer 4

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

您可能有一个名为calcRoute（）的函数。您可能需要触发此功能两次。首先，当它被触发时它加载正常，但是当您更改选项卡时，您可能还需要再次触发该功能。这应该有效！

Answer 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);

谷歌在隐藏的div中映射

5 个答案: