Битрикс как изменить метки в Яндекс картах

Можно ли поменять изображения на метках в картах? Ответ – да, можно. Ниже вы узнаете как именно.

Поменять картинки меток Яндекс карты в 1С-Битрикс

Если вы используете компонент “Яндекс.Карты: настраиваемая карта” то для начала вам необходимо скопировать компонент в свой шаблон (чтобы при обновлении ничего не затерлось) и найти файл script.js.

Рассмотрим начало этого кода:

if (!window.BX_YMapAddPlacemark)
{
    window.BX_YMapAddPlacemark = function(map, arPlacemark)
    {
        if (null == map)
            return false;

        if(!arPlacemark.LAT || !arPlacemark.LON)
            return false;

        var props = {};
        if (null != arPlacemark.TEXT && arPlacemark.TEXT.length > 0)
        {
            var value_view = '';

            if (arPlacemark.TEXT.length > 0)
            {
                var rnpos = arPlacemark.TEXT.indexOf("\n";
                value_view = rnpos <= 0 ? arPlacemark.TEXT : arPlacemark.TEXT.substring(0, rnpos);
            }

            props.balloonContent = arPlacemark.TEXT.replace(/\n/g, '<br />');
            props.hintContent = value_view;
        }

        var obPlacemark = new ymaps.Placemark(
            [arPlacemark.LAT, arPlacemark.LON],
            props,
            {balloonCloseButton: true}
        );

        map.geoObjects.add(obPlacemark);

        return obPlacemark;
    }
}

Нам необходимо найти строку

{balloonCloseButton: true}

и заменить ее на свою:

{
      balloonCloseButton: true,
      iconImageHref: "/images/mark.png" 
}

где /images/mark.png – это путь к изображению на сайте.

Чтобы изменить размер встраиваемой картинки, зададим ей ширину и высоту в 100 и 50 соответственно:

{
        balloonCloseButton: true,
        iconImageHref: "/images/mark.png",
        iconImageSize: [100, 50],
}

Надеюсь у вас всё получилось 🙂

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

6 коментаря

      1. Да, актуально.
        Только код указанных примеров не применяется к моему, вот он:

        if (!window.BX_YMapAddPlacemark)
        {
        window.BX_YMapAddPlacemark = function(map, arPlacemark)
        {
        if (null == map)
        return false;
        if(!arPlacemark.LAT || !arPlacemark.LON)
        return false;
        var props = {};
        if (null != arPlacemark.TEXT && arPlacemark.TEXT.length > 0)
        {
        var value_view = ”;
        if (arPlacemark.TEXT.length > 0)
        {
        var rnpos = arPlacemark.TEXT.indexOf(“\n”);
        value_view = rnpos <= 0 ? arPlacemark.TEXT : arPlacemark.TEXT.substring(0, rnpos);
        }
        props.balloonContent = arPlacemark.TEXT.replace(/\n/g, '’);
        props.hintContent = value_view;
        }
        var obPlacemark = new ymaps.Placemark(
        [arPlacemark.LAT, arPlacemark.LON],
        props,
        {balloonCloseButton: true,
        iconImageHref:”/images/logo.png”,
        iconImageSize: [60, 50]}
        );

        map.geoObjects.add(obPlacemark);
        return obPlacemark;
        }
        }
        if (!window.BX_YMapAddPolyline)
        {
        window.BX_YMapAddPolyline = function(map, arPolyline)
        {
        if (null == map)
        return false;
        if (null != arPolyline.POINTS && arPolyline.POINTS.length > 1)
        {
        var arPoints = [];
        for (var i = 0, len = arPolyline.POINTS.length; i < len; i++)
        {
        arPoints.push([arPolyline.POINTS[i].LAT, arPolyline.POINTS[i].LON]);
        }
        }
        else
        {
        return false;
        }
        var obParams = {clickable: true};
        if (null != arPolyline.STYLE)
        {
        obParams.strokeColor = arPolyline.STYLE.strokeColor;
        obParams.strokeWidth = arPolyline.STYLE.strokeWidth;
        }
        var obPolyline = new ymaps.Polyline(
        arPoints, {balloonContent: arPolyline.TITLE}, obParams
        );
        map.geoObjects.add(obPolyline);
        return obPolyline;
        }
        }

        1. попробуйте
          // Открываем балун на карте (без привязки к геообъекту).
          myMap.balloon.open([51.85, 38.37], “Содержимое балуна”, {
          // Опция: не показываем кнопку закрытия.
          closeButton: false
          });

          // Показываем хинт на карте (без привязки к геообъекту).
          myMap.hint.show(myMap.getCenter(), “Содержимое хинта”, {
          // Опция: задержка перед открытием.
          showTimeout: 1500
          });
          ссылка на пример https://tech.yandex.ru/maps/jsbox/2.0/balloon_and_hint

          1. Не выводится.
            Очевидно мне нужно добавить какую-то строчку в это место:

            var obPlacemark = new ymaps.Placemark(
            [arPlacemark.LAT, arPlacemark.LON],
            props,
            {balloonCloseButton: true,
            iconImageHref:»/images/logo.png»,
            iconImageSize: [60, 50]}
            );

            только не знаю какую.

Залишити коментар до Кирилл Скасувати коментар