在容器更改宽度后重新居中Google地图
在容器更改宽度后重新居中Google地图
提问于 2011-12-19 15:19:28
我有一个带有Javascript API V3的谷歌地图集。它显示在一个动态宽度的div中，当我们点击一个标记时，内容窗格就会滑动起来。
一切正常，但有一件事:当窗格向上滑动时，地图的宽度会发生变化，因此中心会向右移动(窗格在左侧)。这真的很不方便，特别是对于小分辨率，在窗格打开后你甚至看不到中心。
我试过“调整大小”触发器，但它似乎不起作用...有什么想法吗？
非常感谢！
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-12-19 17:22:08
自己调用resize不会得到你需要的东西。
您需要做的是首先(在调整大小之前)获取地图的当前中心
var currCenter = map.getCenter();然后，在调整div的大小后，您需要执行类似以下的操作。
google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);应该能起到作用
更新2018-05-22
随着地图JavaScript API3.32版中新的渲染器版本的发布，调整大小事件不再是Map类的一部分。
文档声明
调整地图大小时，地图中心是固定的
- 全屏控制现在保留了中心。
- There不再需要触发resize事件manually.
来源：https://developers.google.com/maps/documentation/javascript/new-renderer
从版本3.32开始，google.maps.event.trigger(map, "resize");不起任何作用
Stack Overflow用户
发布于 2012-08-04 06:05:06
首先为当前中心设置一个变量，然后使用事件侦听器检测调整大小，然后设置中心。
//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);
});Stack Overflow用户
发布于 2012-04-04 06:47:18
omarello确实有效，但我不能对它赞誉有加。您可能忘记了引用定义中心坐标的var。所有"resize“所做的就是拉出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);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8558226
复制相关文章
相似问题
腾讯云开发者
