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类的一部分。

文档说明

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



全屏控制现在保留了中心。



无需再手动触发调整大小事件。

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

从版本3.32开始，

google.maps.event.trigger(map, "resize");没有任何影响

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

oprello确实有效，但我不能赞成它。您可能忘记参考定义中心坐标的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);
        }); 
    });

Answer 4

Hy试试这个;）

在地图初始化

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

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

4 个答案: