javascript - 无法刷新或重绘 Google map

Question

我打电话

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

在我的窗口调整大小事件中，但是当我调整窗口大小时， map 变成灰色。正在执行调整大小代码，我在 Chrome 控制台窗口中没有看到任何错误。我有什么遗漏的吗？

这是我的代码，其中包括页面 js 脚本中的所有内容，并附有两张图片，有助于显示之前和之后的样子

$(document).ready(function() {
  var map = null;
  google.maps.event.addDomListener(window, 'load', initializeMap);

  var x = window.innerHeight;
  var list = $('#theList');
  var pagedListHeight = $('.pagedList').height();
  list.textContent = "height: " + (x - 55 - pagedListHeight);
  list[0].style.height = (x - 55 - pagedListHeight) + 'px';

  document.getElementById("GoogleResultMap").textContent = "height: " + (x - 65);
  document.getElementById("GoogleResultMap").style.height = (x - 65) + 'px';

  function initializeMap() {
    var mapProp = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("GoogleResultMap"), mapProp);
  }

  $(window).resize(function() {
    x = window.innerHeight;
    list = $('#theList');
    pagedListHeight = $('.pagedList').height();
    list.textContent = "height: " + (x - 55 - pagedListHeight); // 55 is the nav bar height
    list[0].style.height = (x - 55 - pagedListHeight) + 'px';

    document.getElementById("GoogleResultMap").textContent = "height: " + (x - 65);
    document.getElementById("GoogleResultMap").style.height = (x - 65) + 'px';

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

});

<div class="container">
  <div class="resultrow">
    <div id="resultMap" class="col-md-4 no-float">
      <div id="GoogleResultMap" style="width:100%;border: 1px solid black;"></div>
    </div>
    <div id="resultContent" class="col-md-8 no-float">
      <div id="yogaSpaceList">
        <div id="theList" style="border: 1px solid black;overflow-y:scroll;">
          @foreach (var space in Model.YogaSpaces) {
          <div>
            <h4>@space.Overview.Title</h4>
            <div>
              @space.Overview.Summary
            </div>
          </div>
          <hr />}
        </div>

        <div class="pagedList">
          @Html.PagedListPager(Model.YogaSpaces, page => Url.Action("Search", new { Model.SearchQuery, Model.ClassDate, page }), PagedListRenderOptions.MinimalWithItemCountText)

        </div>

      </div>
    </div>
  </div>
</div>

窗口调整大小之前和之后

Answer 1

您的问题是由于您在<div id="GoogleResultMap">内以书面形式提出的。那就是<div>包含 map 。谷歌地图不喜欢这样。尽量不要写入或查看您需要的带有警报的值。

我替换了你的代码

 document.getElementById("GoogleResultMap").textContent = "height: " + (x - 65);

带有这个简单的警报消息

alert("height: " + (x - 65));

并且显示 map