Làm cho Google Maps giữ lại thu phóng và trung tâm sau khi làm mới?

Question

Làm cách nào để làm cho Google Maps giữ lại chế độ xem của người dùng (mức thu phóng và điểm trung tâm) sau khi làm mới HTTP?

Ngay bây giờ, cài đặt này sẽ đặt lại chế độ xem sau mỗi lần làm mới. Tôi có thể tinh chỉnh mã bên dưới để nói "thu phóng: mức thu phóng hiện tại" và "center: current center location" bằng cách nào đó?

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

tôi đã tìm ra một số cách khác để làm điều này cho http://test.barrycarter.info/sunstuff.html nhưng tất cả họ đang đáng kể khó khăn hơn.

Answer 1

Bạn cần lưu trữ dữ liệu này trong cookie, sau đó đọc từ cookie để lấy giá trị hoặc sử dụng giá trị mặc định nếu cookie không tồn tại. Có trình xử lý sự kiện trên zoom_changed và sử dụng map.getZoom(), sau đó lưu mức thu phóng vào cookie. Và tương tự như vậy có một người nghe sự kiện trên center_changed và sử dụng map.getCenter() để lưu tọa độ điểm trung tâm vào cookie. Hoặc có thể bọc chúng cả hai thành bounds_changed.

Answer 2

Hãy thử điều này:

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

Tôi không muốn sử dụng Cookies vì ​​vậy tôi tạo ra một phương pháp bằng 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();  
     }); 
    } 
}); 

Liên kết đến JSFiddle: http://jsfiddle.net/x11joex11/G4rdm/10/

Chỉ cần di chuyển xung quanh bản đồ bằng cách thu nhỏ kể từ khi nó bắt đầu ở giữa đại dương và sau đó nhấn chạy lại hoặc làm mới trang và bạn sẽ thấy nó ghi nhớ vị trí và thu phóng.

Nó lưu trữ để LocalStorage mỗi khi người dùng chảo màn hình hoặc phóng to nhờ những thông điệp sự kiện "center_changed" và "zoom_changed"