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

Question

[Rigorbb]

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

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 по стороннему событию, например при нажатии на кнопку?

Comments

[Юрий Лобанов]

Оформите пример с картой где-нибудь, замените ваши php вставки на реальные величины, так как они не имеют отношения к вопросу, напишите, используете ли в проекте jquery.

Answer 1

[Евгений Петров]

Ответ — пресеты. Создаёте, сохраняете (как видно, объекты практически аналогичны и их нужно просто клонировать, меняя один параметр). А дальше — что захотите. Пресетов может быть сколько угодно с любыми именами.

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')]);
});

Метка тут такая

Comments

[Юрий Лобанов]

Автор предполагает смену маркера по внешнему событию, насколько я понял.

[Евгений Петров]

@iiil а какая разница? Я могу вызвать смену у маркера хоть откуда — маркеры хранятся (объект, массив), по некоему параметру (например, id) берём ссылку на маркер и для него меняем.

[Евгений Петров]

@iiil добавил сторонние элементы для реализму

[Юрий Лобанов]

@Petroveg да я просто для уточнения, не сомневаюсь, что Вы сможете сделать и на сторонние элементы.