Google Haritalar, yenilendikten sonra yakınlaştırmayı ve ortalamayı koru?

Question

Bir HTTP yenilemesinden sonra Google Haritalar'ın kullanıcının görünümünü (yakınlaştırma düzeyi ve merkez noktası) koruyabilmesini nasıl sağlayabilirim?

Şu anda, her yenileme sonrasında görünümü sıfırlar. Aşağıda "zoom: geçerli yakınlaştırma seviyesi" ve "merkez: geçerli merkez yeri" demek için kodunu değiştirebilir miyim?

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

Ben http://test.barrycarter.info/sunstuff.html için bunu yapmak için başka yollar anladım var ama onlar oldukça zor hepsi konum.

Answer 1

Bu verileri bir çerezde saklamanız, ardından değerleri almak için tanımlama bilgisini okumanız veya çerez yoksa, varsayılan değerleri kullanmanız gerekir. zoom_changed'da bir etkinlik dinleyicisine sahip olun ve map.getZoom() kullanın, ardından yakınlaştırma düzeyini çerezde saklayın. Ve aynı şekilde center_changed'da bir olay dinleyicisi var ve merkez noktası koordinatlarını tanımlama bilgisine kaydetmek için map.getCenter() kullanın. Ya da muhtemelen bounds_changed içine sarın.

Answer 2

bu deneyin:

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

Ben Çerezler kullanmak istemedim bu yüzden localStorage kullanarak başka bir yöntemi yarattı.

HTML

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

JS JSFiddle için

$(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();  
     }); 
    } 
}); 

Bağlantı: okyanusun ortasında başladığı için http://jsfiddle.net/x11joex11/G4rdm/10/

Sadece uzaklaştırarak harita etrafında hareket ve sonra tekrar koşmaya başla veya sayfayı yenile ve hatırladığını göreceksin konum ve yakınlaştırma.

Kullanıcının ekranını tava veya etkinlik mesajlarının "center_changed" ve "zoom_changed"