使用標記對Google地圖進行響應式調整大小

我試圖讓Google地圖在響應地調整大小時保持其中心位置。使用標記對Google地圖進行響應式調整大小

我已經設法讓地圖居中，但不能解決如何將我的標記添加回JS以使其居中。我正在使用的代碼從這裏地圖中心... Google maps responsive resize

var map; //<-- This is now available to both event listeners and the initialize() function 
function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(LAT,LNG), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false, 
     scrollwheel: false, 
     keyboardShortcuts: false, 
    }; 

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);} 

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

google.maps.event.addDomListener(window, "resize", function() { 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
});

的代碼我使用地圖中心是上面。我也有下面的標記代碼，但我不確定如何添加它以使其保持中心。

var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(LAT,LNG), 
     map: map, 
     title: 'Title', 
     animation: google.maps.Animation.DROP, 
     }) 
    }

有人可以幫忙嗎？

來源

2013-12-11 Dijon

根據以下您的評論，您的問題是很不清楚。你想讓地圖始終以標記爲中心嗎？如果用戶平移地圖會發生什麼？此外，您正在處理的網站的鏈接總是有幫助的。 –

我希望頁面可以在地圖中心加載地圖和標記。如果用戶調整頁面大小，地圖和標記應保留在中心。我可以讓地圖做到這一點，但我無法解決如何將標記的代碼添加到代碼的響應版本中。不會太煩擾當用戶平移地圖時會發生什麼，無論它保持居中在他們平移的位置還是重置到原始標記位置。 – Dijon

這裏是我正在工作的網站... http://www.haydockoffice.co.uk/contact/ – Dijon

這是第一步，讓你想要做什麼：

var map; //<-- This is now available to both event listeners and the initialize() function 
var mapCenter; // Declare a variable to store the center of the map 
var centerMarker; // declare your marker 

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(LAT,LNG), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false, 
     scrollwheel: false, 
     keyboardShortcuts: false, 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

    // Create a new marker and add it to the map 
    centerMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(LAT,LNG), 
     map: map, 
     title: 'Title', 
     animation: google.maps.Animation.DROP 
    }); 

    mapCenter = map.getCenter(); // Assign the center of the loaded map to the valiable 
} 



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

google.maps.event.addDomListener(window, "resize", function() { 

    // Here you set the center of the map based on your "mapCenter" variable 
    map.setCenter(mapCenter); 
});

編輯：基於@Chad Killingsworth評論：您可能希望將「空閒」事件處理程序添加到地圖設置mapCenter變量。你可以這樣實現這一點：

google.maps.event.addListener(map,'idle',function(event) { 
    mapCenter = map.getCenter(); 
});

從文檔的「空閒」事件的說明：

圖時變得平移或縮放後閒置此事件。

來源

2013-12-11 12:56:31 pascal

我會在'idle'事件監聽器中更新'mapCenter'：'google.maps.event.addListener （map，'idle'，function（）{mapCenter = map.getCenter（）;}）' –

@ChadKillingsworth感謝您的輸入，這非常有道理。我相應地更新了答案。 – pascal

嗨，大家好，感謝您的回覆，不太清楚您是否理解我的問題。我上面粘貼的代碼的第一部分確實可以讓地圖集中調整窗口的大小。我想要做的是在地圖上添加一個標記，並在調整大小時在標記上繪製地圖中心。我原本用於標記的代碼是我原始文章中的第二個代碼片段。我只需要知道如何將它們混合在一起。 – Dijon

使用標記對Google地圖進行響應式調整大小

回答

相關問題