Яндекс карты. Делаем свою карту меток

Захотелось рассказать о своем недавнем опыте создания карты меток. Задача состояла в следующем: необходимо создать на основе API Яндекс карт свою карту меток с возможностью добавления новых меток , редактирования старых, удаления. Метки могут быть разных типов и должны отличаться иконками. Кроме того, необходимо учесть возможность создания ссылок на метки. Сделать это необходимо в виде модуля к существующему сайту и в дальнейшем встроить туда.

Помимо основных требований были определены дополнительные: при наведении на метку выскакивает балун, при щелчке по метке происходит увеличение фрагмента карты с меткой до уровня детализации номеров домов и пр.

Первым делом я просто создал типичную заготовку для карты прямо из документации Яндекса по API, после того как получил ключ. То есть подключил необходимые скрипты, и создал простую разметку.

 

 

В map_init.js у меня находится код для инициализации карты. Там я начал писать все то, что я хочу видеть на карте.

 

Главное здесь – это инициализация необходимых мне элементов управления на карте, например, переключатели типа карты или же управление отображением пробок. Кстати, модули вроде пробок необходимо подключать в строке с ключом (см. выше). Кроме того необходимо было учесть возможность раскрытия карты на весь экран, поэтому были сделаны 2 обработчика и кнопка “Развернуть”. Обработчики реагируют на click и вызывают функцию setSize с параметрами либо без них.

Кроме того есть и обработчик клика на карте. Это было продумано заранее с прицелом на возможность добавления новых меток.

 

Происходит следующее: по клику на карте происходит заполнение некоторых input’ов значениями координат (#lat и #lng), а также формируется url для создания ссылки на данную будущую метку (поле #link). Понятно, что метка определяется ее координатами.

Кроме того, думая все о той же ссылке на метку, нужно было каким-то образом осуществить обработку такого запроса GET. Выбор был невелик. Либо делать это средствами PHP прямо в скрипте, либо тут. Я решил попробовать обойтись средствами JS и нашел такой выход.

 

То есть идея по сути простая. Если есть некоторый запрос, то его необходимо обработать, вытащив значения всех параметров (а их тут может быть два). Таким образом карта отцентруется по точке и увеличится масштаб. Не уверен по поводу кроссбраузерности такого трюка. Есть большие подозрения по поводу семейства IE, но по моим проверкам в IE7/8 работало нормально. Если судить о безопасности, то тут конечно не происходит никаких проверок входных параметров, и я думаю, что на PHP это можно было бы сделать элегантнее, но поскольку работы с БД тут не происходит, я посчитал это некритичным.

Если интересен пример, то он вот тут: ссылка

В следующей части расскажу про то, как было реализовано взаимодействие с БД средствами ajax.

2 комментария Яндекс карты. Делаем свою карту меток

  1. Lenka

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">