@Coraelstraze

Как задать свою кнопку «проложить маршрут» в JS API яндекс-картах?

Доброго времени суток! Мучаюсь с js-кодом для яндекс карт.

Вот код:

var mapScript = {
	points: [],
	route: false,
	objects: [
		{
			lat: 55.324066,
			lng: 86.086432,
			title:   'Первое название',
			phone:  'Телефон <a href="tel:+74">445</a>',
			mode: 'Режим работы 1',
			icon: '/images/map.png',
button: '<a class="lock2 my_lock">Проложить маршрут</a>'
		},
		{
			lat: 55.282152,
			lng: 86.119734,
			title:   'Аэропорт',
			phone:  'Телефон <a href="tel:+74">445</a>',
			mode: 'Режим работы 2',
			icon: '/images/map.png',
button: '<a class="lock2 my_lock">Проложить маршрут</a>'
		},
		{
			lat: 55.418990,
			lng: 86.083170,
			title:   'Шахтер',
			phone:  'Телефон <a href="tel:+74">445</a>',
			mode: 'Режим работы 3',
			icon: '/images/map.png',
button: '<a class="lock2 my_lock">Проложить маршрут</a>'
		},
		{
			lat: 55.354118, 
			lng: 86.081332,
			title: 'Весенняя улица, 16',
			phone:  'Телефон <a href="tel:+74">445</a>',
			mode: 'Режим работы 4',
			icon: '/images/map.png',
button: '<a class="lock2 my_lock">Проложить маршрут</a>'
		}
	],
	init: function(elementId){
		mapScript.mapElementId = elementId;
		ymaps.ready(mapScript.ready);
	},
	ready:function(){
		mapScript.mapParams = {
			center: [55.354968, 86.087314],
			zoom: 16,
		};
		ymaps.geolocation.get().then(function (res) {
			mapScript.mapParams.center = res.geoObjects.position;
			mapScript.mapParams.zoom = 16;
			mapScript.createMap();
		}, function(e){
			mapScript.createMap();
		});
	},
	createMap: function(){
		mapScript.map = new ymaps.Map(mapScript.mapElementId, mapScript.mapParams);
		mapScript.objectsCollection = new ymaps.GeoObjectCollection();
		mapScript.geoPosition = new ymaps.Placemark(
		mapScript.mapParams.center, {hintContent:'Мое местоположение'}, {preset:'islands#circleDotIcon', iconColor:'red'});
		mapScript.objectsCollection.add(mapScript.geoPosition);
		for(var i in mapScript.objects){
			var object = mapScript.objects[i];
			mapScript.points[i] = new ymaps.Placemark(
				[object.lat, object.lng], {
					hintContent: object.title,
					balloonContent: mapScript.baloonTemplate(object),
				},{
					iconLayout: 'default#image',
					iconImageHref: object.icon,
					iconImageSize: [26, 26],
					iconImageOffset: [-5, -38]
				}
			);
mapScript.points[i].events.add('click', function(e){
				console.log(e);
				mapScript.showRoute(e.originalEvent.target);
			});
			mapScript.objectsCollection.add(mapScript.points[i]);
		}
		mapScript.map.geoObjects.add(mapScript.objectsCollection);
		var nearby = mapScript.getNearbyPoint(mapScript.geoPosition);
		mapScript.showRoute(mapScript.points[nearby.number])
	},
	baloonTemplate: function(object){
		var content = [
			'<b>'+object.title+'</b>',
			'<b>'+object.phone+'</b>',
			'<b>'+object.mode+'</b>',
object.button,
		];
		return content.join('<br>');
	},
	getNearbyPoint: function(location){
		var nearbyPoint = {number:false, distance:false};
		for(var i in mapScript.objects){
			var distance = ymaps.coordSystem.geo.getDistance(location.geometry.getCoordinates(), mapScript.points[i].geometry.getCoordinates());
			if(!nearbyPoint.number || distance < nearbyPoint.distance){
				nearbyPoint = {number:i, distance:distance};
			}
		}
		return nearbyPoint;
	},
	showRoute: function(point){
		if(mapScript.geoPosition == undefined){
			return false;
		}
		ymaps.route([
			mapScript.geoPosition.geometry.getCoordinates(),
			point.geometry.getCoordinates(),
		], {mapStateAutoApply: true}).then(function(route){
			console.log(route.getPaths());
			if(mapScript.route){
				mapScript.map.geoObjects.remove(mapScript.route.getPaths());
			}
			route.getPaths().options.set({
				strokeWidth: 5
			});
			mapScript.route = route;
			mapScript.map.geoObjects.add(mapScript.route.getPaths());
			/*mapScript.map.setBounds(mapScript.map.geoObjects.getBounds(), {checkZoomRange:true});*/
		});
	}
}
mapScript.init('map');


Вот в этом блоке
mapScript.points[i].events.add('click', function(e){
				console.log(e);
				mapScript.showRoute(e.originalEvent.target);
			});

задана функция обработки события, а именно клика по точке, отмеченной на карте. Когда кликаем - прокладывается маршрут.
Моя же задача такая.
Вот тут
{
			lat: 55.324066,
			lng: 86.086432,
			title:   'Первое название',
			phone:  'Телефон <a href="tel:+74">445</a>',
			mode: 'Режим работы 1',
			icon: '/images/map.png',
button: '<a class="lock2 my_lock">Проложить маршрут</a>'
		}

заданы параметры объекта, которые отображаются у меня на карте во всплывающем окне при клике на Точку.
Так вот, среди этих параметров есть кнопка "Проложить маршрут". Мне нужно, чтобы при клике именно на эту кнопку прокладывался маршрут, а при клике на саму Точку не прокладывался.
Думаю, тут у меня скорее нехватка знаний по js. Прошу помочь. Спасибо!
  • Вопрос задан
  • 388 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
26 нояб. 2024, в 12:30
50000 руб./за проект
26 нояб. 2024, в 11:39
1000 руб./за проект