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

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

全局变量：

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

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

响应式地图中的Google地图不会居中地图

1 个答案: