Доброго времени суток.
Помогите плз советом или решением прям)
В JS совсем зелёный, не могу решить описанную ниже задачу.
Есть
вот эта страница.
Слева - список клиник . Справа - эти самые клиники на карте.
Я пытаюсь сделать так:
Нажимаем на клинику в списке слева - и на карте соответствующая клиника меняет цвет своей иконки (меняется путь к файлику с изображением).
В списке клиник у каждой из клиник есть data-атрибуты где написаны координаты клиники. Js забирает их и создаёт гео объебъекты.
Выложу сюда js.
(function ($) {
$(document).ready(function() {
var elementMap = document.getElementById('map-results');
if (elementMap) {
ymaps.ready(init);
}
function init() {
var myMap = new ymaps.Map(elementMap, {
center: [59.937204, 30.313636],
zoom: 13
});
var myCollection = new ymaps.GeoObjectCollection(null, {
iconLayout: 'default#image',
iconImageHref: 'svg/map_icon.svg',
iconImageSize: [30, 30],
iconImageOffset: [0, 0]
});
$('.search__result .clinic-item__address').each(function() {
var lat = $(this).attr('data-lat'),
long = $(this).attr('data-long'),
clinic = $(this).parents('.clinic-item');
var geoObject = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [lat, long]
}
});
geoObject.events.add('click', function (e) {
myCollection.each(function (geoObject) {
geoObject.options.set({
iconImageHref: 'svg/map_icon.svg'
});
});
e.get('target').options.set({
iconImageHref: 'svg/map_active.svg'
});
$('.clinic-item--active').removeClass('clinic-item--active');
clinic.addClass('clinic-item--active');
$('.search__result').animate({ scrollTop: $('.clinic-item--active').position().top}, 500);
});
myCollection.add(geoObject);
});
myMap.geoObjects.add(myCollection);
myMap.setBounds(myCollection.getBounds(), {
checkZoomRange : true,
duration : 500,
zoomMargin : 10
});
$('.search').on('click', '.clinic-item', function () {
var item = $(this);
if ( !item.hasClass('clinic-item--active') ) {
var lat = item.find('.clinic-item__address').attr('data-lat'),
long = item.find('.clinic-item__address').attr('data-long');
$('.clinic-item--active').removeClass('clinic-item--active');
item.addClass('clinic-item--active');
}
});
};
var elementMapClinic = document.getElementById('map');
if (elementMapClinic) {
ymaps.ready(initMap);
}
function initMap(){
var lat = $('.clinic .clinic-item__address').attr('data-lat'),
long = $('.clinic .clinic-item__address').attr('data-long'),
myMap = new ymaps.Map(elementMapClinic, {
center: [lat, long],
zoom: 15
});
myPlacemark = new ymaps.Placemark([lat, long], {}, {
iconLayout: 'default#image',
iconImageHref: 'svg/map_active.svg',
iconImageSize: [40, 40],
iconImageOffset: [0, 0]
});
myMap.geoObjects.add(myPlacemark);
};
})
} ( jQuery ));
Yandex maps api читаю сейчас. Просто очень ограничен во времени. Пока что ничего путного не придумал.
Наверное нужно как то по клику на клинику искать геообъект с соответствующими координатами и ему менять изображение иконки. только не могу понять как это сделать.
Спасибо большое!!!
p.s. Сорян за простыню JS. Думаю нет особого смысла выкладывать этот код в песочницу :)
Простой