Faire Google Maps conserver zoom et du centre, après rafraîchissement?

Comment puis-je faire Google Maps conserver le point de vue (niveau de zoom et
center point) après un HTTP actualiser?

Droit maintenant, il réinitialise la vue après chaque actualisation. Puis-je modifier le code
ci-dessous-à-dire "zoom: niveau de zoom actuel" et "center: centre actuel
emplacement" en quelque sorte?

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

J'ai trouvé quelques autres façons de le faire pour
http://test.barrycarter.info/sunstuff.html mais ils sont tous
considérablement plus difficile.

OriginalL'auteur barrycarter | 2011-10-31

google-maps

Essayez ceci:

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

Excellente solution! Merci!!!!
excellente solution, mais pas de solution pour le mapTypeId...
Génial! Il fonctionne très bien!

OriginalL'auteur JPMox

Je ne voulais pas utiliser de Cookies, j'ai donc créé une autre méthode à l'aide de 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();     
        });
    }
});

Lien vers JSFiddle: http://jsfiddle.net/x11joex11/G4rdm/10/

Il suffit de déplacer autour de la carte en zoomant depuis il commence au milieu de l'océan, puis appuyez de nouveau l'exécution ou à l'actualisation de la page et vous verrez qu'elle se souvient de la position et le zoom.

Il stocke à localStorage chaque fois que l'utilisateur fait défiler l'écran ou de zooms merci pour les messages d'événement "center_changed" et "zoom_changed"

Cela fonctionne très bien. Merci à vous.

OriginalL'auteur Joseph Astrahan

2

Vous auriez besoin de stocker ces données dans un cookie, puis lire à partir du cookie pour obtenir les valeurs, ou utiliser les valeurs par défaut si le cookie n'existe pas. Avoir un écouteur d'événement sur zoom_changed, et l'utilisation map.getZoom(), puis enregistrez le niveau de zoom pour le cookie. Et même ont un écouteur d'événement sur center_changed et l'utilisation map.getCenter() pour sauver le centre le point de coordonnées pour le cookie. Ou peut-être les envelopper à la fois en bounds_changed.

OriginalL'auteur duncan

Vous devez vous connecter pour publier un commentaire.