javascript - 增加 map 容器大小的宽度而不移动 map

Question

我的项目中有一个 map View 页面，其中包含谷歌地图。在我的完整 View 中， map 容器占用侧容器的 70%(宽度)和 30%(宽度)，侧容器是与 map 标记对应的 ListView 。侧面容器的右上角有一个箭头按钮，每当我单击该按钮时，侧面容器应隐藏， map 容器应显示在完整 View 中(从 70% 到 100%)不移动 map .

Answer 1

您需要采取三个步骤。

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

下面是一个工作示例(请在 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');
    });
});

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