Question

我遇到地理定位和本地存储问题。所以下面是我的代码。对不起，有些文字是西里尔文，但这是因为这是我的作业，我来自保加利亚。文本所说的并不重要。您只需要知道第一个按钮是Get，第二个 - Save，第三个按钮 - Load。所以我必须先制作第一个按钮，用Google地图显示我的位置 - 没关系。我做到了。接下来是棘手的部分。使用第二个按钮“保存”，我必须将数据从地理位置保存到本地存储。当点击第三个按钮加载时 - 保存在本地存储中的位置应该再次显示在（div id =“map”）中。我尝试使用不同的建议，但每次都没有工作。如果有人能帮我理解至少。最重要的是我不允许使用JQuery，只使用Java Script。如果您有任何疑问并且您不理解代码的任何部分，请询问我，我将很乐意解释或重写它。我想提前感谢你的帮助。附：我是编码的初学者，这就是我可能会问愚蠢问题的原因。请耐心等待。

var x = document.getElementById("map");

function getLocation() {
  if (navigator.geolocation) {
    x.style.visibility = "visible";
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  var latlon = position.coords.latitude + "," + position.coords.longitude;

  var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false";
  document.getElementById("map").innerHTML = "<img src='" + img_url + "'>";
}

function showError(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

#text {
  width: 100%;
  margin-bottom: 15px;
}
#buttons {
  width: 100%;
  background-color: #8c8c8c;
  color: white;
  border: 2px solid #8c8c8c;
  padding-top: 2px;
}
#map {
  width: 100%;
  border: 2px solid #8c8c8c;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  visibility: hidden;
  background-color: #cccace;
}
.buttons {
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

<body>
<div id="text">Домашна върху HTML5 API &amp; Rounded Corners</div>
<div id="buttons">
  Местоположение:
  <input type="button" class="buttons" value="Вземи" onclick="getLocation()" />
  <input type="button" class="buttons" value="Запази" onclick="saveLocation" />
  <input type="button" class="buttons" value="Зареди" onclick="loadLocation" />
</div>
<div id="map"></div>
</body>

Answer 1

要保存地理定位，您只需将其存储为关联数组：

navigator.geolocation.getCurrentPosition(function(p){
   localStorage.setItem("latitude", p.coords.latitude);
   localStorage.setItem("longitude", p.coords.longitude)
}, function(e){console.log(e)})

稍后您只需加载它：

var lat = localStorage.latitude;
var lon = localStorage.longitude;

如何在本地存储中保存地理位置（与Googlemaps一起显示）并在以后加载

1 个答案: