В одной из прошлых статей мы разбирались как работает API яндекс карт на примере создания компонента для НэтКэта, но все это дело относилось к старому API версии 1.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 на что-то другое.
Вот тут есть куча классных примеров по работе с Яндекс.картами и один из них был использован в этой статье.
Вот тут тоже куча наглядных примеров, стоит посмотреть.
Вот и все, мы сделали яндекс карту с несколькими уникальными метками, с собственным контентом балунов, стилем и даже своей кнопкой закрыть используя API 2.0
UPD: Существует проблема с неверным подсчетом позиции кастомного балуна, т.е. в каких то частях карты балун открывается за пределами карты, что не красиво и не ок. Эту проблему я решил принудительной центровкой карты на координатах открытого балуна с помощью panTo:
1) Сначала к настройкам балуна метки карты надо добавить balloonAutoPan: false — чтобы выключить автоматическое кривое выравнивание.
2) Теперь при событии balloonopen возьмем координаты метки и вызовем panTo:
А подскажите,где в коде указывается на саму картинку (не фон,а именно картинку,та что в кружке) и как вы сделали так чтобы балун закрывался,ну,и собственно оригинальный дизайн крестика (для закрытия)???
Спасибо,посмотрел!Кое-что прояснилось.
И все-таки осталось непонятным,каким образом объекты структурируются внутри балуна. Вот например у Вас картинка слева в кружке и с боку надпись. Всё аккуратно!Когда я пытаюсь поменять Ваши картинки и текст на свои, у меня всё это располагается как попало!В коде я ничего не меняю,кроме содержимого и источника. Возникает вопрос что именно отвечает за расположение текста относительно картинки!
Все элементы внутри балуна, позиционируются и стилизуются с помощью CSS, конкретно обтекание картинки сделано с помощью свойства float. Внимательно посмотрите код примера, все стили там.
И учите матчасть.
Ахтунг! Если у вас возникла проблема, старайтесь предоставить максимум информации автору: что происходит, что делали, текст ошибки итд.. Комменты типа: "Не работает =(" - отстойные и будут уничтожаться!
Павел Июль 4, 2014 в 13:02
Очень интересно! Скажите, а почему в примере карта не реагирует на приближение с помощью колесика мышки? эту функцию отдельно включать?
saxap Июль 4, 2014 в 13:20
По умолчанию эта опция отключена. Чтобы включить, добавьте:
behaviors: ['default', 'scrollZoom'],
где нибудь после:
center: [55.76, 37.64],
Сейчас добавлю в пример.
Павел Июль 4, 2014 в 14:43
Супер, спасибо! Просто с мобильных устройств довольно сложно использовать ползунки «+» и «-«.
IKARUS Ноябрь 13, 2014 в 16:33
Не работает, все сделал как в примере. Просто тупо не появляется метка
saxap Ноябрь 13, 2014 в 16:38
Мне жаль.
rembo Март 5, 2015 в 02:36
Пути до картинок перепишите :) и появится
Антон Февраль 4, 2015 в 15:19
А подскажите,где в коде указывается на саму картинку (не фон,а именно картинку,та что в кружке) и как вы сделали так чтобы балун закрывался,ну,и собственно оригинальный дизайн крестика (для закрытия)???
saxap Февраль 4, 2015 в 15:50
Смотрите демо пример.
Антон Февраль 4, 2015 в 17:31
Спасибо,посмотрел!Кое-что прояснилось.
И все-таки осталось непонятным,каким образом объекты структурируются внутри балуна. Вот например у Вас картинка слева в кружке и с боку надпись. Всё аккуратно!Когда я пытаюсь поменять Ваши картинки и текст на свои, у меня всё это располагается как попало!В коде я ничего не меняю,кроме содержимого и источника. Возникает вопрос что именно отвечает за расположение текста относительно картинки!
saxap Февраль 4, 2015 в 18:44
Все элементы внутри балуна, позиционируются и стилизуются с помощью CSS, конкретно обтекание картинки сделано с помощью свойства float. Внимательно посмотрите код примера, все стили там.
И учите матчасть.
jiubaff Сентябрь 11, 2015 в 11:28
Спасибо за пример, а подскажите, можно ли прикрутить сюда кластеризацию и как?
saxap Сентябрь 13, 2015 в 22:03
Можно, но это отдельная тема уже, в 2 словах не расскажешь.