谷歌地圖在響應式地圖不中心地圖

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

未經檢驗的，但你的想法...