使Google地图在刷新后保持缩放和居中？ [英] Make Google Maps retain zoom and center after refresh?

问题描述

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

现在，它会在每次刷新后重置视图。我可以调整下面的代码
，以某种方式说缩放：当前缩放级别和中心：当前中心
位置吗？

 函数初始化（）{
 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 ，但它们都比
更难。

解决方案

试试这个：

  //你可以使用事件监听器来加载某个点的状态
 loadMapState（）; 
 
 //作为一个建议，您可以使用事件侦听器在缩放更改或拖动结束时保存状态
 google.maps.event.addListener（map，'tilesloaded'，tilesLoaded）; 
函数tilesLoaded（）{
 google.maps.event.clearListeners（map，'tilesloaded'）; 
 google.maps.event.addListener（map，'zoom_changed'，saveMapState）; 
 google.maps.event.addListener（map，'dragend'，saveMapState）; 
 
 
 
 //在
 
之下的函数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）; 
 
 
函数loadMapState（）{
 var gotCookieString = getCookie（myMapCookie）; 
 var splitStr = gotCookieString.split（_）; 
 var savedMapLat = parseFloat（splitStr [0]）; 
 var savedMapLng = parseFloat（splitStr [1]）; 
 var savedMapZoom = parseFloat（splitStr [2]）; （（！isNaN（savedMapLat））&&（！isNaN（savedMapLng））&&（！isNaN（savedMapZoom）））{
 map.setCenter（new google.maps。经纬度（savedMapLat，savedMapLng））; 
 map.setZoom（savedMapZoom）; 
 
 
 
函数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; 
 
 
函数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; 
} 
  

How do I make Google Maps retain the user's view (zoom level and center point) after an HTTP refresh?

Right now, it resets the view after each refresh. Can I tweak the code below to say "zoom: current zoom level" and "center: current center location" somehow?

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

I have figured out some other ways to do this for http://test.barrycarter.info/sunstuff.html but they're all considerably harder.

解决方案

Try this:

// 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 "";
}

这篇关于使Google地图在刷新后保持缩放和居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！