响应式地图中的谷歌地图不居中地图

Question

我对谷歌地图有疑问。我将它嵌入到响应式网络中。一切都很好，地图的行为很敏感，但是当我更改窗口大小时，例如在手机上打开页面时，它只是从地图中切出，当它调整大小时，但我需要它来使地图居中。我需要这些位置仍然可见，但我不知道该怎么做。有人可以帮我吗？希望我的问题可以理解。谢谢。

API 调用：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

JS代码：

function initialize() {
    var myLatlng = new google.maps.LatLng(48.652645, 21.083107);
    var mapOptions = {
        zoom: 11,
        center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    setMarkers(map, beaches);
}

var beaches = [
    ['xxxx'],
    ['xxxx']
];

function setMarkers(map, locations) {
    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map
        });
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

1. 创建一个bounds 全局变量。
2. 添加标记时扩展边界对象。
3. 在调整窗口大小时，触发地图调整大小并使地图适合边界对象。

全局变量：

var bounds = new google.maps.LatLngBounds();

在setMarkers 函数中扩展边界：

for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map
    });

    bounds.extend(myLatLng);
}

将此添加到您的 initialize 函数中：

window.addEventListener("resize", resizeUI);

创建调整大小函数：

function resizeUI() {

    google.maps.event.trigger(map, 'resize');
    map.fitBounds(bounds);
}

未经测试，但你明白了......