javascript - 容器更改宽度后重新定位 Google map

标签 javascript google-maps center

我有一个使用 Javascript API V3 设置的谷歌地图。它显示在具有动态宽度的 div 中,当我们单击标记时,内容 Pane 会向上滑动。

一切正常,但有一件事:当 Pane 向上滑动时, map 的宽度发生变化,因此中心向右移动( Pane 在左侧)。这真的很不方便,尤其是对于小分辨率,打开 Pane 后你甚至看不到中心。

我试过“调整大小”触发器,但它似乎不起作用...有什么想法吗?

非常感谢!

最佳答案

自行调用 resize 不会达到您的需要。

您需要做的是首先(在调整大小之前)获取 map 的当前中心

var currCenter = map.getCenter();

在调整 div 大小后,您需要执行如下操作。

google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);

应该做的事

2018-05-22 更新

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

文档说明

When the map is resized, the map center is fixed

  • The full-screen control now preserves center.

  • There is no longer any need to trigger the resize event manually.

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

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

关于javascript - 容器更改宽度后重新定位 Google map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8558226/

相关文章:

javascript - 过滤器不适用于没有属性的数组

javascript - HTML5 辅助功能 : How to indicate switching between grid and list layout?

javascript - 在 jasmine 指令 Controller 中返回一个 promise

css - 左、中、右对齐 div 在同一行的底部

html - 居中谷歌地图 iframe

css - Blogger 中的标题图片不会在浏览器窗口调整大小时居中

javascript - 使用 JQuery 更改单选按钮检查状态

android - 谷歌适合 API : How to get a map of the route taken during the activity?

java - Android:是否可以在模拟器上使用 Google Maps API?

javascript - 在 Google map 中显示可见标记,许多标记