在容器宽度改变后重新进入谷歌地图
Recenter a Google map after container changed width
我有一个谷歌地图集与Javascript API V3。它显示在一个动态宽度的div中,当我们点击一个标记时,内容窗格会向上滑动。
一切正常,但有一件事:当窗格向上滑动时,地图的宽度被改变,因此中心被移到右边(窗格在左边)。这真的很不方便,特别是对于小分辨率,你甚至无法看到窗格打开后的中心。
我试过'调整'触发器,但它似乎不起作用…有什么想法吗?
单独调用resize
将无法达到所需的效果。
你需要做的是首先(在调整大小之前)获得当前地图的中心
var currCenter = map.getCenter();
然后你需要做如下的事情,在你的div调整大小后。
google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);
应该能成功
更新2018-05-22在3.32版本的map JavaScript API中,resize事件不再是Map
类的一部分。
文档说明
当地图被调整大小时,地图中心是固定的
全屏控制现在保留中心
不再需要手动触发大小调整事件
来源:https://developers.google.com/maps/documentation/javascript/new-renderer
google.maps.event.trigger(map, "resize");
从3.32版本开始没有任何效果
首先为当前中心设置一个变量,然后使用事件侦听器检测大小调整,从而设置中心。
//Get current center
var getCen = map.getCenter();
//Use event listener for resize on window
google.maps.event.addDomListener(window, 'resize', function() {
//Set Center
map.setCenter(getCen);
});
omarello确实有用,但我不能投票给它。您可能忘记引用定义中心坐标的var。"调整大小"所做的只是拉出div当前的宽度和高度,它不会改变任何关于地图的东西——目前!
var center = new google.maps.LatLng(39.5, -98.3);
$(document).ready(function() {
$("#fullsize").click(function(e) {
e.preventDefault();
$("#map_canvas").css({
width: '1000px'});
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
});
为什么要试试呢;)
On map初始化
var currentMapCenter = null;
google.maps.event.addListener(map, 'resize', function () {
currentMapCenter = map.getCenter();
});
google.maps.event.addListener(map, 'bounds_changed', function () {
if (currentMapCenter) {
// react here
map.setCenter(currentMapCenter);
}
currentMapCenter = null;
});
在此之后,当您想要调整地图大小时,只需调用。
google.maps.event.trigger(map, 'resize');
相关文章:
- 当谷歌地图进入街景时,我能抓住什么事件
- 在新窗口中通过谷歌地图的localStorage作为地图中心
- 导致出现新内容块的标记(谷歌地图)
- 在谷歌地图上为每个“多边形”生成新的多段线;日期“;来自mysql的值
- 谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线
- 谷歌地图api通过点击信息窗口内的链接打开新的信息窗口
- 在商店定位器谷歌地图api中的商店面板中添加新字段
- 谷歌地图设置中心到一个新点击的区域
- 谷歌地图将MarkerClusters放在了新的搜索中
- 在谷歌地图中添加新标记之前,先删除以前的标记
- 谷歌地图点击平移到新位置 递归错误太多
- 在新窗口中获取路线 谷歌地图API v3.
- 如何强制谷歌地图进入精简模式(没有WebGL)
- 如何在新的谷歌地图上设置默认缩放级别
- 在当前页面中加载一个新的谷歌地图,加载AJAX
- 在容器宽度改变后重新进入谷歌地图
- 重新进入谷歌地图后,地图画布改变大小的API
- 删除多边形,并添加一个新的谷歌地图
- 使用 JavaScript 打开一个新窗口(谷歌地图),删除以前的事件处理程序
- 如何在旧的上面显示新的谷歌地图信息窗口