Загрузка...

HTML Geolocation

Ранее Web Storage запоминал строки ключ/значение. Этот урок уходит от сохранения и знакомит с Geolocation: чтение приблизительной широты/долготы через navigator.geolocation — только после разрешения. HTML загружает скрипт, который спрашивает местоположение. Практика — одно чтение, watch/clear, вежливый отказ — не SDK карт и не geo БД.

Зачем geolocation в курсе HTML

Новички часто делают кнопку «рядом со мной». Geolocation — первый обычный API. После web storage разделение иное: HTML владеет оболочкой и кнопкой; JS запрашивает координаты. Хватает getCurrentPosition, знания watchPosition и обработки отказа.

Прямой ответ

1) Вызовите getCurrentPosition. 2) Прочитайте latitude/longitude. 3) Лучше после клика пользователя. 4) watchPosition только для обновлений; clearWatch. 5) Никакого HTML-тега. 6) При отказе держите страницу полезной.

📊 getCurrentPosition vs watchPosition

Topic getCurrentPosition watchPosition
Typical use One-shot “where am I now” Ongoing updates while watching
Callback pattern success once (plus optional error) success may fire repeatedly
Stop watching Not needed (single read) clearWatch(watchId)
Beginner fit Share-location button Live tracking demos (careful)
Permission Still required Still required
This course depth Intro focus Short demo + clearWatch only

Крошечное демо getCurrentPosition

Клик запрашивает позицию и печатает координаты. Если API нет или отказ — спокойное сообщение.

getCurrentPosition with permission

html 
<button id="loc" type="button">Share location</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
document.getElementById("loc").onclick = function () {
if (!navigator.geolocation) {
out.textContent = "No geolocation support";
return;
}
out.textContent = "Waiting for permission…";
navigator.geolocation.getCurrentPosition(
function (pos) {
out.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
out.textContent = "Permission denied or unavailable";
}
);
};
</script>

Читаем вызовы getCurrentPosition

  • navigator.geolocation — точка входа
  • getCurrentPosition спрашивает один раз
  • latitude/longitude — первые числа новичка
  • Сначала проверьте поддержку
  • error-callback покрывает отказ
  • Предпочтителен HTTPS
  • В отличие от Web Storage: чтение, не сохранение

watchPosition для непрерывных обновлений

Успех может срабатывать при движении. Сохраните id и clearWatch — не оставляйте watch навечно во введении.

watchPosition and clearWatch

html 
<button id="start" type="button">Watch location</button>
<button id="stop" type="button">Stop watching</button>
<pre id="live"></pre>
<script>
const live = document.getElementById("live");
let watchId = null;
document.getElementById("start").onclick = function () {
if (!navigator.geolocation) {
live.textContent = "No geolocation support";
return;
}
if (watchId !== null) {
return;
}
live.textContent = "Watching…";
watchId = navigator.geolocation.watchPosition(
function (pos) {
live.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
live.textContent = "Permission denied or unavailable";
watchId = null;
}
);
};
document.getElementById("stop").onclick = function () {
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
live.textContent = "Stopped watching";
}
};
</script>

Читаем идею watchPosition

  • Та же модель разрешения
  • Успех может повторяться
  • clearWatch останавливает — дайте Stop
  • Не библиотека карт
  • Не Web Storage
  • Выбирайте get vs watch по частоте
  • Дальше: drag and drop

Когда спрашивать

  • Клик «Поделиться местоположением»: хорошее время
  • При загрузке без контекста: обычно плохо
  • Непрерывное движение: watchPosition со стопом
  • Сохранение темы: был Web Storage
  • Полный map-продукт: за пределами этого интро
  • Тихий трекинг: антипаттерн

Практика — вежливо попросите fix

  1. Вставьте демо getCurrentPosition и проверьте prompt.
  2. Подтвердите координаты или спокойный отказ.
  3. Запустите watch, затем Stop.
  4. Опционально: откажите без падения.
  5. Предложение: Web Storage сохраняет строки; Geolocation читает с разрешением.
  6. Отдавайте по http(s) при необходимости.
  7. Впереди: drag and drop.

Лёгкие ошибки

  • Ждать тег geolocation
  • Спрашивать при каждой загрузке
  • Игнорировать error-callback
  • Путать с Web Storage
  • Оставлять watch без clearWatch
  • Считать GPS всегда точным
  • Считать интро полным курсом карт

Итог

  • Geolocation — JS API с разрешением на navigator.geolocation
  • getCurrentPosition один раз; watchPosition + clearWatch для обновлений
  • HTML даёт UI; спрашивайте после явного действия
  • Обрабатывайте отказ мягко
  • Web Storage был строками; этот урок — разрешённые координаты
  • Далее: HTML drag and drop

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 64 из 68
Html Урок