0

我正在尝试在通过 jQuery 代码隐藏的选项卡中加载 Google 地图（使用 V3 Api）。完成此操作后，地图会显示一些灰色方块而不是地图，并且还会在不同的位置显示地图。

我找到了一些代码来解决这个问题，这个：google.maps.event.trigger(map, "resize");

但我不知道把它放在我的代码中的什么地方。

这是我当前的地图代码（忽略 PHP :)） 

    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>

这是不同选项卡的 jQuery：

<script type="text/javascript">
jQuery(document).ready(function() {
    //When page loads, hide all content 
    jQuery(".tab_content").hide();
    jQuery(".tab_content:first").show(); //Show first tab content
    jQuery("#tabs li:first").addClass("active").show(); //Activate first tab
    //On Click Event
    jQuery("#tabs a").click(function() {

        //Remove any "active" class
        jQuery("#tabs .active").removeClass("active");

        //Add "active" class to selected tab
        jQuery(this).parent().addClass("active");

        // Hide all tab content
        jQuery(".tab_content").hide();

        //Find the href attribute value to identify the active tab + content
        var a = jQuery(this).attr("href");

        //Fade in the active ID content
        jQuery(a).fadeIn();




        return false;
    });
});
</script>

我知道以前有人问过这个问题，我觉得我已经接近用 'google.maps.event.trigger(map, "resize");' 来解决这个问题了，我只是不知道该怎么办这个。

任何帮助将不胜感激，谢谢。

4

1 回答 1

1

当您在隐藏时初始化谷歌地图时会发生这种情况。

您有 2 个选项：

  • 调用 google.maps.event.trigger(map, "resize"); 当您显示新标签时
  • 加载选项卡时初始化 Google 地图

两者都应该可以正常工作；第二个更适合性能，但第一个可能需要较少的返工。

于 2013-02-15T08:16:00.310 回答