Яндекс.Карты вывод списка объектов карты

Часто клиент хочет вывести карту и кликабельный список объектов, по клику на который карта должна плавно менять центрирование. Часто клиент хочет вывести карту и кликабельный список объектов, по клику на который карта должна плавно менять центрирование. Описываю свой опыт по созданию кликабельных карт с открытием baloon.

Будем считать, что у вас есть javascript массив элементов карты, который нужно вывести в таком формате:

var groups = [
	{
	name: "Название 1",
	style: "islands#blueIcon", //Голубая метка
	items: [
		{
			id: 1,
			center: [50.426472, 30.563022],
			name: "Адрес 1"
		}
	]},{
	name: "Название 2",
	style: "islands#redIcon", //Красная метка
	items: [
		{
			id: 2,
			center: [50.45351, 30.516489],
			name: "Адрес 2"
		}
	]},{
	name: "Название 3",
	style: "islands#greenIcon", //зеленая метка
	items: [
		{
			id: 3,
			center: [50.454433, 30.529874],
			name: "Адрес 3"
		}
	]},
];

Так же у вас должен быть подготовлен div в который мы поместим нашу карту. Например

<div id='cMap'></div>

И сам код скрипта с комментариями:

ymaps.ready(init);

function init() {
	// Создание экземпляра карты.
	var myMap = new ymaps.Map('cMap', {
			center: [82.993774, 55.031061], //Центрирование карты. Поскольку у нас есть метки с собственным центрированием, то можно не указывать
			zoom: 14, //Дальность приближения
			controls: [] //Убираем кнопки управления
		}, {
			searchControlProvider: 'yandex#search'
		});

	var placemarks = []; //Задаем дополнительный массив куда будем складывать созданные метки

	for (var i = 0, l = groups.length; i < l; i++) {
		createMenuGroup(groups[i]);
	}

	function createMenuGroup (group) {
		// Коллекция для геообъектов группы.
		var collection = new ymaps.GeoObjectCollection(null, { preset: group.style });

		// Добавляем коллекцию на карту.
		myMap.geoObjects.add(collection);
		// Добавляем подменю.

		for (var j = 0, m = group.items.length; j < m; j++) {
			createSubMenu(group.items[j], collection, j);
		}
	}

	function createSubMenu (item, collection, j) {
		// Создаем метку.
		var placemark = new ymaps.Placemark(item.center, { balloonContent: item.name });

		// Добавляем метку в коллекцию.
		collection.add(placemark);

                //Добавляем в наш новый массив метки
		placemarks[item.id] = placemark;
	}

	// куда скакать
	function clickGoto() {
		//В моем примере метки должны раскрываться не только при клике по ним, но и по клику по списку вне карты
                //Соответственно, у нас есть элементы c указанными широтой, долготой и номером
                //Например li data-n="50.454433" data-s="30.529874" data-key="3"
		var pos = [parseFloat(this.getAttribute('data-n')), parseFloat(this.getAttribute('data-s'))],//Здесь получаем координаты и преобразуем их из строки в цифры с десятичными
			baloonId = this.getAttribute('data-key'); //Определяем id необходимого нам балуна

		// переходим по координатам
		myMap.panTo(pos, {flying: 1}).then(function () {
			placemarks[baloonId].balloon.open();//Открываем балун
		});

		return false;
	}

	// навешиваем обработчики
	var col = document.getElementsByClassName('storeText');
	for (var i = 0, n = col.length; i < n; ++i) {
		col[i].onclick = clickGoto;//При клике на объекты li с классом storeText карта будет центрироваться по заданным в них координатам, а балун откроется
	}

	// Выставляем масштаб карты чтобы были видны все группы.
	myMap.setBounds(myMap.geoObjects.getBounds());
}

Определить координаты можно здесь

Простой способ вызова карты с добавлением кастомной метки

ymaps.ready(init);

function init() {
	var myMap = new ymaps.Map('cMap', {
			center: [55.10717956959603,83.05149399999993],
			zoom: 15
		}, {
			searchControlProvider: 'yandex#search'
		}),

		// Создаём макет содержимого.
		MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
			'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
		),

		myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
			hintContent: 'Заголовок 1',
			balloonContent: 'Заголовок 2'
		}, {
			// Опции.
			// Необходимо указать данный тип макета.
			iconLayout: 'default#image',
			// Своё изображение иконки метки.
			iconImageHref: 'img/icon.svg',
			// Размеры метки.
			iconImageSize: [40, 40],
			// Смещение левого верхнего угла иконки относительно
			// её "ножки" (точки привязки).
			iconImageOffset: [-5, -38]
		}),

		myPlacemarkWithContent = new ymaps.Placemark([55.661574, 37.573856], {
			hintContent: 'Собственный значок метки с контентом',
			balloonContent: 'А эта — новогодняя',
			iconContent: '12'
		}, {
			// Опции.
			// Необходимо указать данный тип макета.
			iconLayout: 'default#imageWithContent',
			// Своё изображение иконки метки.
			iconImageHref: 'images/ball.png',
			// Размеры метки.
			iconImageSize: [48, 48],
			// Смещение левого верхнего угла иконки относительно
			// её "ножки" (точки привязки).
			iconImageOffset: [-24, -24],
			// Смещение слоя с содержимым относительно слоя с картинкой.
			iconContentOffset: [15, 15],
			// Макет содержимого.
			iconContentLayout: MyIconContentLayout
		});

	myMap.geoObjects
		.add(myPlacemark)
		.add(myPlacemarkWithContent);
}

Теги: JavascriptjQuery