javascript - 刷新网页时保持缩放

Question

大家晚上好。现在我正在开发一个 GPS 本地化 Web 服务器，我从 GPS 卡获取坐标到服务器中的端口嗅探器，它将坐标写入 SQL 数据库。 我遇到的问题是，我不断刷新网页以获取新数据，但如果用户在刷新时放大或缩小或移动中心，所有这些更改都会丢失。

这是 JS 片段:

    <script>
// functions below
//Make an array with the coordinates from the db
function initialize() {
    var posicion= [];
    for (var i=0; i< lat.length; i++){
    posicion.push(new google.maps.LatLng(lat[i], long[i])); // Add the coordinates
    }

  var mapOptions = {
    zoom: 16,
     center: posicion[lat.length-1],
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Render our map within the empty div

  var linea = new google.maps.Polyline({
  path: posicion,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  linea.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);  
</script>

Answer 1

您必须监听事件“bounds_changed”，然后将结果保存在 cookie 中。当您重新加载时，您将使用这些值作为缩放和居中的默认值

google.maps.event.addListener(map, 'bounds_changed', (function () {
  var centerTobeSavedOnCookie = map.getCenter();
  var zoomTobeSavedOnCookie = map.getZoom();
  // save values to cookies
  setCookie("gmapDefaultZoom", zoomTobeSavedOnCookie, 1);
  setCookie("gmapDefaultCenter", centerTobeSavedOnCookie , 1);
}()));

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}