OlaCenters-Yandex-Maps

Проект OlaCenters-Yandex-Maps использует API Яндекс.Карт для отображения множества меток на карте. Карта центрируется на заданной координате и масштабируется до определенного уровня. Адреса, которые необходимо отобразить на карте, хранятся в массиве объектов. Для каждого адреса происходит геокодирование, то есть преобразование адреса в координаты на карте. Затем создается метка с полученными координатами, кастомной иконкой и балуном с информацией о местоположении. Пользователь может кликнуть на метку, чтобы увидеть более подробную информацию. В проекте используется библиотека Yandex Maps API для работы с картами.

Описание работы

Создается экземпляр карты с заданными параметрами центра и масштаба.
Создаются шаблоны Icon и Balloon с помощью метода ymaps.templateLayoutFactory.createClass.
Для каждого объекта в массиве адресов выполняется следующее:
Создается экземпляр геокодера с помощью метода ymaps.geocode.
Обрабатываются результаты геокодирования с помощью метода then.
Создается экземпляр метки ymaps.Placemark с заданными параметрами:
- координаты, полученные из геокодера
- параметры для шаблонов Icon и Balloon,
- параметры отображения метки на карте.
Метка добавляется на карту с помощью метода myMap.geoObjects.add.

Кнопка с информацией о местоположении и функцией перемещения карты

Описание

Этот код создает кнопку на странице с информацией о местоположении и отзывами. Кнопка имеет атрибуты data-lat и data-lng, которые содержат координаты местоположения, а также классы для стилизации. При клике на кнопку карта перемещается к указанным координатам с анимацией.

Использование

Добавьте кнопку на вашу страницу с атрибутами data-lat и data-lng, содержащими координаты местоположения, а также с классами для стилизации. Например:

<button
  id="address-btn"
  data-lat="59.930611"
  data-lng="30.371168"
  class="addresses__button--mobile"
>
  <div class="addresses__metro--mobile">
    <svg ...></svg>
    <h4 class="addresses__title--mobile addresses__title--red">
      Площадь Восстания
    </h4>
  </div>
  <p class="addresses__address--mobile">
    2-я Советская улица, 25А
  </p>
  <div class="addresses__stats">
    <svg ...></svg>
    <span class="addresses__review">4.4 (344 отзыва)</span>
  </div>
</button>

Добавьте JavaScript код, который будет отслеживать клик на кнопке и перемещать карту к указанным координатам. Например:

const address_btn = document.querySelectorAll('[id="address-btn"]');

Array.prototype.forEach.call(address_btn, function (e) {
  e.addEventListener("click", function () {
    const lat = parseFloat(this.getAttribute("data-lat"));
    const lng = parseFloat(this.getAttribute("data-lng"));
    myMap.setZoom(16);
    myMap.panTo([lat, lng], {
    flying: true,
    duration: 500,
    });
  });
});

При необходимости, настройте параметры анимации перемещения карты в соответствии с документацией Yandex Maps API.

Используемые библиотеки