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

我不想使用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/

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

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

Answer 2

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

Answer 3

我还需要保存用户所在的地图类型。下面是一个更新的示例，该示例保存地图类型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/

刷新后，Google地图会保留缩放和居中吗？

3 个答案: