Поставить балун для каждого маршрута и отцентрировать карту относительно нескольких маршрутов яндекс карты(API 2.1)

310
24 января 2018, 14:40

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

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}); отцентрировать не вышло, Кто знает напишите плиз.

Answer 1

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

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

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

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

READ ALSO
Git работа с локальными файлами [требует правки]

Git работа с локальными файлами [требует правки]

Создал на рабочем столе папку с файлом, зашел в нее, открыл git bash, пишу git status и мне выбивает untracked файлы которые находятся на рабочем столе,...

196
Таблица пользователей [требует правки]

Таблица пользователей [требует правки]

есть бд в которой список пользователей, на страницу выводится в виде таблицы список пользователей, хочу добавить функцию выбора нескольних...

240
Как сделать выпадающий список на JQuery

Как сделать выпадающий список на JQuery

Нужно реализовать выпадающий список на jqueryПри этом в свёрнутом состоянии должен оставаться видным первый элемент списка() и при клике на кнопку...

204