1

Есть карта, с несколькими маршрутами, как поставить балун для каждого маршрута, чтоб по нажатию на маршрут он открывался, и как отцентрировать карту относительно всех маршрутов??

var myMap, ymaps;
// Инициализировать карту
function init() {
  var winWidth 	= $(window).width(),
    myMap 		= document.getElementById("map");
  $('#map .loader').fadeOut('600');
  if (!myMap) return;

  myMap = new ymaps.Map(myMap, {
    center: [53.451296, 26.473253],
    zoom: 17,
    controls: []
  });

  myMap.controls.add("zoomControl", {});
  if(winWidth <= 1024){
    myMap.behaviors.disable('drag');
  }

  var data = {
    'routs':[
      [
        {
          "infoPoint": '<a class="link-map" href="#">Ссылка на место</a>',
          "coords": [53.903311, 27.560460],
          "colorRouts": '#c51216'
        },
        {
          "infoPoint": '<a class="link-map" href="#">Ссылка на место</a>',
          "coords": [53.684175, 27.130098],
          "colorRouts": '#c51216'
        },
        {
          "infoPoint": '<a class="link-map" href="#">Ссылка на место</a>',
          "coords": [53.483093, 26.740127],
          "colorRouts": '#c51216'
        },
        {
          "infoPoint": '<a class="link-map" href="#">Ссылка на место</a>',
          "coords": [53.451614, 26.474540],
          "colorRouts": '#c51216'
        }
      ],
      [
        {
          "infoPoint": '<a class="link-map" href="#">Ссылка на место</a>',
          "coords": [53.675951, 23.828641],
          "colorRouts": '#2ecc71'
        },
        {
          "infoPoint": '<a class="link-map" href="#">Ссылка на место</a>',
          "coords": [53.451092, 26.474309],
          "colorRouts": '#2ecc71'
        }
      ]
    ]
  };

  var routsList = [];
  var myBaloon;

  data.routs.forEach(function(item, index){
    var colorRouts;
    item.forEach(function(item){
      routsList.push(item.coords);
      myBaloon = item.infoPoint;
      colorRouts = item.colorRouts;
    });
    createRoute(routsList, colorRouts, myBaloon, index);
    routsList = [];
  });


  function createRoute(coords, colorRouts, myBaloon, index) {
    var multiRoute = new ymaps.multiRouter.MultiRoute(
      {
        referencePoints: coords,
        params: {
          results: 1
        }
      },
      {
        // Внешний вид маршрута
        pinIconFillColor: colorRouts,
        pinActiveIconFillColor: colorRouts,

        routeStrokeWidth: 5,
        routeStrokeColor: colorRouts,
        routeActiveStrokeWidth: 5,
        routeActiveStrokeColor: colorRouts,

        wayPointVisible: false,
        wayPointStartVisible: true,
        wayPointFinishVisible: true,

        // Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
        boundsAutoApply: true,
        zoomMargin: 20
      }
    );

    myMap.geoObjects.add(multiRoute);
    data.routs[index].forEach(function(item, index){
      myBaloon = ymaps.templateLayoutFactory.createClass(item.infoPoint);
      multiRoute.model.events.once("requestsuccess", function () {
        var yandexWayPoint = multiRoute.getWayPoints().get(index);
        ymaps.geoObject.addon.balloon.get(yandexWayPoint);
        yandexWayPoint.options.set({
          balloonContentLayout: myBaloon
        });
      });
    });
  }

  //myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange: true, zoomMargin:42});

}

$(document).ready(function(){
  if (ymaps != undefined) ymaps.ready(init);
});
#map{
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

Через myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange: true, zoomMargin:42}); отцентрировать не вышло, Кто знает напишите плиз.

1 ответ 1

3

1) Для каждого маршрута можно создать свой балун

2) Таким способом можно отцентрировать, необходимо только дождаться готовности маршрута, чтобы он построился и выдал правильный bounds.

myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange: true, zoomMargin:42});

Можешь попробовать отследить по событию update. Вот здесь рабочий пример твой: https://jsfiddle.net/Lrhzy1oL/1/

2
  • Интересное решение, спасибо! Единственное что мне бы не хотелось писать свой балун, а хочу чтоб был стандартный но внутрь поставить свой текст, balloonContentLayout если писать, то он не ставит именно для полосы маршрута
    – Karalahti
    24 янв 2018 в 7:37
  • Стандартный балун маршрута менять нельзя 24 янв 2018 в 10:04

Ваш ответ

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

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