accuracy в Geolocation API — точність координат у метрах

Загальний опис

accuracy у властивостях геолокації визначає, наскільки точні координати місця розташування, отримані через API Geolocation. Це значення залежить від налаштувань та методу отримання позиції. Чим вища точність, тим більше пристрій намагається використовувати точніші джерела даних, наприклад, GPS, Wi-Fi або мобільні мережі. Для контролю точності можна використовувати опцію { enableHighAccuracy: true }, яка активує вищу точність, але може збільшити час очікування та споживання батареї.

Метод navigator.geolocation.getCurrentPosition() приймає три параметри: функцію успіху, функцію обробки помилок і об'єкт параметрів, де задається { enableHighAccuracy: true }. Ця опція сприяє отриманню точнішої геолокації, хоча в деяких випадках різниця між стандартною і високою точністю може бути мінімальною. Параметр точності (accuracy) міститься у об’єкті coords, який повертає метод getCurrentPosition().

Приклад для отримання поточного місця розташування з високою точністю:

navigator.geolocation.getCurrentPosition(
  function (position) {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
    console.log("Accuracy:", position.coords.accuracy + " meters");
  },
  function (error) {
    console.error("Error Code:", error.code, "Message:", error.message);
  },
  { enableHighAccuracy: true }
);

Тут параметр accuracy (в метрах) визначає радіус, в межах якого знаходиться пристрій з імовірністю 95%. Наприклад, якщо accuracy дорівнює 10, це означає, що пристрій знаходиться в межах 10 метрів від заданих координат.

Опція enableHighAccuracy корисна для випадків, коли точність геолокації є критичною, наприклад, при створенні навігаційних застосунків або застосунків для активностей на природі, де потрібно максимально точне позиціонування.

правити

Порада

Змінюйте параметр точності динамічно: наприклад, якщо користувач знаходиться в місті, активуйте високу точність, а якщо на відкритій місцевості – можна залишити стандартну.

автор: Bond правити

Порада

У деяких браузерах та пристроях enableHighAccuracy працює не дуже стабільно або незначно покращує точність, особливо в приміщеннях; це залежить від якості сигналу GPS та інших факторів.

автор: Bond правити

Порада

Висока точність може збільшити час отримання координат, тому додайте сповіщення для користувача або індикатор завантаження, якщо очікування більше однієї-двох секунд.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

position.coords.accuracy

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	5	3.5	5	16	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	≤3

Приклади

+ запропонувати свій приклад у пісочниці

navigator.geolocation.watchPosition(
  (position) => {
    if (position.coords.accuracy <= 20) { // Приклад порогу точності в метрах
      console.log("Latitude:", position.coords.latitude);
      console.log("Longitude:", position.coords.longitude);
      console.log("Accuracy:", position.coords.accuracy + " meters");
    }
  },
  (error) => console.error("Error:", error),
  { enableHighAccuracy: true }
);

<header>
  <h2 class="title">Geolocation -> accuracy</h2>
  <p class="description">Виводить точність визначення місцезнаходження користувача у метрах.</p>
</header>
<main>
  <div class="result">
    <button id="getLocationBtn">Отримати точність геолокації</button>
    <p id="accuracyOutput">Точність: не визначено</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

p {
  font-size: 18px;
  color: #333;
}

document.getElementById('getLocationBtn').addEventListener('click', function () {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
      // Отримуємо точність геолокації
      const accuracy = position.coords.accuracy;
      // Виводимо точність на екран
      document.getElementById('accuracyOutput').textContent = `Точність: ${accuracy} метрів`;
    }, function (error) {
      document.getElementById('accuracyOutput').textContent = 'Помилка: Не вдалося отримати геолокацію';
    });
  } else {
    document.getElementById('accuracyOutput').textContent = 'Геолокація не підтримується в цьому браузері';
  }
});
//# sourceURL=pen.js

navigator.geolocation.getCurrentPosition(
  (position) => {
    if (position.coords.accuracy <= 15) {
      console.log("Координати точні, відображення на карті");
      displayMarkerOnMap(position.coords.latitude, position.coords.longitude);
    } else {
      console.log("Координати не досить точні");
    }
  },
  (error) => console.error("Error:", error),
  { enableHighAccuracy: true }
);