增加地图容器大小的宽度而不移动地图

Question

我的项目中有一个包含谷歌地图的地图视图页面。在我的完整视图中，地图容器占据了容器的70％（宽度）和30％（宽度），这是与地图标记对应的列表视图。右侧角落有一个箭头按钮的侧面容器，每当我点击按钮时，侧面容器应该隐藏并且地图容器应该在完整视图中显示（从70％到100％）而不移动地图

Answer 1

您需要采取三个步骤。

1. 使用JavaScript调整地图容器的大小
2. 计算地图中心的像素偏移量并将其应用于地图
3. 触发resize事件以加载
之前未显示的切片

下面是一个工作示例（请参见JSFiddle）。

HTML

<div id="map"></div>
<button id="toggle">Toggle</button>

CSS

#map {
    width: 70%;
    height: ...
}

的JavaScript

var state = 0;

$(document).ready(function() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(52.5167, 13.3833),
        zoom:   11
    });

    $('#toggle').click(function() {
        var width, offste;

        if ((state++ % 2) == 0) {
            width = 100;
            offset = $('#map').outerWidth() * (1.0 - 1.0 / 0.7) / 2.0 ;
        } else {
            width = 70;
            offset = $('#map').outerWidth() * (1.0 - 0.7) / 2.0 ;
        }

        $('#map').css('width', width + '%'); 
        map.panBy(offset, 0);
        google.maps.event.trigger(map, 'resize');
    });
});

请注意，您可能需要根据具体情况调整宽度和偏移计算。