Сразу скажу, вопрос перекочевал отсюда
Имеется карта с экскурсиями и достопримечательностями и полигоном, и есть табы по переключению которых те или иные точки показываются а так же если нажат таб с экскурсиями то показываются экскурсии(маршуруты или полиолинии так как экскурсии могут быть не по дорогам а по полям). Как при открытии балуна у маршрута закрывать остальные балуны других маршрутов, на подобии как работают метки, открыл одну другая закрылась? Маршрутов может быть очень много.
Ниже пример, функция которая строит все маршруты createRoutes()
var ymaps,
myPolygon,
place;
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
});
var data = {
'points': [
{
"infoPoint": '<div class="link-map"><a href="#" target="_blank">Ссылка на достопримечательность</a></div>',
"idPlace" : '2',
'icon': 'islands#blueDotIcon',
"latitude": 53.451296,
"longitude": 26.473253,
"placeType": 'type4'
},
{
"infoPoint": '<div class="link-map"><a href="#" target="_blank">Ссылка на достопримечательность</a></div>',
"idPlace" : '1',
'icon': 'islands#darkOrangeDotIcon',
"latitude": 53.461017,
"longitude": 26.458468,
"placeType": 'type1'
},
{
"infoPoint": '<div class="link-map"><a href="#" target="_blank">Ссылка на достопримечательность</a></div>',
"idPlace" : '3',
'icon': 'islands#pinkDotIcon',
"latitude": 53.443546,
"longitude": 26.517434,
"placeType": 'type2'
},{
"infoPoint": '<div class="link-map"><a href="#" target="_blank">Ссылка на достопримечательность</a></div>',
"idPlace" : '4',
'icon': 'islands#darkOrangeDotIcon',
"latitude": 53.446723,
"longitude": 26.455979,
"placeType": 'type1'
},{
"infoPoint": '<div class="link-map"><a href="#" target="_blank">Ссылка на достопримечательность</a></div>',
"idPlace" : '5',
'icon': 'islands#violetDotIcon',
"latitude": 53.500898,
"longitude": 26.465834,
"placeType": 'type3'
}
],
'routs':[
{
"infoPoint": '<a class="link-map" href="#">Экскурсия по Минску - Мирский замок</a>',
"coords": [
[53.903311, 27.560460],
[53.684175, 27.130098],
[53.483093, 26.740127],
[53.451614, 26.474540]
],
"routsType": 'auto',
"colorRouts": '#c51216',
},
{
"infoPoint": '<a class="link-map" href="#">Экскурсия по Гродно - Мирский замок</a>',
"coords": [
[53.675951, 23.828641],
[53.451092, 26.474309]
],
"routsType": 'auto',
"colorRouts": '#2ecc71'
},
{
"infoPoint": '<a class="link-map" href="#">Экскурсия Слуцк - Лунинец</a>',
"coords": [
[53.019913, 27.536110],
[52.279932, 26.824745]
],
"routsType": 'auto',
"colorRouts": '#000'
},
{
"infoPoint": '<a class="link-map" href="#">Экскурсия не по дорогам</a>',
"coords": [
[53.152694, 29.223097],
[53.136180, 29.433897],
[53.128089, 29.494096],
[53.099215, 29.749114]
],
"colorRouts": '#000'
}
],
'polygon':[
[53.98069667121322,23.48281326562501],[53.92237482795139,24.44961014062501],[54.135821254965,24.845117953125],[54.13541804028234,25.071710970703137],[54.19162840307183,25.157541659179685],[54.212461131324865,25.19496383935547],[54.26062781629918,25.21041336328124],[54.30823613729199,25.512537386718705],[54.27803536826016,25.521807101074145],[54.26871709234348,25.56128921777339],[54.2259414263689,25.588068392578084],[54.22711068386561,25.550131228271436],[54.20596461616174,25.570988085571248],[54.17352958687538,25.517687228027302],[54.148470112828186,25.55716934472652],[54.128235118143074,25.65158310205075],[54.166051118848046,25.718531039062473],[54.15219851737046,25.786165621581983],[54.19120056741521,25.767797854248],[54.21793174671509,25.744881060424778],[54.2301656835428,25.785135653320282],[54.31987870156001,25.681452181640584],[54.30913955810603,25.596994784179657],[54.33854004491667,25.529016878906255],[54.91540395315579,25.789942171875012],[55.15517886144831,26.350244906250012],[55.161469275239384,26.745752718750005],[55.318405996368696,26.833643343750012],[55.324670530119576,26.39419021874999],[55.5370736564162,26.558985140625],[55.72973646187694,26.657862093749994],[55.847350332138504,27.152246859375],[55.785492749027696,27.602686312500005],[56.18580509409631,28.13003006250001],[56.04463175206447,28.338770296874998],[56.093794520842614,28.668360140624994],[55.96460788821449,28.855127718749994],[55.81643388379883,30.492090609374998],[55.13000724023947,30.95351639062501],[54.744160621519114,30.898584749999994],[54.245349306933925,31.40395584375001],[54.03246953784167,31.942285921874998],[53.798981672470966,31.788477328124994],[53.7078263187784,32.579492953125],[53.4266049736835,32.777246859375005],[53.30832601729229,32.52456131250001],[53.09062343233524,32.16201248437499],[53.222697013391894,31.425928499999998],[53.031057058889346,31.261133578125012],[52.73865098506977,31.59072342187501],[52.47781385896032,31.59072342187501],[52.10730881660713,31.82143631249999],[52.087009812867834,30.95351639062501],[51.665415760310445,30.514063265625012],[51.23984103711603,30.61294021875],[51.48743442338615,30.206446078125005],[51.5080064931913,29.64614334375],[51.370682996422914,29.305567171874998],[51.68590700064187,29.173731234375012],[51.45999047647868,28.67934646875],[51.569666712411696,28.360742953125015],[51.679077622665055,28.23989334375001],[51.5765126649207,27.855371859374998],[51.62440531759449,27.196192171875005],[51.92428338247809,25.943750765625015],[51.951445757917135,25.009912875000012],[51.86990903447688,24.350733187499994],[51.590201460894576,23.99917068750001],[51.5148617757584,23.58169021875],[51.9718066934655,23.625635531250005],[52.29631876920866,23.175196078125],[52.72531268764793,23.933252718750012],[53.19631495531227,23.867334749999994],[53.720860681632345,23.58169021875]
]
};
var PlaceMarkers = new ymaps.GeoObjectCollection(),
AllRoutes = new ymaps.GeoObjectCollection(),
myBaloon,
colorRouts,
balloonLayout;
var myPolygon = new ymaps.Polygon([
data.polygon
], {
hasHint: false,
hasBalloon: false,
},{
fillColor: '#c51216',
fillOpacity: 0.1,
strokeWidth: 2,
strokeColor: '#c51216',
cursor: 'default'
});
myMap.geoObjects.add(myPolygon);
myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange: true, zoomMargin: 10});
function createRoutes() {
data.routs.forEach(function(item, index){
myBaloon = item.infoPoint;
colorRouts = item.colorRouts;
createBaloon(myBaloon);
if(item.routsType === "auto"){
multiRoute = new ymaps.multiRouter.MultiRoute(
{
referencePoints: item.coords,
params: {
results: 1
}
},
{
// Внешний вид путевых точек.
wayPointStartIconLayout: "default#image",
wayPointStartIconImageHref: "images/temp/icon_blue.svg",
wayPointStartIconImageSize: [20, 30],
wayPointStartIconImageOffset: [-10, -30],
wayPointFinishIconLayout: "default#image",
wayPointFinishIconImageHref: "images/temp/icon_blue.svg",
wayPointFinishIconImageSize: [20, 30],
wayPointFinishIconImageOffset: [-10, -30],
pinIconFillColor: colorRouts,
pinActiveIconFillColor: colorRouts,
pinVisible: false,
routeStrokeWidth: 3,
routeStrokeColor: colorRouts,
routeActiveStrokeWidth: 3,
routeActiveStrokeColor: colorRouts,
wayPointVisible: false,
wayPointStartVisible: true,
wayPointFinishVisible: true,
balloonLayout: balloonLayout,
balloonPanelMaxMapArea: 0
}
);
AllRoutes.add(multiRoute);
myMap.geoObjects.add(AllRoutes);
/*multiRoute.events.add('balloonopen', function (e) {
multiRoute.getActiveRoute().balloon.close();
});*/
}
else{
var polyline = new ymaps.Polyline(
item.coords, {
}, {
balloonLayout: balloonLayout,
balloonPanelMaxMapArea: 0,
strokeColor: colorRouts,
strokeWidth: 3,
opacity: .5
});
AllRoutes.add(polyline);
myMap.geoObjects.add(AllRoutes);
}
});
}
function createBaloon(myBaloon){
balloonLayout = ymaps.templateLayoutFactory.createClass(
'<div class="my-balloon">' +
'<div class="my-balloon__arrow"></div>' +
'<div class="my-balloon__inner">' +
'<a class="close" href="#"><svg class="icon icon-cros">' +
'<use xlink:href="#icon-cros"></use></svg></a>' + myBaloon +
'</div>'+
'</div>',
{
build: function () {
this.constructor.superclass.build.call(this);
this._$element = $('.my-balloon', this.getParentElement());
this._$element.find('.close').on('click', $.proxy(this.onCloseClick, this));
},
onCloseClick: function (e) {
e.preventDefault();
this.events.fire('userclose');
}
}
);
return balloonLayout;
}
function changePlace(dataPlace) {
data.points.forEach(function(item){
if(item.placeType === dataPlace){
place = new ymaps.Placemark(
[item.latitude, item.longitude],
{
idPlace: ''+item.idPlace+'',
balloonContent: item.infoPoint
},
{
preset: ''+item.icon+'',
}
);
PlaceMarkers.add(place);
}
});
myMap.geoObjects.add(PlaceMarkers);
}
$('body').on('change', '.place__tab-radio', function(){
var that = $('.place__tab-radio:checked');
PlaceMarkers.removeAll();
AllRoutes.removeAll();
if(that.data('routs')){
myMap.geoObjects.remove(PlaceMarkers);
createRoutes();
}
else{
changePlace(that.data('place-type'));
}
});
}
$(document).ready(function(){
if (ymaps != undefined) ymaps.ready(init);
});
#map{
height: 500px;
}
.my-balloon{
display: block;
position: absolute;
min-height: 40px;
padding: 10px 30px 10px 10px;
z-index: 1;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 5px 15px -7px rgba(0,0,0,.5);
bottom: 100%;
left: 50%;
margin-left: -150px;
margin-bottom: 12px;
width: 300px;
font-size: 13px;
text-align: left;
vertical-align: middle;
background-color: #fff;
}
.my-balloon__inner{
display: block;
}
.my-balloon__inner .close{
width: 30px;
height: 40px;
position: absolute;
right: 0;
top: 0;
}
.my-balloon__inner .icon-cros{
width: 14px;
height: 14px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -7px;
fill: $text;
}
.my-balloon__arrow{
display: block;
position: absolute;
left: 50%;
top: 100%;
margin-bottom: -17px;
margin-left: -12px;
background: rgba(0,0,0,.15);
width: 17px;
height: 17px;
transform: rotate(-45deg);
transform-origin: top left;
}
.my-balloon__arrow:before{
content: '';
position: absolute;
bottom: 1px;
left: 1px;
background-color: #fff;
width: 20px;
height: 20px;
}
<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" type="text/javascript"></script>
<div class="place__tabs">
<input id="place1" class="place__tab-radio" type="radio" data-place-type="type1" name="place">
<label for="place1">вид 1</label>
<input id="place2" class="place__tab-radio" type="radio" data-place-type="type2" name="place">
<label for="place2">вид 2</label>
<input id="place3" class="place__tab-radio" type="radio" data-place-type="type3" name="place">
<label for="place3">вид 3</label>
<input id="place4" class="place__tab-radio" type="radio" data-routs="true" data-place-type="type1" name="place">
<label for="place4">экскурсии</label>
<input id="place5" class="place__tab-radio" type="radio" data-place-type="type4" name="place">
<label for="place3">вид 4</label>
</div>
<div id="map"></div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
<symbol id="icon-cros" viewBox="0 0 31.2 31.2"><path d="M31.2 29.7L17 15.6 31.1 1.4 29.7 0 15.6 14.2 1.4.1 0 1.5l14.2 14.1L.1 29.8l1.4 1.4L15.6 17l14.2 14.1 1.4-1.4z"></path></symbol>
</svg>