时间戳

首页 > 解决方案 > 如何保存地理位置？

javascript - 如何保存地理位置？

问题描述

好吧，我知道这可能真的很容易，但我知道的不多哈哈。所以我想做的是保存我当前的位置。因此，使用此代码，我可以获得当前的纬度和经度，但我将如何保存它并能够查看我保存的所有位置。我试图让一个按钮转到如果按下我将能够查看我保存的不同位置。

<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Get Location</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
} else { 
    x.innerHTML = "Geolocation is not supported by this browser.";}
}

function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude;
}
</script>

标签： javascripthtmlgeolocationsavelocation

解决方案

此处，如果该位置先前已在 localStorage 中设置，则当用户单击该位置对象存储在 localStorage 中的按钮时，将打印该位置。

这是现场演示

<!DOCTYPE html>
    <html>
    <body>
      <p id="prevLoc"></p>
    <p>Click the button to get your coordinates.</p>

    <button onclick="getLocation()" id="getLoc">Get Location</button>

    <p id="demo"></p>

    <script>
      if(localStorage.getItem("loc")) {
        // json to object
       var loc = JSON.parse(localStorage.getItem("loc")); document.querySelector("#prevLoc").innerHTML= `<b>PREVIOUS LOCATION</b><br />LAT:${loc.lat} LONG: ${loc.long}`;
      }
    var x = document.getElementById("demo");

    function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";}
    }

    function showPosition(position) {
      localStorage.setItem("loc", JSON.stringify({
        "lat": position.coords.latitude,
        "long": position.coords.longitude
      }));
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
    }
    </script>
      </body>
    </html>

推荐阅读