Question

因此，我已经使用Google地图已有相当长的一段时间了，但是我陷入了困境。我有一个容器div，在其中渲染地图，但最初的display是none。我有一个浮动按钮，我希望单击它时容器的display应更改为block，并应触发全屏事件，以便全屏显示地图。到目前为止，我已经做到了：

// 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');
}

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

Answer 1

尝试更改：

3:0:3

到

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

或添加CSS：

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

初始化时全屏呈现Google地图

1 个答案: