Czy Google Maps zachowuje powiększenie i wyśrodkowanie po odświeżeniu?

Question

Co zrobić, aby Mapy Google zachowywały widok użytkownika (poziom powiększenia i punkt centralny) po odświeżeniu HTTP?

Teraz resetuje widok po każdym odświeżeniu. Czy mogę poprawić kod poniżej, aby powiedzieć "zoom: bieżący poziom powiększenia" i "centrum: bieżące centrum lokalizacja" w jakiś sposób?

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

I zorientowali się jakieś inne sposoby to zrobić dla http://test.barrycarter.info/sunstuff.html ale oni wszystko znacznie trudniejsze.

Answer 1

Musisz przechowywać te dane w pliku cookie, następnie odczytać z pliku cookie, aby uzyskać wartości lub użyć wartości domyślnych, jeśli plik cookie nie istnieje. Masz detektor zdarzeń na zoom_changed i użyj map.getZoom(), a następnie zapisz poziom powiększenia do pliku cookie. I podobnie, należy użyć detektora zdarzeń pod numerem center_changed i użyć map.getCenter(), aby zapisać współrzędne punktu środkowego w pliku cookie. Ewentualnie można je zawinąć do bounds_changed.

Answer 2

Spróbuj tego:

// 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 3

nie chcą wykorzystywać cookies więc tworzone przy użyciu innej metody 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();  
     }); 
    } 
}); 

Link do JSFiddle: http://jsfiddle.net/x11joex11/G4rdm/10/

Wystarczy poruszać się po mapie pomniejszając ponieważ rozpoczyna się w środku oceanu a następnie uruchom ponownie lub odśwież stronę, a zobaczysz ją zapamiętuje pozycja i zoom.

Przechowuje do localStorage każdym razem, gdy użytkownik patelnie ekranu lub powiększa dzięki komunikatów o zdarzeniach "center_changed" i "zoom_changed"