Как прикреплять изображение к метке, чтобы оно открывалось щелчком на балуне?
2 ответа
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'
});
-
-
1После preset прописать iconColor: 'код цвета'. Обязательно отделить запятой эти две опции. Пример использования в ответе ниже моего. Но это работает только если указан preset. Можно использовать своё изображение для метки. Пожалуйста! 11 мар 2019 в 11:54
Я реализовывал примерно таким образом функцию добавления меток на карту (здесь используется добавление по адресу, а не по координатам)
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 код с картинкой