Как отобразить своё местоположение на карте с помощью JavaScript
Всем привет! Сегодня я покажу вам, как можно сделать простое приложение, которое отображает ваше местоположение на карте с помощью JavaScript и API Яндекс.Карт. Будем использовать встроенный API геолокации браузера и разберём весь процесс пошагово.
Что мы будем делать?
- Узнаем текущие координаты пользователя с помощью геолокации.
- Инициализируем карту, используя полученные данные.
- Добавим на карту метку, которая покажет ваше местоположение.
- Всё это завернём в удобный для использования код.
Итак, начнём!
Код проекта
Давайте сразу к делу. Вот готовый HTML-код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Карта с вашим местоположением</title>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
function initMap(latitude, longitude, accuracy) {
var map = new ymaps.Map("YMapsID", {
center: [latitude, longitude],
zoom: 10,
controls: ['zoomControl', 'geolocationControl']
});
var placemark = new ymaps.Placemark([latitude, longitude], {
balloonContent: `Вы здесь!<br>Широта: ${latitude}<br>Долгота: ${longitude}<br>Погрешность: ±${accuracy} м`
}, {
preset: 'islands#redDotIcon'
});
map.geoObjects.add(placemark);
}
function showMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const accuracy = position.coords.accuracy; // Погрешность в метрах
initMap(latitude, longitude, accuracy);
}, function () {
alert("Не удалось получить ваше местоположение.");
});
} else {
alert("Ваш браузер не поддерживает геолокацию.");
}
}
</script>
</head>
<body>
<h1>Карта с вашим местоположением</h1>
<input type="button" value="Показать карту" onclick="showMap()">
<div id="YMapsID" style="width:600px;height:400px; margin-top: 20px;"></div>
</body>
</html>
Как это работает?
-
Получение координат
- Мы используем метод navigator.geolocation.getCurrentPosition. Он запрашивает у браузера широту, долготу и погрешность местоположения.
-
Создание карты
- Используем ymaps.Map из API Яндекс.Карт для отображения карты. В качестве центра карты указываем полученные координаты.
-
Добавление метки
- С помощью ymaps.Placemark создаём метку с информацией о вашем местоположении.
-
Интерфейс
- При нажатии кнопки «Показать карту» запускается функция showMap, которая выполняет всю магию.
Что можно улучшить?
-
Пользовательский опыт
- Добавьте проверку на отсутствие интернета.
- Сделайте загрузочный индикатор, пока карта инициализируется.
-
Дополнительные функции
- Отобразите ближайшие интересные места.
- Добавьте маршруты до выбранных объектов.
Итог
Вот так просто можно создать веб-приложение, которое показывает ваше местоположение на карте. Если вы хотите научиться писать такие проекты с нуля, рекомендую курс «Программирование на JavaScript с Нуля до Гуру 2.0″. Там вас ждёт множество полезных уроков и практики!
