Справочник на карте, с использованием API Яндекс.Карт 2.1

Автор: | 10.08.2014

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

В этой заметке я хочу кратко рассказать о нем, как примере с использованием API Яндекс.Карт 2.1.

Давайте посмотрим работу карты.

Заходим по адресу https://webmap-blog.ru/examples/spravoshnik/index.html и видим следующее.

Справочник на карте

В левой части, мы видим отдельные категории справочника со значками.

А в правой карту.

Щелкая по названию категории, открывается её содержимое (если в категории есть данные), а на карте появляются метки.

Справочник на карте - категория

Кликнув по названию организации, карта центрируется по данной метке и открывается балун с подробной информацией.

Справочник на карте - балун с информацией о фирме

В примере данные содержат категории: Автомойки, Автостоянки, Автошколы, АЗС, Аптеки, Бани и сауны, Бары (в данной категории есть балун с изображением).

Справочник на карте - балун с изображением

Для добавления меток я сделал отдельную страницу, вот как она выглядит:

Справочник на карте - Админка для добавления и редактирования меток

Для добавления метки нужно кликнуть по кнопке «Режим добавления меток», а затем кликнуть в нужном месте.

Появляется форма для ввода параметров.

Справочник на карте - режим добавления метки

Заполняем необходимые данные и нажимаем на кнопку «Сохранить».

Для редактирования уже имеющейся метки, нужно кликнуть на кнопке «Режим редактирования метки», а затем правой кнопкой мыши по нужной метке.

Справочник на карте - режим редактирования метки

Можно менять местоположение метки, просто перетащив ее в новую позицию на карте.

После редактирования параметров, нажать на кнопку «Сохранить».

Если нужно удалить метку, нажимаем кнопку «Удалить».

Все очень просто.

Справочник организаций на Яндекс.Карте — видео

Если Вам понравилось мое решение и Вы хотите получить его код, обращайтесь в комментариях к данной заметке или на e-mail: ugolsergey@gmail.com

Возможна дополнительная доработка под Вашу задачу.

Стоимость кода с технической поддержкой 2000 рублей.

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

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