谷歌地图的全屏切换答案

【问题标题】：Full Screen toggle for Google Maps谷歌地图的全屏切换
【发布时间】：2018-01-11 06:15:41
【问题描述】：

我正在开展一个将特定位置添加到 Google 地图的项目。一切正常：http://www.secret-vault.com/nostradamus/locations.html

我添加了一个切换 (jQuery) 按钮以更改为全屏（可以通过 Esc 按钮进行转义）。

        $("#map_toggler").click(function() {
          $("#map").toggleClass("fullscreen")
        });

并使用支持CSS将地图改为全屏：

#map.fullscreen {
  position: fixed !important;
  top:0;
  left:0;
  z-index:1;
  width:100%;
  height: 100%;
  margin:0;
  padding:0;
}

我重置了填充等，看看这是否是问题的根源。

问题是......有时它会全屏显示，有时它会部分填充高度或返回到原始高度。尤其是在放大/缩小时会发生这种情况。

【问题讨论】：

您能否发布一段代码以查看您得到的行为？
我完成了一些进一步的测试，问题似乎出在 Google Api 本身。我有大型宽屏显示器。我刚刚在其他设备和标准显示器上进行了测试，全屏按预期工作。使用宽屏显示器时似乎会出现问题，基本上页面的一部分显示为白色，而不是显示整个地图。
为什么投反对票？不提供反馈就没有任何意义。
好吧，不是我，但我想这是因为你没有提供足够的细节来重现你遇到的问题，无论如何我不认为你的宽屏显示器是问题，也许你应该上传一个小提琴，在那里你可以看到你的问题正在发生，让这里的人明白你的意思
当您的地图变得比您初始化地图时更大时，往往会发生这种情况。如果您以全屏方式对其进行初始化，然后减小尺寸，则不会发生这种情况。看看是否有助于调整大小，如下所示：stackoverflow.com/questions/18444161/…

【解决方案1】：

感谢 Emmanual 的洞察力

闪烁效果是由 api 中的错误引起的。更改缩放时，地图仍会查找原始容器大小。显然，尺寸参数是在缩放设置中的某个元素中捕获的。

这可以通过首先将地图设置为全屏然后更改以适应容器来解决。详情见此帖：Google maps responsive resize

感谢大家的支持。

【讨论】：