可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a page with two tabs. The first tab has photos and the second a google map. The problem is that the google map is not completely drawing because it is in a hidden div. So I moved the initialize() function to the href of the map tab using onclick(). This works the first time you click on it but when you return to the photos tab and then go back to the map tab the map only partially draws. If you click the map tab a second time it works perfectly. Any ideas?

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

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

回答1:

I've seen this before you need to resize the map:

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

This is for V3:

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

A little more info:

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

回答2:

After a day struggling with this, I followed the asker's link to his problem.

I saw this snippet some many times

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

and I just couldn't find the right place to insert this piece of code. As a newbie in programming, I tried all places, which includes after the init, after calling the map, everywhere. Nothing worked.

Then I decided to follow a real situation, the person who actually asked this question. This is what he did, worked for him or her and it also worked for me. I did a minor change because it's always like that. His/her link is one of the comments.

My adobe DW doesn't give this option onclick, but... it works. You should try directly on the tag anchor where the div is hidden. It may be the proper place. Call the init and recenter at the body tag (or anchor tag). Once you click on the map, it will recenter the map.

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

After the

function initialize {
....

}

Have this one

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

Attention newbies from all over the world: change the name of div above. Put your real sizes. Some people say you need real numbers in the size. But any time you click any part of body, it runs the function. Try to be more specific on you onclick function. Hope this helps someones.

回答3:

This works for me:

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

but, after the tab is shown...

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

I am using bootstrap, find the similar function in jquery UI.

回答4:

By following the link provided from Pete, I was able to resolve that.

You probably have a function called calcRoute(). You might need to trigger this function twice. At first, when it's triggered it loads fine, but you might need to trigger that function again as well when you change the tab. That should work!

回答5:

I worked this out by binding the map resizing to the controller which unhides a section container. The important part here as it relates to needing to click twice to resize the map lies in the setTimeout bit. That will provide just enough of a delay to allow the width to be calculated on wrapper around the map.

/**
 * 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);