在容器更改宽度后重新输入Google地图

Question

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

一切正常,但有一点:当窗格向上滑动时,地图的宽度会发生变化,因此中心向右移动(窗格在左侧).它真的很不方便,特别是对于小分辨率,在窗格打开后你甚至看不到中心.

我尝试了'调整大小'触发器,但它似乎不起作用......有什么想法吗？

非常感谢 !

Answer 1

resize通过自我呼唤将无法实现您的需求.

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

var currCenter = map.getCenter();

然后,在调整div的大小后,需要执行以下操作.

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

应该做的伎俩

更新2018-05-22

使用Maps JavaScript API版本3.32中的新渲染器版本,resize事件不再是Map类的一部分.

文件说明

调整地图大小后,地图中心将固定

• 全屏控制现在保留了中心.

• 不再需要手动触发resize事件.

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

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

Answer 2

首先为当前中心设置一个变量,然后使用事件监听器来检测调整大小,从而设置中心.

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

Answer 3

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