加载后如何使用JavaScript调整Google地图的大小?

对于Google Maps v3,您需要以不同方式触发调整大小事件:

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

请参阅resize事件的文档(您需要搜索“resize”一词): http://code.google.com/apis/maps/documentation/v3/reference.html#event

使现代化

这个答案已经存在很长时间了,所以一个小演示可能是值得的&尽管它使用jQuery,但实际上没有必要这样做。

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});

html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

更新2018-05-22

使用Maps JavaScript API 3.32版本中的新渲染器版本,调整大小事件不再是 Map 班

文件说明

• 不再需要手动触发调整大小事件。

资料来源: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 从3.32版开始没有任何效果

checkResize() link

使现代化

谷歌地图JavaScript API v2在2011年被弃用。现在已经没有了。

通俗的答案 google.maps.event.trigger(map, "resize"); 不是我一个人干的。

这里有一个技巧可以确保页面已经加载,地图也已经加载。通过设置侦听器并侦听映射的空闲状态,然后可以调用事件触发器来调整大小。

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

这是我的答案,对我有效。

这是它能完成任务的最好方法。 不需要再检查元素来重新调整地图的大小。 它所做的将自动触发重新调整事件大小。

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

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

首先,感谢您指导我并结束本期。我从你们的讨论中找到了解决这个问题的方法。是的,让我们开门见山吧。 问题是我正在CakePHP3中使用GoogleMapHelper v3 helper。当我试图打开bootstrap模式弹出窗口时,我被地图上的灰盒问题击中了。它被延长了两天。最后我解决了这个问题。

我们需要更新GoogleMapHelper来解决这个问题

google.maps.event.trigger({$id}, \"resize\");

并且需要在JavaScript中包含以下代码

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});