Как правильно добавить кастомную иконку для геообъекта в ymaps в сборщике Webpack?

Question

Как правильно добавить кастомную иконку для геообъекта в ymaps в сборщике Webpack?

Рейтинг: 0Ответов: 1Опубликовано: 29.06.2023

Всем привет!

Вторые сутки пытаюсь разрешить вопрос формирования кастомной иконки для точки, отмеченной на яндекс-картах в плагине ymaps в проекте Webpack.

Код добавления карты:

import { el } from 'redom';
import ymaps from 'ymaps';
import placemarkIcon from '../../assets/img/map-point.png';

export default function elementMap() {
  const map = el('div.contacts__map', { id: 'map' });
  if (!map) return;

  ymaps
    .load(
      'https://api-maps.yandex.ru/2.1/?apikey=_мой-apikey_&lang=ru_RU'
    )
    .then((maps) => {
      maps.ready(async () => {
        const myMap = new maps.Map(map.id, {
          center: [54.79538, 56.058593],
          zoom: 15,
          controls: ['searchControl', 'zoomControl'],
        });

        let myPoints = [{ lat: 54.796527, lon: 56.058781 }];

        myPoints.forEach((point) => {
          const placemark = new maps.Placemark([point.lat, point.lon], {
            iconLayout: 'default#image',
            iconImageHref: placemarkIcon, // ! не подтягивается новая иконка
            iconImageSize: [30, 42],
            iconImageOffset: [-5, -38],
          });
          myMap.geoObjects.add(placemark);
        });
      });
    })
    .catch((error) => console.log('Ошибка загрузки Яндекс-карт', error));

  // ! тест - иконка выводится корректно!
  const placemarkBlock = el('img.placemark');
  placemarkBlock.setAttribute('src', placemarkIcon);

  return el('.maps', [placemarkBlock, map]);
}

Выводимый результат:

Как видно из ТЕСТОВОГО блока в коде (см. placemarkBlock), изображение подгружается из assets корректно. Смена ссылки iconImageHref на url-ссылку любого изображения в сети также не работает. Делаю вывод, что что-то некорректно в блоке с настройкой кастомной иконки, но что именно, так и не разобрался.

ВОПРОС: что может быть не так с кодом?

Заранее благодарю за критику, советы и рекомендации.

яндекс-карты webpack

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Выявил решение методом проб и ошибок. Возможно, при использовании класса Placemark были допущены некие синтаксические ошибки, но, к сожалению, я их так и не смог выявить. Вместо Placemark решил попробовать воспользоваться исходным родительским классом GetObject, описав в конструкторе отдельно свойства и опции:

import placemarkIcon from '../../assets/img/map-point.png';
...
const myPoints = [{ lat: 54.796527, lon: 56.058781 }];

        myPoints.forEach((point) => {
          const placemark = new maps.GeoObject(
            {
              geometry: { 
                type: 'Point', 
                coordinates: [point.lat, point.lon] 
              },
              properties: {
                // контент метки
                iconContent: 'BSE',
                hintContent: 'BSE - Бассейны и водоемы',
              },
            },
            {
              // Опции.
              iconLayout: 'default#image',
              iconImageHref: placemarkIcon,
              iconImageSize: [50, 64],
              iconImageOffset: [10, 0],
            }
          );
          myMap.geoObjects.add(placemark);
        });

Результат:

Одним словом, мухи отдельно, котлеты отдельно.

Как правильно добавить кастомную иконку для геообъекта в ymaps в сборщике Webpack?

Ответы