dontforget.pro
dontforgetpro
  • CSS/HTML
  • JavaScript/jQuery
  • Netcat
  • Opencart
  • PHP
  • UMI
  • Wordpress
  • Всякое
  • Абаут
  • Написать мне
  • Полезное
 Купить автору пива

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

Март 30, 2014
51429
12
JavaScript/jQuery
api, карта
saxap

В одной из прошлых статей мы разбирались как работает 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 на что-то другое.

map20

ДЕМО ПРИМЕР

Примечания

  • Вот тут есть куча классных примеров по работе с Яндекс.картами и один из них был использован в этой статье.
  • Вот тут тоже куча наглядных примеров, стоит посмотреть.

Вот и все, мы сделали яндекс карту с несколькими уникальными метками, с собственным контентом балунов, стилем и даже своей кнопкой закрыть используя 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
	});
});

Как это работает можете посмотреть в примере выше.

Еще вот тут есть статья как можно самому высчитать верную позицию балуна.

Tweet
Плавный скроллинг к элементу на jQuery
Примeр ajax отпpавки фoрмы на еmаil с пoмoщью jQuеry и phр
Похожие посты:
  • Добавление поста произвольного типа с фронтэнда на ajax’е в WP
  • Автопостинг новостей из RSS в Битрикс
  • Динамические списки и система событий в NetCat
Всего комментариев: 12
  • Павел Июль 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 словах не расскажешь.

Ответить Антон Отменить ответ
Ахтунг! Если у вас возникла проблема, старайтесь предоставить максимум информации автору: что происходит, что делали, текст ошибки итд.. Комменты типа: "Не работает =(" - отстойные и будут уничтожаться!

Ваш email не будет опубликован.

Вставить: linkphpjssqlcsshtml

Подписаться на новые статьи:

Текст не воруйте.

Сергея Астафьева блог - dontforget.pro © 2013-2019