javascript - 在初始化时全屏渲染谷歌地图

Question

所以我使用 Google map 已经有一段时间了，但我卡在了某个点上。我有一个容器 div，我在其中渲染我的 map ，但最初它的 display 是 none。我有一个 float 按钮，我希望在单击它时容器的 display 应该更改为 block 并且它应该触发全屏事件以便 map 以全屏显示。到目前为止，我已经这样做了:

// html for map

<div id="searchMap" class="search-map">
  <div class="embed-responsive">
    <div id="searchViewMap" style="height: 540px;"></div>
    <div id="restaurant-label" class="restaurant-info-container-search"></div>
  </div>
</div>

最初带有 id="searchMap" 的 div 有 display: none

// html for button to show the map

<img src="{{asset('/images/map_button.png')}}" class="content-section__map-button" onclick="showMobileMap()">

这是一个图像按钮。

// JavaScript method onclick of the button

function showMobileMap() {
  $('#searchMap').css('display', 'block');
  $('#searchViewMap div.gm-style button[title="Toggle fullscreen view"]').trigger('click');
}

现在我面临的问题是，当我第一次单击该按钮时，它会显示带有 map 的容器，但不会全屏显示。当我再次单击该按钮时，它会全屏显示。我不知道为什么会这样，但我希望 map 在第一次点击时呈现全屏。

Answer 1

尝试改变:

<div id="searchViewMap" style="height: 540px;"></div>

到

<div id="searchViewMap" style="width: 100%; min-height: 100vh;"></div>

或添加CSS:

#searchMap {
  height: 100%;
  width: 100%;
  left: 0;
  position: absolute;
  top: 0;    
  z-index: 2;
}