Заставить Google Карты сохранять масштаб и центр после обновления?

Question

Как сделать так, чтобы Карты Google сохраняли вид пользователя (уровень масштабирования и центральную точку) после обновления HTTP?

Прямо сейчас, это сбрасывает представление после каждого обновления.Могу ли я как-то настроить код, чтобы сказать «увеличение: текущий уровень масштабирования» и «центр: текущее расположение центра»?

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, но все они значительно сложнее.

Answer 1

Попробуйте это:

// 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 "";
}

Answer 2

Я не хотел использовать Cookies, поэтому я создал другой метод, используя localStorage.

HTML

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

JS

$(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/

Просто перемещайтесь по карте, уменьшая масштаб, так как она начинается в середине океана, а затем снова нажимайте кнопку run или обновите страницу, и вы увидите, что она запоминает положение и масштаб.

Он сохраняется в localStorage каждый раз, когда пользователь перемещает экран или увеличивает масштаб изображения благодаря сообщениям о событиях "center_changed" и "zoom_changed"

Answer 3

Вам нужно будет сохранить эти данные в cookie-файле, затем прочитать его, чтобы получить значения, или использовать значения по умолчанию, если cookie-файл не существует. Установите прослушиватель событий на zoom_changed и используйте map.getZoom(), затем сохраните уровень масштабирования в файле cookie. И аналогичным образом установите прослушиватель событий на center_changed и используйте map.getCenter(), чтобы сохранить координаты центральной точки в файле cookie. Или, возможно, может обернуть их обоих в bounds_changed.