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

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

Поменять картинки меток Яндекс карты в 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 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

6 комментария

  1. Подскажите, а как сделать метку по умолчанию открытой? Это тоже делается в файле script.js?

      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]}
            );

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *