在我调整网页大小之前，谷歌地图无法正常显示

Question

我正在尝试在我的网页中显示地图。 在我的网站中，我使用date-filter 和data-cat 功能。所以我首先隐藏了地图。 但是当我点击.submenu04 ul li时，我的问题来了，地图显示不好。

wrong display 但是在我调整网页大小后，它变得正常了。 after resize

我在其他问题中找到了解决方案，但没有奏效。 Embed google map is wrong displayed until resizing webpage 有办法解决吗？

var window_w, window_h;

function menuset(){

  var posts = $('.post');
  posts.hide();
$( ".submenu03 li" ).click(function() {

    // Get data of category
    var customType = $( this ).data('filter'); // category
    console.log(customType);
    console.log(posts.length); // Length of articles

    $('section.c').css({'display':'block'});
    $('.c').show();

    posts
    .hide()
    .filter(function () {
      return $(this).data('cat') === customType;
    })
    .fadeIn(200);




  });


}

function maps_set(){
   $('#map').css({'width':'500px','height':'500px'});
    google.maps.event.addDomListener(window, 'load', initialize);

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(25.08650, 121.535000),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles:
        [
          {
           "featureType": "water",
            "elementType": "geometry",
            "stylers": [{"color": "#e9e9e9"},{"lightness": 17}]},
          {
           "featureType": "landscape",
           "elementType": "geometry",
           "stylers": [{"color": "#f5f5f5"},{"lightness": 20}]},
          {
           "featureType": "road.highway",
           "elementType": "geometry.fill",
           "stylers": [{"color": "#ffffff"},{"lightness": 17}]},
          {
           "featureType": "road.highway",
           "elementType": "geometry.stroke",
           "stylers": [{"color": "#ffffff"},{"lightness": 29},{"weight": 0.2}]},
          {
           "featureType": "road.arterial",
           "elementType": "geometry",
           "stylers": [{"color": "#ffffff"},{"lightness": 18}]},
          {
           "featureType": "road.local",
           "elementType": "geometry",
           "stylers": [{"color": "#ffffff"},{"lightness": 16}]},
          {
           "featureType": "poi",
           "elementType": "geometry",
           "stylers": [{"color": "#f5f5f5"},{"lightness": 21}]},
          {
           "featureType": "poi.park",
           "elementType": "geometry",
           "stylers": [{ "color": "#dedede"},{"lightness": 21}]},
          {
           "elementType": "labels.text.stroke",
           "stylers": [{"visibility": "on"},{"color": "#ffffff"},{"lightness": 16}]},
          {
           "elementType": "labels.text.fill",
           "stylers": [{"saturation": 36},{"color": "#333333"},{"lightness": 40}]},
          {
           "elementType": "labels.icon",
           "stylers": [{"visibility": "off"}]},
          {
           "featureType": "transit",
           "elementType": "geometry",
           "stylers": [{"color": "#f2f2f2"},{"lightness": 19}]},
          {
           "featureType": "administrative",
           "elementType": "geometry.fill",
           "stylers": [{"color": "#fefefe"},{"lightness": 20}]},
          {
           "featureType": "administrative",
           "elementType": "geometry.stroke",
           "stylers": [{"color": "#fefefe"},{"lightness": 17},{"weight": 1.2}]}
]
      };
      var map = new google.maps.Map(document.getElementById("map"),mapOptions);
      var marker_image = {
        url: "images/map_icon.png",
        size: new google.maps.Size(20, 33),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(-20, 33),
      };
      var main_Position = new google.maps.LatLng(25.0774235,121.5454867);
      var marker = new google.maps.Marker({
        position: main_Position,
        map: map,
        optimized: false,
        // size: new google.maps.Size(20, 32),
        icon: marker_image
      });
    }
}


$(function() {
  window_w = $(window).width();
  window_h = $(window).height();

  menuset();
  maps_set();


});

 @charset "UTF-8";
 /* CSS Document */
 html, body {
  margin: 0;
 }
 header{
  position: fixed;
 }
 section.c{
/*  display: none;*/
  margin: 90px 90px 0px 300px;
 }
  section.others{
/*  display: none;*/
  margin: 90px 90px 0px 300px;
 }
 .logo{
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 30px 0 30px 90px;
  background-color: #fff;
  width: 100%;
  z-index: 7000;
 }
 .logo img{
  height: 30px;
  width: auto;
  cursor: pointer;
 }
  .menu{
    position: fixed;
    background-color: #fff;
    width: 200px;
    height: 100%;
    z-index: 9000;
    padding-left: 90px;
    padding-top: 0px;
    left: 0;
    opacity: 1;
  }
  .submenu03 ul{
    padding:0;
    margin: 0 0 30px 0;
  }
  .submenu03 ul li{
    list-style: none;
    font-size: 15px;
    line-height: 21px;
    cursor: pointer;
    font-weight:300;
  }
  .submenu03 ul li:hover{
    opacity: 0.5;

  }
  .submenu03 li a:link,.submenu03 li a:visited{
    text-decoration: none;
    color: #000;
    opacity: 1;
  }
  .menu_title{
   font-size: 20px;
   margin-bottom: 10px;
   line-height: 18px;
   font-weight: 500;
 }
.ci ul{
  padding: 0;
  margin: 0;
}
.ci ul li{
  list-style: none;
  font-size: 14px;
  padding-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<body>
<!--header-->
<header class="nav-down">
 <div class="logo">LOGO</div>
 <div class="menu">
      <div class="submenu03">
        <ul>
          <li data-filter="ar">show the map</li>
          <li data-filter="ot">show another page</li>
        </ul>
      </div>
 </div>
</header>
<section class="c">
  <div class="ar post" data-cat="ar">
    <div class="ci">
     <div id="map"></div>
    </div>
  </div>
</section>
<section class="others">
  <div class="ot post" data-cat="ot">
  this is another page.
  </div>
</section>
<div style="clear: both;"></div>
</body>

解决方案 谢谢@马宇博

function menuset(){

  var posts = $('.post');
  posts.hide();
$( ".submenu03 li" ).click(function() {

    // Get data of category
    var customType = $( this ).data('filter'); // category
    console.log(customType);
    console.log(posts.length); // Length of articles

    $('section.c').css({'display':'block'});
    $('.c').show();

    posts
    .hide()
    .filter(function () {
      return $(this).data('cat') === customType;
    })
    .fadeIn('200', function() {
  google.maps.event.trigger(map, 'resize');
});




  });


}

Answer 1

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

将此代码添加到您的fadeIn，fadeOut回调函数中，任何东西都会改变地图大小。

Answer 2

您不应该根据条件隐藏和显示您的地图。您应该只在需要显示或重新初始化地图时创建地图。否则，它最初会在显示为无时渲染地图，但在将其更改为阻止后无法正确显示。我之前遇到过这个问题。