Яндекс карты. Изменение значка метки при наведении у списка объектов

48
Алексей,
Яндекс карты. Изменение значка метки при наведении у списка объектов

Такой простой функционал оказалось не так просто реализовать. Нельзя просто взять и зайти в options менеджера объектов и поменять картинку методом options.set()

Для изменения у списка объектов (ymaps.ObjectManager) есть отдельный метод objects.setObjectOptions() Пример:

bigMap = new ymaps.Map('map', { // Создаем карту
	center: [40, 0],
	zoom: 2,
	controls: [],
	type: null,
	behaviors: ['dblClickZoom', 'multiTouch']
}

var objectManager = new ymaps.ObjectManager({ clusterize: false, clusterDisableClickZoom: true, gridSize: 64 });

geoObjects = [];
geoObjects[1] = {
	type: 'Feature',
	id: 1,
	geometry: {
		type: 'Point',
		coordinates: [50, 30]
	},
	properties: {
		balloonContentBody: 'Верстка балуна',
		clusterCaption: '<strong>Заголовок кластера</strong>'
	},
	options: {
		iconLayout: 'default#image',
		iconImageHref: '/path/to/img.png',
		iconImageSize: [50, 100],
		iconImageOffset: [-25, -100]
	}
};
var collection = {
	type: 'FeatureCollection',
	features: geoObjects
};
objectManager.add(collection); // добавляем коллекцию объектов

objectManager.objects.overlays.events.add('mouseenter', function (e) { // меняем иконку при наведении
	objectManager.objects.setObjectOptions(
		e.get('objectId'),
		{
			iconImageHref: '/path/to/hover-img.png'
		}
	);
});
objectManager.objects.overlays.events.add('mouseleave', function (e) { // меняем обратно
	objectManager.objects.setObjectOptions(
		e.get('objectId'),
		{
			iconImageHref: '/path/to/img.png'
		}
	);
});
objectManager.objects.overlays.events.add('click', function (e) {
	objectManager.objects.setObjectOptions(
		e.get('objectId'),
		{
			iconImageHref: '/path/to/img.png'
		}
	);
});
bigMap.geoObjects.add(objectManager); // добавляем на карту

bigMap.setBounds(bigMap.geoObjects.getBounds()); // центруем карту по добавленным объектам

Если честно, работает так себе. Из-за того что иконка загружается при ведении, то видно как она меняется под курсором (моргает). Решается костылём.

Опубликовано 25 декабря 2020 | Обновлено 31 декабря 2020
Яндекс.Карты, js, разработчику
Комментарии