Есть карта, с несколькими маршрутами, как поставить балун для каждого маршрута, чтоб по нажатию на маршрут он открывался, и как отцентрировать карту относительно всех маршрутов??
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});
отцентрировать не вышло, Кто знает напишите плиз.