Добавляем поиск по адресу на Яндекс.Карту

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

В этой заметке мы добавим к нашей карте возможность поиска по адресу.

Для начала мы возьмем уже готовый пример кода для заметки «Яндекс. Карты – добавляем элементы управления» .

Вот этот код:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html” />

<script src=”http://api-maps.yandex.ru/1.0/?key=

AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==”

type=”text/javascript”></script><script type=”text/javascript” charset=”utf-8?>

var map;

function init () {

map = new YMaps.Map( document.getElementById(”YMapsID”) );

map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13,

YMaps.MapType.MAP);map.addControl(new YMaps.TypeControl());

map.addControl(new YMaps.ToolBar());

map.addControl(new YMaps.Zoom());

map.addControl(new YMaps.MiniMap());

map.addControl(new YMaps.ScaleLine());}

</script>

</head>

<body onload=”init();”><div id=”YMapsID” style=”height:400px; width:600px;”></div></body>

</html>

Для реализации поиска по адресу на карте необходимо к нашему примеру сделать следующие добавления.

  1. Форму для ввода адреса.
  2. Функцию которая будет принимать введенный адрес и отправлять запрос геокодеру и вслучае, когда адрес нашелся, отображать его на карте с помощью балуна.

Здесь я употребил слово геокодер. Что это такое?

Геокодер – это специальный сервис, который позволяет определять координаты и получать сведения о географическом объекте по его названию или адресу.

Процесс работы с геокодером называется геокодированием.

Для работы с геокодером в API Яндекс.Карт используются специальные объекты  YMaps.Geocoder и YMaps.GeocoderResult. Они позволяют отправлять запросы геокодеру, получать информацию о статусе и результате процесса геокодирования и получать результаты геокодирования в виде меток карты.

Подробнее о геокодировании можно узнать из руководства разработчика по адресу http://api.yandex.ru/maps/jsapi/doc/dg/concepts/geocoder.xml

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

В раздел BODY перед картой добавляем следующий код:

<form action=»#» onsubmit=»showAddress(this.address.value);return false;»><p><input type=»text» id=»address» style=»width:525px;» value=»Нижний Новгород» />

<input type=»submit» value=»Искать» />

</p>

</form>

В раздел HEAD после функции init следующую функцию:

function showAddress (value) {map.removeOverlay(geoResult);var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});

YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {

if (this.length()) {

geoResult = this.get(0);

map.addOverlay(geoResult);

map.setBounds(geoResult.getBounds());

}else {

alert(«Ничего не найдено»)

}

});

YMaps.Events.observe(geocoder, geocoder.Events.Fault,

function (error) {alert(«Произошла ошибка: » + error.message)});

}

Форма уже содержит значение Нижний Новгород для поиска.

В нее необходимо ввести искомый адрес.

Введенный адрес (значение переменной value) передается функции showAddress.

В ней сначала мы удаляем все оверлеи (объект, привязанный по географическим координатам, который отображается поверх карты, в частности открытый балун) строка map.removeOverlay(geoResult);

Затем в строке var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});

запускаем процесс геокодирования.

Полсле этого, если поиск прошел без ошибок и найден хотя бы один результат отображаем его с помощью открытого балуна.

Иначе выводим сообщение: «Ничего не найдено».

Последние две строки функции служат для вывода сообщения об ошибке геокодирования.

Загрузим наш пример в браузере и проверим его работу.

Пример Яндекс.Карты с формой поиска

Найдем для примера следующий адрес: Нижний Новгород, ул. Белинского, 59

Введем его в строку поиска и нажмем Найти.

Получим найденный результат.

Пример Яндекс.Карты - Результат поиска

Посмотреть пример в действии и полный код можно здесь.

На странице к созданной функции можно обращаться используя ссылку, например,

<a href=»javascript:showAddress(‘Нижний Новгород, ул. Белинского, 59’)»> Нижний Новгород, ул. Белинского, 59</a>

Посмотреть пример с ссылками в действии и полный код можно здесь.

  • Гость: а как добавить поиск по собственному изображению?
  • Гость: Нужно организовать собственный поиск по Вашим объектам. Лучше всего их параметры и координаты поместить в базу данных. Вы организуете поиск по базе, по результатам поиска извлекаете координаты найденного объекта и позиционируете свою карту так, чтобы найденный элемент был по центру.
  • Гость: можете привести пример с народной картой?
  • Гость: Поддерживаю. Хотелось бы пример с народной картой.
  • Igor Kondratenko: Добрый день! Не знаю, можете ли вы мне помочь в решении такой задачи: 1) создать кластер объектов (я сделал); 2) осуществлять поиск по карте и показывать метку на карте + не затирать кластер, а добавлять к нему новый объект.