javascript - 在不移动 map 的情况下增加 map 容器大小的宽度

Question

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

Answer 1

你需要采取三个步骤。

使用 JavaScript 调整 map 容器的大小

计算 map 中心的像素偏移并将其应用于 map

触发调整大小事件以加载

之前未显示的图 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');
    });
});

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