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

Question

我有一个 'mapwrap' div 设置为 400px x 400px，在里面我有一个 Google 'map' 设置为 100% x 100%。因此地图以 400 x 400 像素加载，然后使用 JavaScript 我将“mapwrap”的大小调整为屏幕的 100% x 100% - 谷歌地图按照我的预期调整到整个屏幕的大小，但图块在右侧边缘之前开始消失页面。

我可以调用一个简单的函数来使 Google 地图重新调整到更大尺寸的“mapwrap”div 吗？

Answer 1

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

google.maps.event.trigger(map, "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 年 5 月 22 日更新

随着 Maps JavaScript API 3.32 版中的新渲染器版本的发布，调整大小事件不再是 Map 类的一部分。

文档说明

调整地图大小时，地图中心固定

• 全屏控件现在保留居中。

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

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

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

Answer 2

如果您使用的是 Google Maps v2，请在调整容器大小后在您的地图上调用 checkResize()。 link

更新

Google Maps JavaScript API v2 已于 2011 年弃用。它不再可用。

Answer 3

流行的答案google.maps.event.trigger(map, "resize"); 并不适合我一个人。

这是一个确保页面已加载并且地图也已加载的技巧。通过设置监听器并监听地图的空闲状态，您可以调用事件触发器来调整大小。

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

这是对我有用的答案。

Answer 4

这是完成工作的最佳方式。 它将重新调整您的地图大小。 不再需要检查元素来重新调整地图的大小。 它会自动触发 re-size 事件。

    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 );

Answer 5

首先，感谢您指导我并关闭此问题。我从您的讨论中找到了解决此问题的方法。是的，让我们进入正题。 问题是我在 CakePHP3 中使用 GoogleMapHelper v3 助手。当我尝试打开引导模式弹出窗口时，我被地图上的灰色框问题震惊了。已经延长了2天。最后我解决了这个问题。

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

需要在setCenterMap函数中添加如下脚本

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

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

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