Продолжаем знакомство с API 2ГИС. Используем API карт 2ГИС

С момента публикаций заметок об использовании API справочника 2ГИС, смотрите здесь и здесь, API продолжает активно развиваться, недавно появилась возможность использования карт 2ГИС на сайте, была представлена бета-версия API карт.

Кроме этого был обновлен сам сайт, посвященный API 2ГИС.

В этой заметке я покажу пример использования карты 2ГИС, а также изменю код примера, который создавался в заметке «Знакомство с API 2ГИС – дополнение» так, чтобы результаты поиска отображались на карте 2ГИС.

Для начала использования API карт 2ГИС необходимо подключить специальную библиотеку.

Добавляем в раздел HEAD следующий код:

Как видите, для использования API карт не нужен ни какой ключ.

После этого в разделе BODY, мы создаем контейнер для отображения карты размером 800 на 600 пикселей.

Теперь возвращаемся в раздел HEAD и определим параметры карты и добавим на нее элемент управления для изменения масштаба.

Функция DG.autoload внутри себя она создает обработчик на window.onload.

Создаем объект карты в строке:

var myMap = new DG.Map(‘myMapId’);

Центр карты задается геокооординатами в формате долгота и широта, для Нижнего Новгорода это будут значения 43.99150,56.31534

Далее задаем начальный уровень масштаба отображения карты — 15

Уровень масштаба изменяется от 1 до 17.

После этого на карту добавляем элемент управления масштабом карты.

Теперь добавим маркер на карту, при клике по которому будет появляться балун с информацией.

Для этого нужно добавить следующий фрагмент кода:

В начале мы создаем балун с центром в точке 43.99150,56.31534, с текстом «Нижний Новгород».

Затем маркер в той же точке с обработчиком клика по маркеру.

Маркер добавляется на карту строкой

Мы получили общее представление о работе с API карт 2ГИС, более подробно можно ознакомиться в документации.

Теперь мы возьмем код файла search.html из заметки «Знакомство с API 2ГИС – дополнение» и изменим его так, чтобы для отображения информации на карте вместо Яндекс.Карт использовать карты 2ГИС.

Первоначальный код файла search.html:

В самом начале мы заменим строку вызова API Яндекс.Карт на API карт 2ГИС.

И сразу после добавим подключение javascript-библиотеки jQuery с сервера Яндекса хостинга библиотек.

Это необходимо для нормальной работы кода не связанного с выводом карты, т. к. в API Яндекс.Карт уже включена библиотека jQuery.

Также нам необходимо заменить во всем коде Ymaps.jQuery на $.

Теперь мы заменяем весь код создания карты после строки

На следующий код:

Здесь примерно тоже самое, что и в первоначальном примере вывода карты 2ГИС в данной заметке, с небольшим отличием.

Метку и балун мы размещаем в точку с координатами result.lon,result.lat, передаваемые в ответе сервера 2ГИС, для отображения метки мы задаем свою иконку, отличную от используемой по умолчанию.

Делается это заданием параметра icon — url-адресс изображения, размер иконки.

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

Также мы должны изменить код в функции fullfirm, которая выводит полную информацию об организации.

Еще изменить идентификатор контейнера карты с на >

Продолжаем знакомство с API 2ГИС. Используем API карт 2ГИС : 20 комментариев

Покажите пожалуйста окончательный код

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

Подскажите пожалуйста, как использовать код без $(«#rezultat»).html(»); т.к предполагаю внедрить код на свой сайт

Проблема при работе с кодировкой win-1251 Автору спасибо за статью. Но с кодировкой никак, может есть выход?

Почемуто не работает. При запросе выводит список компаний, а при клике на компанию детально не показывает. и на карте тоже нет изменений. В чем может быть проблема?

У меня все нормально работает

Доброго времени суток. Насчет того, что при клике на компанию не выводится подробная инфа. У меня то же самое. Может дело в обращении к php-файлу? На локальном сервере я кладу эти файлы просто рядом. Раньше с картами от яндекс в модальном окне это нормально работало. Может это неверно? Где этот файл расположен у автора?

Можно получать подробные данные об организациях без привлечения для этого сторонних php-скриптов? Чисто на яваскрипт?

ой. заработало : ) Помог второй вариант из прошлого поста, который раньше не работал. То ли дело было в денвере с его глюком с curl, то ли я по невнимательности свой ключ не вставил. Автор продолжай свои изыскания.

Добрый день опять :). Уважаемый автор, подскажи пожалуйста, как можно сие реализовать на основе джумла? Благо эта ЦМС упоминается в ваших постах не единожды. Можно ли сделать, что бы формировался отдельный УРЛ на каждую из организаций. Может просто подскажите в каком направлении двигаться…

Присоединяюсь к просьбе Александр, объясните как быть с кодировкой. Если CMS на которой работает сайт в кодировке win-1251, как встроить эти замечательные скрипты? Уже сутки бьюсь не победить никак.

Нужно перекодировать входные и полученные данные, например с помощью библиотеки iconv. С начала полученные данные из Windows-1251 в UTF-8 — iconv(«CP1251», «UTF-8», «Текст»); После получения ответа из UTF-8 в Windows-1251 — iconv(«UTF-8», «CP1251», «Текст»);

Добрый день. Подскажите. Как реализовать API 2gis на DLE, и возможен ли например поиск только по нужному городу? Например, только по Дзержинску. Чтобы пользователь не могу выбрать город поиска.

Добрый день! Подскажите, в каком файле (и где?) нужно прописывать кодировку. Причем у меня сайт как раз работает на UTF-8 (с проблемой, как я понял, обращались те у кого 1251) но вывод результатов все равной пустыми квадратами. Хотя я использовал альтернативный вариант php-файла (при проблемах с выводом json_encode и json_decode, правда, они вроде бы как раз при кодировке 1251 бывают, а не UTF. Вот как-то так, запутался.

Данные от 2ГИС идут в кодировке UTF8, остальное читайте в блоге и в документации по API. Файлы скриптов нужно тоже сохранять в кодировке UTF8 без BOM.

Спасибо, справился. php-файл нужно сохранять в UTF8 — все просто.

Обнаружилась странная проблема. Во-первых, все работает. 🙂 Выводится список организаций, можно кликнуть на балун на карте, посмотреть краткую информацию на карте, развернуть карту на весь экран и снова вернуться к прежнему размеру. Но! Если выбрать организацию с полной карточкой и выводом на карту только одной этой организации, то после того, как развернуть карту на весь экран — обратно ее свернуть уже невозможно, только перезагрузить страницу, соответственно, данных поиска уже не будет. Вот такая странность. Можно ли как-то решить проблему?

у меня пишет «отсутствует результаты поиска» почему?

Здравствуйте, подскажите пожалуйста как реализовать Api 2ГИС карты в модальном окне joomla?

📎📎📎📎📎📎📎📎📎📎