Доброго времени суток! Мучаюсь с 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. Прошу помочь. Спасибо!