如何在本地保存地图值，供用户第二次访问

Question

我只是在看一个 openlayers3 的例子，当他点击定位我按钮时，用户的位置被检索，参见演示 HERE，我是使用 openlayers3，基本上这个小演示的代码如下：

// Geolocation Control
var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
    projection: view.getProjection(),
    trackingOptions: {
        maximumAge: 10000,
        enableHighAccuracy: true,
        timeout: 600000
    }
}));

var deltaMean = 500; // the geolocation sampling period mean in ms

// Listen to position changes
geolocation.on('change', function(evt) {
    var position = geolocation.getPosition();
    var accuracy = geolocation.getAccuracy();
    var heading = geolocation.getHeading() || 0;
    var speed = geolocation.getSpeed() || 0;
    var m = Date.now();

    addPosition(position, heading, m, speed);

    var coords = positions.getCoordinates();
    var len = coords.length;
    if (len >= 2) {
        deltaMean = (coords[len - 1][3] - coords[0][3]) / (len - 1);
    }

    var html = [
        'Position: ' + position[0].toFixed(2) + ', ' + position[1].toFixed(2),
        'Accuracy: ' + accuracy,
        'Heading: ' + Math.round(radToDeg(heading)) + '&deg;',
        'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
        'Delta: ' + Math.round(deltaMean) + 'ms'
    ].join('<br />');
    document.getElementById('info').innerHTML = html;
});

也可以看到HERE

现在我想让它在用户第一次单击 "geolocated me!" 按钮时保留所有详细信息，即当用户重新访问演示并再次单击按钮时，他之前访问的值应该被保留，我知道 localstorage 和 cookies 可以在 JS 中用于持久性，但我不太确定 THIS 脚本应该保留，哪些不应该保留，任何人都可以给我一个线索吗？，我必须在本地存储什么值，以便当用户第二次单击 "geolocate me!" 按钮时，这些值将从他的机器本地检索，而不是出现滞后。

我相信我必须在以下函数的某处使用 localstorage:

// Geolocation Control
var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
    projection: view.getProjection(),
    trackingOptions: {
        maximumAge: 10000,
        enableHighAccuracy: true,
        timeout: 600000
    }
}));

var deltaMean = 500; // the geolocation sampling period mean in ms

// Listen to position changes
geolocation.on('change', function(evt) {
    var position = geolocation.getPosition();
    var accuracy = geolocation.getAccuracy();
    var heading = geolocation.getHeading() || 0;
    var speed = geolocation.getSpeed() || 0;
    var m = Date.now();

    addPosition(position, heading, m, speed);

    var coords = positions.getCoordinates();
    var len = coords.length;
    if (len >= 2) {
        deltaMean = (coords[len - 1][3] - coords[0][3]) / (len - 1);
    }

    var html = [
        'Position: ' + position[0].toFixed(2) + ', ' + position[1].toFixed(2),
        'Accuracy: ' + accuracy,
        'Heading: ' + Math.round(radToDeg(heading)) + '&deg;',
        'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
        'Delta: ' + Math.round(deltaMean) + 'ms'
    ].join('<br />');
    document.getElementById('info').innerHTML = html;
});

Answer 1

如果您使用缓存值，我认为您不应该直接更改 geolocation 位置。我也不认为你应该记住位置以外的任何东西，因为 accuracy、speed 和标题经常变化，任何缓存值都完全无关紧要。

您可以根据需要修改我的输入，但我相信处理此问题的最佳方法是在页面加载时加载最后的用户位置。我用这个将最后一个位置保存到 localStorage:

geolocation.addEventListener("change", function() {
     localStorage["lastPosition"] = this.getPosition().join(",");
});

这在地图加载的某个地方：

if(localStorage["lastPosition"]) {
    geolocation.set('position', localStorage["lastPosition"]
                    .split(",")                   // Split numbers
                    .map(function(x){return 1*x;})// Convert strings to numbers
    );
    geolocation.changed();
    map.render();
}

您还可以添加按钮恢复上次位置，或在您的地理定位我按钮中使用此按钮。

调用这个忘记位置：

localStorage.removeItem("lastPosition");

如何在本地保存地图值，供用户第二次访问

How to save map values locally for the users secound time visit

javascript

openlayers-3