В этой заметке мы добавим к нашей карте возможность поиска по адресу.
Для начала мы возьмем уже готовый пример кода для заметки «Яндекс. Карты – добавляем элементы управления» .
Вот этот код:
<!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>
Для реализации поиска по адресу на карте необходимо к нашему примеру сделать следующие добавления.
- Форму для ввода адреса.
- Функцию которая будет принимать введенный адрес и отправлять запрос геокодеру и вслучае, когда адрес нашелся, отображать его на карте с помощью балуна.
Здесь я употребил слово геокодер. Что это такое?
Геокодер – это специальный сервис, который позволяет определять координаты и получать сведения о географическом объекте по его названию или адресу.
Процесс работы с геокодером называется геокодированием.
Для работы с геокодером в 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>
Посмотреть пример с ссылками в действии и полный код можно здесь.
