새로 고침 후 Google지도가 확대 된 상태로 유지 되나요?

Question

HTTP 새로 고침 후 Google지도에서 사용자보기 (줌 레벨 및 중심점)를 유지하도록하려면 어떻게해야합니까?

지금은 새로 고침 후보기를 다시 설정합니다. 아래 코드 을 조정하여 "zoom : 현재 확대/축소"및 "center : 현재 센터 location"이라고 할 수 있습니까?

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

쿠키에이 데이터를 저장 한 다음 값을 얻기 위해 쿠키를 읽거나 쿠키가없는 경우 기본값을 사용해야합니다. zoom_changed에 이벤트 리스너를 가지고 map.getZoom()을 사용하고 확대/축소 수준을 쿠키에 저장합니다. 마찬가지로 이벤트 리스너를 center_changed에두고 map.getCenter()을 사용하여 중심점 좌표를 쿠키에 저장합니다. 또는 둘 모두를 bounds_changed에 넣을 수도 있습니다.

Answer 2

이 시도 :

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

쿠키를 사용하지 않았다 그래서는 로컬 스토리지를 사용하여 다른 방법을 만들었습니다.

HTML

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

JS JSFiddle에

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

링크 : 그것은 바다의 중간에 시작부터 http://jsfiddle.net/x11joex11/G4rdm/10/

그냥 축소하여지도를 이동 다시 실행하거나 페이지를 새로 고침하면 기억할 것입니다. 위치 및 줌.

그것은 사용자가 화면을 팬 또는 이벤트 메시지 "center_changed" 및 "zoom_changed"