让谷歌地图在刷新后保持缩放和居中？

Question

如何让 Google 地图保留用户的视图（缩放级别和 中心点）在 HTTP 刷新后？

现在，它会在每次刷新后重置视图。我可以调整代码吗 下面说“缩放：当前缩放级别”和“中心：当前中心 位置”不知何故？

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

试试这个：

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

我不想使用 Cookie，所以我创建了另一个使用 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();     
        });
    }
});

JSFiddle 链接：http://jsfiddle.net/x11joex11/G4rdm/10/

只需通过缩小地图在地图上移动，因为它从海洋中间开始，然后再次点击运行或刷新页面，您会看到它记住了位置并缩放。

由于事件消息"center_changed" 和"zoom_changed"，每次用户平移屏幕或缩放时它都会存储到localStorage

Answer 3

您需要将此数据存储在 cookie 中，然后从 cookie 中读取以获取值，或者如果 cookie 不存在，则使用默认值。在zoom_changed 上有一个事件监听器，并使用map.getZoom()，然后将缩放级别保存到cookie。同样在center_changed 上有一个事件监听器并使用map.getCenter() 将中心点坐标保存到cookie。或者可以将它们都包装成bounds_changed。

Answer 4

我还需要保存用户所在的地图类型。以下是保存地图类型 ID 并重新加载它的更新示例。

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,
          mapTypeId: localStorage.mapType
        };
    }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();
    localStorage.mapType = map.getMapTypeId();
    
    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();
        localStorage.mapType = map.getMapTypeId();
    });
    
    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(); 
        localStorage.mapType = map.getMapTypeId();
    });
    
    google.maps.event.addListener(map,"maptypeid_changed", function() {
        //Set local storage variables.
        mapCentre = map.getCenter();
        
        localStorage.mapLat = mapCentre.lat();
        localStorage.mapLng = mapCentre.lng();
        localStorage.mapZoom = map.getZoom();
        localStorage.mapType = map.getMapTypeId();
    });
    


}});

http://jsfiddle.net/6wv1khnf/