调整屏幕大小后谷歌地图显示？答案

【问题标题】：google map show after screen resize?调整屏幕大小后谷歌地图显示？
【发布时间】：2023-04-02 22:30:01
【问题描述】：

我嵌入的谷歌地图有问题，我不明白为什么在加载地图时不显示地图，仅在我调整窗口大小时出现，我在 stackoverflow 中经历了不同的解决方案，但他们没有为我工作。

这是我的js代码：

<script>
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 31.554606, lng: 74.357158},
          zoom: 14
        });
 google.maps.event.addListenerOnce(map, 'idle', function() {
               google.maps.event.trigger(map, 'resize');
            });
         } 
</script>

我的div

<div id="map"></div>

当我加载应用程序时，它看起来像

在重新调整浏览器窗口大小后，它看起来就像这样

请告诉我如何解决这个问题？

【问题讨论】：

stackoverflow.com/questions/12133318/…

标签： javascript jquery html css google-maps

【解决方案1】：

当您的“div id=map”可见时调用 google.maps.event.trigger(map, 'resize')。请看How do I resize a Google Map with JavaScript after it has loaded?

【讨论】：

【解决方案2】：

没有什么对我有用。我在 Bootstrap 中使用模型框来加载地图。我尝试了几个小时。每次我加载地图时，我都会看到一个灰色框，但只要我调整浏览器的大小，它就会显示地图。似乎需要调整窗口大小。所以我把所有的地图功能都放到了一个名为initmap2() 的函数中，并在其中显示了新的地图。点击后我使用了

setTimeout( initMap2, 200 );

因此，一旦模态框打开，它就会显示地图，我尝试将 100 milliseconds 工作，但我想它可以与 200+ milliseconds 一起工作，所以为了安全起见，我保留了 500ms。

希望对你有帮助

【讨论】：

【解决方案3】：

我发现这只有在结合两件事后才有效：setTimeout 和 google resize。

所以，在initMap的最后，我设置了：

google.maps.event.addListener(map, "idle", function(){
  google.maps.event.trigger(map, 'resize'); 
});

然后像这样为 initMap 创建一个 setTimeout：

$(document).ready(function(){
  setTimeout(initMap, 1000);
});

-- 编辑

回答@LucaC.：我的 initMap 是一个单独的 js，我链接到页面。上面的解决方案是在这个js中定义的（仅限setTimeout）。

但是，过了一段时间，我注意到移动设备仍然存在这个问题。

解决方法：保留 initMap 的 setTimeout 并在我加载地图的页面上进行设置

$(window).load(function(){
 setTimeout(function(){
   google.maps.event.trigger(map, "resize");
 }, 250);
});

所以：i) 延迟任何破坏地图的事情； ii) 最后，在页面加载后调整地图大小:)

【讨论】：

【解决方案4】：

没有什么对我有用。我在引导程序中使用模态框来加载地图。我做了以下代码可能会对您有所帮助

首先我用 display:none 在 body 中加载地图，如下所示

 <div style="display:none; overflow:hidden; width:100%; height:400px;" id="map"></div>

通过 initMap 方法，地图将正确加载，但我们使用 display=none 使地图不会显示。为了在模型中显示该地图，我将具有 id="map" 的 div 附加到模型中的 id="map-modal" 。如下所示

$('#modal-id').on('shown.bs.modal', function () {
    document.getElementById('map').style.display = "";
    var mapNode = map.getDiv();
    $('#map-modal').append(mapNode);
});

希望它会起作用。

【讨论】：

【解决方案5】：

无需 javascript 即可调整地图大小

第 1 步：转到谷歌地图，搜索您的位置后，点击分享并获取 Google 地图嵌入代码

第 2 步：代码如下所示

<iframe src="/" width="600" height="450" frameborder="0" style="border:0" 
allowfullscreen></iframe>

第 3 步：在嵌入代码周围添加一个 div 标签。使用 CSS 类 map-responsive

<div class="map-responsive">
<iframe src="/" width="600" height="450" frameborder="0" style="border:0" 
allowfullscreen></iframe>
</div>

第 4 步：添加您的 Google 地图 CSS

.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}

.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
} 


this will make your map responsive to any screen size.!!

【讨论】：