尽管有事件侦听器，但 Google 地图 API 未调整大小 - 通过 AJAX 创建答案

【问题标题】：Google maps API Not resizing despite event listener - Created through AJAX尽管有事件侦听器，但 Google 地图 API 未调整大小 - 通过 AJAX 创建
【发布时间】：2013-12-18 22:56:59
【问题描述】：

我目前正在使用 google maps api 生成地图，并且地图没有调整到 div 的大小。相反，很多灰色区域正在发生，我希望有人可以在这里帮助我。

这是生成地图的代码：

<div class="map" style='width: 750px; height: 200px;'></div>

这个 div 是有针对性的，这个 div 是在这个 ajax 请求上呈现的部分：

$(".categorybox2").on('click', function() {
    choice3 = $(this).text();

    $.ajax({
        url: "/result/" + choice1 + "/" + choice2 + "/" + choice3,
        type: "GET",
        dataType: "script",
        data: { choice1: choice1,
                choice2: choice2,
                choice3: choice3 },
        complete: function(data) {

            function initialize()
            {
                var arrcount=0
                var arr=$(".hidden").text().split(",")
                for (var i=0; i<=2; i++) {
                  if (i === 0) {
                    arrcount=0
                  } else if (i === 1) {
                    arrcount = 2
                  } else if (i === 2) {
                    arrcount = 4
                  }

                  var mapProp = {
                  center:new google.maps.LatLng(parseFloat(arr[arrcount]),parseFloat(arr[arrcount+1])),
                  zoom:15,
                  mapTypeId:google.maps.MapTypeId.ROADMAP
                  };

                  var myLatlng= (parseFloat(arr[arrcount]),parseFloat(arr[arrcount+1]))
                  var map=new google.maps.Map($(".map")[i]
                    ,mapProp);

                  var marker = new google.maps.Marker({
                    position: mapProp.center,
                    map: map,
                  });

                  google.maps.event.addListenerOnce(map, 'idle', function() {
                     //var center = map.getCenter();

                     //map.setCenter(center);
                     google.maps.event.trigger(map, "resize");
                  });



            }
          }

            initialize()
            // for (var i=0; i<=2; i++) {
            //   $($(".map")[i]).css("width", "700")
            //   $($(".map")[i]).css("height", "200")
            // }


        }
    })

});

地图最初如下所示：

当您调整实际窗口本身的大小时，地图会变为此状态（尽管长时间处于空闲状态（仅调整实际浏览器窗口的大小会重新触发它以填充灰色））：

并且地图应该在标记上居中，如下所示：

我也尝试过使用“bounds_changed”而不是“idle”，但没有运气。请这是一个非常烦人的问题！:)

编辑：

这里是完整的部分：

<% @result.each do |event| %>
  <div class="eachresult">
 <div class="matchscore">
                        Relevance score:
                        <a class="score"><%= event[0].round(1) %>%</a>
                    </div>

                <div class="map" style='width: 750px; height: 200px;'></div>

      </div>
<% end %>

最初在保存地图的 div 上的 css（输出）：

.wrapper .output,
.wrapper .output1,
.wrapper #blackness {
    display: none;
}

这是触发地图显示的 javascript：

$(".price").on('click', function() {
    $(".price, .question3, .bk2category").fadeOut( function() {


      var black = setTimeout(function() {
        $(".output, .question4, .output1")
          .delay(500)
          .show()
          .animate({left:"+15", opacity: 1}, 1000);
      }, 1000);

      $(".blackness").fadeOut();
      $("#foo").fadeOut("slow")
    });
  });

【问题讨论】：

你在一个 div 中放置了多少张地图？您正在使用 var map = new google.maps.Map($(".map")[i], mapProp);
嘿@AntoJurković 我将每张地图放在自己的 div 中。请参阅编辑以查看整个部分。
不知何故这没有意义，地图应该完全可见。 div 最初是隐藏的吗？
@Dr.Molle 保存地图的 div 最初是隐藏的。我在上面添加了 css 和 javascript。感谢您的帮助！

标签： javascript jquery css ajax google-maps

【解决方案1】：

嘿伙计们，我想通了！我注意到在我移动浏览器之前地图不会调整大小。所以我决定在javascript中设置延迟渲染地图。现在它可以工作了！！！

代码如下：

setTimeout(function() {
            initialize()
          }, 3000)

感谢大家的帮助！:)

【讨论】：