[Easy IT] Web компонент для добавления OpenStreetMap на сайт #easyit #openstreetmap #js @EasyITChannel ​

🎯 Загружено автоматически через бота: 🚫 Оригинал видео: 📺 Данное видео принадлежит каналу «Easy IT» (@EasyITChannel). Оно представлено в нашем сообществе исключительно в информационных, научных, образовательных или культурных целях. Наше сообщество не утверждает никаких прав на данное видео. Пожалуйста, поддержите автора, посетив его оригинальный канал. ✉️ Если у вас есть претензии к авторским правам на данное видео, пожалуйста, свяжитесь с нами по почте support@, и мы немедленно удалим его. 📃 Оригинальное описание: Изучаем как написать веб компонент интегрирующий работу с OpenStreetMap и библиотекой OpenLayer. Как разместить маркер на карте, как добавить всплывающее информационное окно, как найти точку на карте по адресу и наоборот. Рабочий сайт с этим примером здесь: Тайм коды: Вступление Чем будем пользоваться при работе Инициализация проекта и установка пакетов Создаем файл компонента и подключаем его к проекту Импортируем необходимые модули в компоненте Константы для атрибутов компонента Класс компонента, конструктор Метод жизненного цикла connectedCallback Создаем объект карты Обработчик для события singleclick для объекта map Получение всех fetures на которых кликнул пользователь и отображение оверлея Вывод широты и долготы точки клика в консоль. Вызов функции обратного геокодирования Добавление слоя маркеров на карту Добавляем обработчик для запуска поиска точки по заданному адресу (прямое геокодирование) Пишем статический геттер observedAttributes Пишем метод жизненного цикла attributeChangedCallback Пишем метод обновления компонента после изменения атрибутов Регистрируем web компонент Модифицируем файл для работы с web компонентом Добавляем файл маркера Первый запуск и просмотр полученного результата Поиск и устранение ошибок Рабочая версия после исправления ошибок Первое знакомство с движком для прямого и обратного геокодирования Пишем метод обратного геокодирования (получение адреса по точке на карте) Пишем метод прямого геокодирования (получение точки на карте по поисковому запросу) Пишем обработчики на события прямого и обратного геокодирования Исправляем отсутствие отправки событий геокодирования Добавляем отображение адреса, полученного с помощью клика по карте Добавляем получение точки на карте для поискового запроса прямого геокодирования Проверяем поиск точки на карте по поисковому запросу Преобразуем компонент в самодостаточную библиотеку, подключаемую просто по ссылке в head страницы Запускаем сборку проекта и смотрим что получилось Подключаем библиотеку и проверяем как это все работает Заключение Исходники тут: По стрелочным функциям: Телеграм канал: RFW7SglaGM0wZjhi Сериал “Создание простой игры на JavaScript“ Сериал “Создание SPA приложения на чистом JS“: