使Google地圖在刷新後保持縮放和居中？

如何讓Google地圖在HTTP刷新後保留用戶的視圖（縮放級別和中心點）？使Google地圖在刷新後保持縮放和居中？

現在，它會在每次刷新後重置視圖。我可以調整下面的代碼來說「縮放：當前縮放級別」和「中心：當前中心位置」嗎？

function initialize() { 
    var myLatLng = new google.maps.LatLng(0,0); 
    var myOptions = { 
    zoom: 2, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    };

我已經找到了一些其他的方式來爲 http://test.barrycarter.info/sunstuff.html做到這一點，但他們都相當困難。

來源

2011-10-31 barrycarter

您需要將此數據存儲在cookie中，然後從cookie中讀取值以獲取值，或者如果cookie不存在，則使用默認值。在zoom_changed上有一個事件監聽器，並使用map.getZoom()，然後將縮放級別保存到cookie中。同樣在center_changed上有一個事件監聽器，並使用map.getCenter()將中心點座標保存到cookie中。或者可能可以將它們包裝到bounds_changed中。

來源

2011-10-31 13:44:12 duncan

試試這個：

// you could use the event listener to load the state at a certain point 
loadMapState(); 

// as a suggestion you could use the event listener to save the state when zoom changes or drag ends 
google.maps.event.addListener(map, 'tilesloaded', tilesLoaded); 
function tilesLoaded() { 
    google.maps.event.clearListeners(map, 'tilesloaded'); 
    google.maps.event.addListener(map, 'zoom_changed', saveMapState); 
    google.maps.event.addListener(map, 'dragend', saveMapState); 
} 


// functions below 

function saveMapState() { 
    var mapZoom=map.getZoom(); 
    var mapCentre=map.getCenter(); 
    var mapLat=mapCentre.lat(); 
    var mapLng=mapCentre.lng(); 
    var cookiestring=mapLat+"_"+mapLng+"_"+mapZoom; 
    setCookie("myMapCookie",cookiestring, 30); 
} 

function loadMapState() { 
    var gotCookieString=getCookie("myMapCookie"); 
    var splitStr = gotCookieString.split("_"); 
    var savedMapLat = parseFloat(splitStr[0]); 
    var savedMapLng = parseFloat(splitStr[1]); 
    var savedMapZoom = parseFloat(splitStr[2]); 
    if ((!isNaN(savedMapLat)) && (!isNaN(savedMapLng)) && (!isNaN(savedMapZoom))) { 
     map.setCenter(new google.maps.LatLng(savedMapLat,savedMapLng)); 
     map.setZoom(savedMapZoom); 
    } 
} 

function setCookie(c_name,value,exdays) { 
    var exdate=new Date(); 
    exdate.setDate(exdate.getDate() + exdays); 
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); 
    document.cookie=c_name + "=" + c_value; 
} 

function getCookie(c_name) { 
    var i,x,y,ARRcookies=document.cookie.split(";"); 
    for (i=0;i<ARRcookies.length;i++) 
    { 
     x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); 
     y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); 
     x=x.replace(/^\s+|\s+$/g,""); 
     if (x==c_name) 
     { 
     return unescape(y); 
     } 
     } 
    return ""; 
}

來源

2011-11-09 02:11:00 JPMox

的最佳解決方案縮小了！謝謝！ – AVEbrahimi

偉大的解決方案，但沒有修復mapTypeId ... – Stefanvds

太棒了！它很棒！ – qub1n

我不想使用cookies所以我創建使用localStorage的另一種方法。

HTML

<div id="map-canvas" style="width:100%;height:500px;"></div>

$(document).ready(function(){ 
    //Global Variables 
    var mapCentre; 
    var map; 

    initialize(); 

    function initialize() { 
     var mapOptions; 

     if(localStorage.mapLat!=null && localStorage.mapLng!=null && localStorage.mapZoom!=null){ 
      mapOptions = { 
       center: new google.maps.LatLng(localStorage.mapLat,localStorage.mapLng), 
       zoom: parseInt(localStorage.mapZoom), 
       scaleControl: true 
      }; 
     }else{ 
      //Choose some default options 
      mapOptions = { 
       center: new google.maps.LatLng(0,0), 
       zoom: 11, 
       scaleControl: true 
      }; 
     } 

     //MAP 
     map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 

     mapCentre = map.getCenter(); 

     //Set local storage variables. 
     localStorage.mapLat = mapCentre.lat(); 
     localStorage.mapLng = mapCentre.lng(); 
     localStorage.mapZoom = map.getZoom(); 

     google.maps.event.addListener(map,"center_changed", function() { 
      //Set local storage variables. 
      mapCentre = map.getCenter(); 

      localStorage.mapLat = mapCentre.lat(); 
      localStorage.mapLng = mapCentre.lng(); 
      localStorage.mapZoom = map.getZoom();  
     }); 

     google.maps.event.addListener(map,"zoom_changed", function() { 
      //Set local storage variables. 
      mapCentre = map.getCenter(); 

      localStorage.mapLat = mapCentre.lat(); 
      localStorage.mapLng = mapCentre.lng(); 
      localStorage.mapZoom = map.getZoom();  
     }); 
    } 
});

鏈接的jsfiddle：http://jsfiddle.net/x11joex11/G4rdm/10/

在地圖上四處只需移動通過縮小，因爲它在海洋中開始然後再次運行或刷新頁面，您會看到它記住位置和縮放。

它存儲到localStorage的每個用戶平移屏幕或感謝事件消息"center_changed"和"zoom_changed"

來源

2014-01-01 07:33:23

這很好。謝謝。 –

使Google地圖在刷新後保持縮放和居中？

回答

相關問題