0

Сразу скажу, вопрос перекочевал отсюда

Имеется карта с экскурсиями и достопримечательностями и полигоном, и есть табы по переключению которых те или иные точки показываются а так же если нажат таб с экскурсиями то показываются экскурсии(маршуруты или полиолинии так как экскурсии могут быть не по дорогам а по полям). Как при открытии балуна у маршрута закрывать остальные балуны других маршрутов, на подобии как работают метки, открыл одну другая закрылась? Маршрутов может быть очень много.

Ниже пример, функция которая строит все маршруты 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>

1 ответ 1

3

Привет, нужно просто пробежаться по всем геообъектам и закрыть балуны у всех кроме текущего. Текущий можно получить из события (поле target):

var target = e.get('target');

Объект multiRoute состоит из нескольких маршрутов к каждому привязан балун. Так что для каждого multiRoute придется получить список его маршрутов и закрыть балун каждого маршрута:

var routes = multiRoute.getRoutes();
routes.each((route) => route.balloon.close()); 

Вот пример полностью:

var routes =[
    [
      [53.903311, 27.560460],
      [53.684175, 27.130098],
      [53.483093, 26.740127],
      [53.451614, 26.474540]
    ],
    [
      [53.675951, 23.828641],
      [53.451092, 26.474309]    
    ],
    [
      [53.019913, 27.536110],
      [52.279932, 26.824745]
    ],
    [
      [53.152694, 29.223097],
      [53.136180, 29.433897],
      [53.128089, 29.494096],
      [53.099215, 29.749114]
    ]
];

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [53.55, 27.33],
            zoom: 6
        }, {});

     routes.forEach((route) => {
            var multiRoute = new ymaps.multiRouter.MultiRoute({
            referencePoints: route
        });

        multiRoute.events.add('balloonopen', (e) => {
          var target = e.get('target');
          myMap.geoObjects.each((multiRoute) => {
            if (multiRoute != target) {
              var routes = multiRoute.getRoutes();
              routes.each((route) => route.balloon.close()); 
            }
          });
            console.log('Open')
        });

        myMap.geoObjects.add(multiRoute);
     });
});

https://jsfiddle.net/nsma2yan/22/

1
  • 1
    Спасибо мил человек, цены вам нету!!!!
    – Karalahti
    16 фев 2018 в 17:39

Ваш ответ

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

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