Question

我正在尝试在通过jQuery代码隐藏的标签中加载Google Map（使用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”）来解决这个问题;'，我只是不知道是什么与此有关。

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

Answer 1

当您隐藏谷歌地图时，会发生这种情况。

您有两个选择：

调用google.maps.event.trigger（map，“resize”）;当您显示新标签
加载标签时初始化Google地图

要么工作正常;第二个是性能优先，但第一个可能需要更少的返工。

在jQuery选项卡中加载时，Google地图会显示灰色方块

1 个答案: