Несколько своих стилизованных меток на Яндекс карте API 2.0

Несколько своих стилизованных меток на Яндекс карте API 2.0

В этой статье мы будем работать с  Яндекс карты с API 2.0, а именно: добавим несколько меток, сделаем свои иконки вместо стандартных меток, полностью изменим стиль всплывалок (балунов) и все такое.

Берем код и создаем карту

В версии API 2.Х не надо получать никаких ключей просто втыкаем код и привязываем карту к нужному диву и все.    

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
   ymaps.ready(init); // карта соберется после загрузки скрипта и элементов
   var myMap; // заглобалим переменную карты чтобы можно было ею вертеть из любого места
   function init () { // функция - собиралка карты и фигни
       myMap = new ymaps.Map("map", { // создаем и присваиваем глобальной переменной карту и суем её в див с id="map"
            center: [55.76, 37.64], // ну тут центр
            behaviors: ['default', 'scrollZoom'], // скроллинг колесом
            zoom: 10 // тут масштаб
       });
       myMap.controls // добавим всяких кнопок, в скобках их позиции в блоке
            .add('zoomControl', { left: 5, top: 5 }) //Масштаб
            .add('typeSelector') //Список типов карты
            .add('mapTools', { left: 35, top: 5 }) // Стандартный набор кнопок
            .add('searchControl'); // Строка с поиском
        }
</script>

Добавляем и стилизуем метки

Тут создаем метку с нужными координатами и всякими настройками. В случае создания компонентов или модулей зацикливать нужно именно эту часть.  

myPlacemark0 = new ymaps.Placemark([55.752577,37.632134], { // Создаем метку с такими координатами и суем в переменную
        balloonContent: 'Заголовок метки 1Немного инфы о том, о сем. Лорем ипсум чото там.' // сдесь содержимое балуна в формате html, все стили в css
	}, {
	iconImageHref: 'img/icon1.png', // картинка иконки
	iconImageSize: [64, 64], // размер иконки
	iconImageOffset: [-32, -64], // позиция иконки
	balloonContentSize: [270, 99], // размер нашего кастомного балуна в пикселях
	balloonLayout: "default#imageWithContent", // указываем что содержимое балуна кастомная херь
	balloonImageHref: 'img/ballon1.png', // Картинка заднего фона балуна
	balloonImageOffset: [-65, -89], // смещание балуна, надо подогнать под стрелочку
	balloonImageSize: [260, 89], // размер картинки-бэкграунда балуна
	balloonShadow: false
});
/* Добавляем метки на карту */
myMap.geoObjects
	.add(myPlacemark0);

Каждый такой кусок отвечает за одну кастомную метку, поэтому чтобы добавить несколько меток — повторяем этот кусок сколько нужно раз, естественно меняя название переменной myPlacemark0 на что-то другое.

map20 

 

myMap.behaviors.disable('scrollZoom');   — отключить увеличение карты колесиком (отключить скролл на карте)

 

Вот и все, мы сделали яндекс карту с несколькими уникальными метками, с собственным контентом балунов, стилем и даже своей кнопкой закрыть используя API 2.0 UPD: Существует проблема с неверным подсчетом позиции кастомного балуна, т.е. в каких то частях карты балун открывается за пределами карты, что не красиво и не ок. Эту проблему я решил принудительной центровкой карты на координатах открытого балуна с помощью panTo: 1) Сначала к настройкам балуна метки карты надо добавить balloonAutoPan: false — чтобы выключить автоматическое кривое выравнивание. 2) Теперь при событии balloonopen возьмем координаты метки и вызовем panTo:

/* Фикс кривого выравнивания кастомных балунов */
myMap.geoObjects.events.add([
	'balloonopen'
	], function (e) {
	var geoObject = e.get('target');
	myMap.panTo(geoObject.geometry.getCoordinates(), {
		delay: 0
	});
});

 

Поделится
Комментарии

Если вас заинтерисовали наши услуги или у вас появились вопросы - пишите нам на почту info@aluxe.me или свяжитесь с нами через форму обратной связи на странице Контакты


Адрес компании
г. Киев, бульвар Марии Приймаченко 1/27 офис 107
080 033 71 67
044 333 85 38