Как передавать дополнительную информацию (property) в multiroute для дальнейшего отображения в ballone?
1 ответ
Стандартной возможности нет. Вы можете переопределить данные в макете (см. https://ru.stackoverflow.com/a/754626/222907) и прокинуть туда что угодно.
Писать в свойства мультимаршрута (multiRoute.properties
) не советую, т.к. они автоматически меняются при перестроении маршрута.
ymaps.ready(function () {
var map = new ymaps.Map('map', { center: [55.768, 37.62], zoom: 12, controls: [] });
var route;
var balloonLayout = ymaps.templateLayoutFactory.createClass([
'<div class="my-balloon">',
'{{ customProperties.routeName }}, всего {{ properties.duration.text }}',
'</div>'
].join(''));
balloonLayout = wrapWithDataSubstitution(balloonLayout, function (data) {
return Object.assign({}, data, { customProperties: route.customProperties });
});
route = new ymaps.multiRouter.MultiRoute(
{ referencePoints: ['Москва, Курский вокзал', 'Москва, Улица 1905 года'] },
{ balloonLayout: balloonLayout, balloonPanelMaxMapArea: 0 });
map.geoObjects.add(route);
route.customProperties = new ymaps.data.Manager();
route.customProperties.set('routeName', 'Мой любимый маршрут');
});
// Смотри https://ru.stackoverflow.com/a/754626/222907
function wrapWithDataSubstitution(Layout, substitute) {
// 1. Layout'ы принимают данные в конструкторе, подменим их до того как
// они дойдут до layout.templateBased.Base.
var Wrapper = function(data) {
var rest = [].slice.call(arguments, 1);
Wrapper.superclass.constructor.apply(this, [substitute(data)].concat(rest));
};
ymaps.util.defineClass(Wrapper, Layout, {
// 2. Layout'ам можно менять данные через setData, переопределим
// setData, чтобы подменять в нем данные.
setData: function (data) {
Wrapper.superclass.setData.call(this, substitute(data));
}
});
return Wrapper;
}
.my-balloon {
display: inline-block;
background: white;
border: 1px solid black;
border-radius: 2px;
padding: 4px;
transform: translate(-50%, 0);
}
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug"></script>
<div id="map" style="width: 600px; height: 180px;"></div>