Блог

Главная - Вопросы по программированию - Как сохранить геолокацию (отображаемую с помощью Googlemaps) в локальном хранилище и загрузить ее позже

Как сохранить геолокацию (отображаемую с помощью Googlemaps) в локальном хранилище и загрузить ее позже

#javascript #geolocation

#javascript #геолокация

Вопрос:

У меня проблема с геолокацией и локальным хранилищем. Итак, ниже приведен мой код. Извините, что часть текста написана кириллицей, но это потому, что это мое домашнее задание, а я из Болгарии. Не важно, что говорится в тексте. Вам нужно знать только, что первая кнопка — Получить, вторая — Сохранить, третья — Загрузить. Итак, мне пришлось сделать первую кнопку, чтобы показать мое местоположение с помощью Google Maps — это нормально. Я заставил это работать. Следующая сложная часть. С помощью второй кнопки «Сохранить» я должен сохранить данные из геолокации в локальное хранилище. И при нажатии на третью кнопку Загрузить — местоположение, сохраненное в локальном хранилище, должно снова появиться на (div id =»карта). Я пробовал использовать разные предложения, но каждый раз что-то не работает. Пожалуйста, если кто-нибудь может помочь мне хотя бы с идеальным вариантом. И самое главное, мне не разрешено использовать jQuery, только Java Script. Если у вас есть вопросы и вы не понимаете какую-либо часть кода, пожалуйста, спросите меня, и я буду рад объяснить или переписать это. Я хочу заранее поблагодарить вас за вашу помощь. P.S. Я новичок в программировании, поэтому я могу задавать глупые вопросы.Пожалуйста, наберитесь терпения.

 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   "amp;zoom=14amp;size=400x300amp;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;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>

Ответ №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;

Комментарии:

1. Спасибо, приятель. Я последовал вашему совету, и это сработало. Я также добавил два окна оповещения, чтобы показать мне, когда мое местоположение сохраняется и каковы координаты загрузки. Спасибо за вашу помощь. Ценю это.

2. Привет. Это снова я. У меня небольшая проблема. Есть ли способ сохранить координаты, но без запроса поделиться местоположением. Я имею в виду, что с помощью этого кода, когда я хочу сохранить уже загруженное местоположение, он снова загружает мне разрешение поделиться им, а затем сохраняет его. Я хочу просто сохранить уже загруженную из предыдущего местоположения функцию.

3. Что вы можете сделать, так это сохранить текущее отображаемое местоположение в промежуточных (глобальных) переменных, чтобы при нажатии кнопки Сохранить вы просто сохраняли в localStorage то, что содержится в этих переменных, вместо повторного вызова navigator.geolocation.getCurrenPosition. Другими словами, вы вызываете navigator.geolocation.getCurrenPosition только один раз, когда пользователь нажимает на getLocation.