2

Как передавать дополнительную информацию (property) в multiroute для дальнейшего отображения в ballone?

1 ответ 1

2

Стандартной возможности нет. Вы можете переопределить данные в макете (см. 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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