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

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

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

Такой простой функционал оказалось не так просто реализовать. Нельзя просто взять и зайти в 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, разработчику
Поделиться
Похожие статьи
Загрузка и инициализация API Яндекс карт при скролле
API карт весит много, js код тяжёлый. Загружать сразу - плохая идея. Если карта появляется по клику,...
Читать дальше » 0
Алексей,
js, как узнать кол-во блоков в ряду
Решение достаточно простое: берем ширину родителя и ширину блоков, делим одно на другое и получаем к...
Читать дальше » 0
Алексей,
Комментарии
❮…❯
Авторизуйтесь чтобы получать уведомления об ответе
12 апр 2022
Долго искал способ изменения размеров метки используя менеджер, спасибо автору !
Такой простой функционал оказалось не так просто реализовать. Нельзя просто взять и зайти в options менеджера объектов и поменять картинку методом options.set()