Google Map 未检测到动态调整大小时更改的边界

Question

我有一个 AJAX 地图查询功能，每当页面加载或地图 (500x500px) 被拖动或缩放时都会触发：

google.maps.event.addListener(map, 'idle', function () {

 var bounds = map.getBounds();
 // do something

});

我还有一个按钮可以触发将此地图的大小调整到浏览器窗口的范围。单击后，我意识到 地图边界 保持为 500x500 像素，即使地图横跨整个窗口，导致地图图块加载不完整。

这里是调整大小的部分代码：

$(document).ready(function() {
 $('button').click(function() {
  $('#map').css({'height': new_height, 'width': new_width});
 }
});

拖动地图并不能解决问题。只有当我点击浏览器的最大化/恢复按钮时，谷歌地图才会检测到新的地图边界。如何在不手动的情况下解决这个问题？

Answer 1

你可以试试：

$(document).ready(function() {
    $('#button').click(function() {
        $('#map').css({'height': new_height, 'width': new_width});
        google.maps.event.trigger(map, 'resize');
    });
});