0

Как прикреплять изображение к метке, чтобы оно открывалось щелчком на балуне?

2 ответа 2

4

balloonContentBody отвечает за содержимое балуна метки. Соответственно, чтобы добавить картинку необходимо в одинарных кавычках добавить HTML-тег img. В атрибуте src указать путь - ссылка на изображение в интернете. Обязательные атрибуты: высота и ширина.

balloonContentBody: '<img src="" height="" width="">'

Пример кода для метки:

var point = new ymaps.Placemark([0, 0], {
        balloonContentHeader: 'Париж',
        balloonContentBody: '<img src="https://34travel.me/media/upload/images/2016/october/Paris_palasatka/02.jpg" height="153" width="200">',
        balloonContentFooter: 'Париж - столица Франции',
    }, {
        preset: 'islands#darkOrangeDotIcon'
    });
2
  • Спасибо! Подскажите ещё как цвет балуна менять. 11 мар 2019 в 11:49
  • 1
    После preset прописать iconColor: 'код цвета'. Обязательно отделить запятой эти две опции. Пример использования в ответе ниже моего. Но это работает только если указан preset. Можно использовать своё изображение для метки. Пожалуйста!
    – Anastasia
    11 мар 2019 в 11:54
1

Я реализовывал примерно таким образом функцию добавления меток на карту (здесь используется добавление по адресу, а не по координатам)

function addPointToMap(address, text = "") {
$.get("https://geocode-maps.yandex.ru/1.x/?apikey="+API_KEY+"&geocode=" + address + "&format=json", function (data) {
    let coord = data.response.GeoObjectCollection.featureMember[0].GeoObject.Point.pos.split(" ");
    myMap.geoObjects
        .add(new ymaps.Placemark([coord[1], coord[0]], {
            balloonContent: text
        }, {
            preset: 'islands#icon',
            iconColor: '#0095b6'
        }))
    });
}

По аналогии можно написать для готовых координат:

function addPointToMap(coord, text = "") {
    myMap.geoObjects
        .add(new ymaps.Placemark([coord[1], coord[0]], {
            balloonContent: text
        }, {
            preset: 'islands#icon',
            iconColor: '#0095b6'
        }))
    });
}

Внутрь text можно поместить свой html код с картинкой

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.