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

现在我想这样做，当我的用户点击＆＃34; geolocated me！＆＃34;按钮第一次，所有细节都持续存在，I.E。当用户重新启动演示并再次单击该按钮时，他之前访问的值应该保持不变，我知道本地存储和cookie可以在JS中用于持久性，但我不确定 {{3的哪些部分脚本应该是持久的，哪些不应该，有人能给我一些线索吗？，我必须在本地存储什么值，以便当用户点击＆＃34; geolocate me！＆＃34;按下周围的时间，值从他的机器本地恢复，而不是滞后。

我相信我必须在以下函数中的某处使用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)) + '°', '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();
}

您还可以添加按钮还原最后位置，或在 Geolocate me 按钮中使用此按钮。

将此称为忘记职位：

localStorage.removeItem("lastPosition");

如何在本地为用户保存地图值时间访问

1 个答案: