Можно ли поменять изображения на метках в картах? Ответ – да, можно. Ниже вы узнаете как именно.
Поменять картинки меток Яндекс карты в 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], }
Надеюсь у вас всё получилось 🙂
Подскажите, а как сделать метку по умолчанию открытой? Это тоже делается в файле script.js?
Если вопрос еще актуален, то вот пару примеров кода:
https://tech.yandex.ru/maps/jsbox/2.1/object_manager_balloon
и второй
https://tech.yandex.ru/maps/jsbox/2.1/clusterer_balloon_open
Да, актуально.
Только код указанных примеров не применяется к моему, вот он:
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;
}
}
попробуйте
// Открываем балун на карте (без привязки к геообъекту).
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
Не выводится.
Очевидно мне нужно добавить какую-то строчку в это место:
var obPlacemark = new ymaps.Placemark(
[arPlacemark.LAT, arPlacemark.LON],
props,
{balloonCloseButton: true,
iconImageHref:»/images/logo.png»,
iconImageSize: [60, 50]}
);
только не знаю какую.
Есть ещё мысли?