Задать вопрос
@Rigorbb
javascript

Как ассинхронно сменить картинку у маркера на яндекс картах?

Инициализация карты и размещение маркера:

ymaps.ready(function () {
        myMap = new ymaps.Map("board-map", {
                center: [<?php print $board['latitude'];?>, <?php print $board['longitude'];?>],
                zoom: 15,
                controls: ['zoomControl', 'fullscreenControl']
            }),

            myGeoObject = new ymaps.GeoObject({
                geometry: {
                    type: "Point",// тип геометрии - точка
                    coordinates: [<?php print $board['latitude'];?>, <?php print $board['longitude'];?>] // координаты точки
                }
            }, {
                iconLayout: 'default#image',
                iconImageHref: '<?= Model::factory('news')->get_marker_for_single_board($board['id_board']); ?>',
                iconImageSize: [50, 50],
                iconImageOffset: [-25, -25]
            });
        myMap.geoObjects.add(myGeoObject); // Размещение геообъекта на карте.
    });

Как теперь можно изменить параметр-ссылку на иконку маркера iconImageHref по стороннему событию, например при нажатии на кнопку?
  • Вопрос задан
  • 5654 просмотра
1 комментарий
Подписаться 6 Оценить 1 комментарий
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Ответ — пресеты. Создаёте, сохраняете (как видно, объекты практически аналогичны и их нужно просто клонировать, меняя один параметр). А дальше — что захотите. Пресетов может быть сколько угодно с любыми именами.

Update: По молчаливой просьбе собеседника добавил сторонние элементы

var points = [
		[55.831903,37.411961],
		[55.763338,37.565466],
		[55.763338,37.565466],
		[55.744522,37.616378],
		[55.780898,37.642889]
	],
	markers = {};

ymaps.ready(function () {
	ymaps.option.presetStorage.add('custom#default', {
		iconLayout: 'default#image',
		iconImageHref: 'marker.png',
		iconImageSize: [30, 40],
		iconImageOffset: [-15, -40],
		iconImageClipRect: [
			[0, 30],
			[30, 70]
		],
		hideIconOnBalloonOpen: false
	});
	ymaps.option.presetStorage.add('custom#active', {
		iconLayout: 'default#image',
		iconImageHref: 'marker.png',
		iconImageSize: [30, 40],
		iconImageOffset: [-15, -40],
		iconImageClipRect: [
			[0, 70],
			[30, 110]
		],
		hideIconOnBalloonOpen: false
	});

	var myMap = new ymaps.Map('map', {
			center: [55.751574, 37.573856],
			zoom: 9
		});

	for (var i = 1; i <= points.length; i++) {
		markers['id' + i] = new ymaps.Placemark(
			points[i - 1],
			{
				hintContent: 'Какая красивая метка...'
			},
			{
				preset: 'custom#default'
			}
		);
		$('<a href="#" data-type="marker" data-id="id' + i + '">').html(i + '-я метка').appendTo($(document.body));
	}

	placemark.events.add('click', function (e) {
		changeMarker(e.get('target'));
	});

	myMap.geoObjects.add(placemark);
});

function changeMarker (marker) {
	marker.options.set('preset', {
		preset: 'custom#active'
	});
}

$(document).on('click', 'a[data-id][data-type="marker"]', function (e) {
	e.stopPropagation();
	e.preventDefault();
	changeMarker(markers[$(this).data('id')]);
});


Метка тут такая 8542c38cbe6a410f901a3adffe1974b2.png
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Менеджер по продажам в онлайн-школу
17 апр. 2024, в 00:48
35000 руб./за проект
Сделать картинки для слов
17 апр. 2024, в 00:13
800 руб./за проект
Разработка backend python+django
17 апр. 2024, в 00:06
240000 руб./за проект
Ещё заказы