如何在HTTP刷新后使Google Maps保留用户的视图（缩放级别和中心点）？
现在，每次刷新后都会重置视图。我能否通过调整下面的代码来实现“缩放：当前缩放级别”和“中心点：当前中心位置”？
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
尝试这个：
// 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 "";
}
<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中。
您需要将这些数据存储在cookie中，然后从cookie中读取值，如果cookie不存在，则使用默认值。在zoom_changed上添加事件侦听器，使用map.getZoom()，然后将缩放级别保存到cookie中。同样，在center_changed上添加事件侦听器，并使用map.getCenter()将中心点坐标保存到cookie中。或者可能将它们都包装在bounds_changed中。
我需要保存用户所在的地图类型。下面是一个更新的示例，保存地图类型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();
});
}});