Всем привет! Сегодня я покажу вам, как можно сделать простое приложение, которое отображает ваше местоположение на карте с помощью JavaScript и API Яндекс.Карт . Будем использовать встроенный API геолокации браузера и разберём весь процесс пошагово.

Как отобразить своё местоположение на карте с помощью JavaScript

Всем привет! Сегодня я покажу вам, как можно сделать простое приложение, которое отображает ваше местоположение на карте с помощью JavaScript и API Яндекс.Карт. Будем использовать встроенный API геолокации браузера и разберём весь процесс пошагово.

Что мы будем делать?

  1. Узнаем текущие координаты пользователя с помощью геолокации.
  2. Инициализируем карту, используя полученные данные.
  3. Добавим на карту метку, которая покажет ваше местоположение.
  4. Всё это завернём в удобный для использования код.

Итак, начнём!

Код проекта

Давайте сразу к делу. Вот готовый 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>

Как это работает?

  1. Получение координат

    • Мы используем метод navigator.geolocation.getCurrentPosition. Он запрашивает у браузера широту, долготу и погрешность местоположения.

  2. Создание карты

    • Используем ymaps.Map из API Яндекс.Карт для отображения карты. В качестве центра карты указываем полученные координаты.

  3. Добавление метки

    • С помощью ymaps.Placemark создаём метку с информацией о вашем местоположении.

  4. Интерфейс

    • При нажатии кнопки "Показать карту" запускается функция showMap, которая выполняет всю магию.

Что можно улучшить?

  1. Пользовательский опыт

    • Добавьте проверку на отсутствие интернета.
    • Сделайте загрузочный индикатор, пока карта инициализируется.

  2. Дополнительные функции

    • Отобразите ближайшие интересные места.
    • Добавьте маршруты до выбранных объектов.

Итог