API Яндекс.Карт – ограничиваем область поиска — Занимательная веб-картография

В API Яндекс.Карт существует возможность реализации поиска по карте с использованием геокодирования.

Пример реализации представлен на странице по адресу http://api.yandex.ru/maps/jsapi/examples/geocoding.html

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

Существует возможность ограничить область поиска задав ее значениями координат для левой нижней и правой верхней точками.

Как это сделать я покажу на конкретном примере

С начала нужно определить необходимые координаты точек для области поиска, сделать это можно используя сервис определения координат по адресу http://api.yandex.ru/maps/tools/getlonglat/

Для Нижнего Новгорода это следующие координаты: левая нижняя — 43.69101,56.166626 и правая верхняя — 44.175786,56.407228.

В качестве исходного кода возьмем уже упоминавшийся здесь пример по адресу http://api.yandex.ru/maps/jsapi/examples/geocoding.html

Заменим только в начале ключ к API Яндекс.Карт и координаты центра карты на 44.0, 56.316667 и уровень масштаба 12, а также уберем ссылки ниже окна карты и в форме поиска уберем значение по умолчанию value="Москва".

В результате получим следующий код:

<!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>
    <title>Примеры. Сервисы. Геокодирование.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=AIW0o0kBAAAAkwyUMwMAEkDz8ddCkU0UnlyLEu4ddFBXhQQAAAAAAAAAAAA1Md4ULCo5QbciEo5T26eV1lhuEQ==" type="text/javascript"></script>
    <script type="text/javascript">
        var map, geoResult;
 
        window.onload = function () {
            map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(44.0, 56.316667),12);
            map.addControl(new YMaps.TypeControl());
        }
 
        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("Ничего не найдено")
                }
            });
        }
    </script>
</head>
 
<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>
        <div id="YMapsID" style="width:600px;height:400px"></div>
    </form>
 
</body>
 
</html>

Нам нужно ограничить область поиска, сделать это можно задав ее границы с помощью параметра геокодера boundedBy.

С этой области начнется вестись поиск, но количество найденных результатов не сократится, изменится только релевантность результатов.

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

var mysearchBounds = new YMaps.GeoBounds(new YMaps.GeoPoint(43.69101,56.166626), new YMaps.GeoPoint(44.175786,56.407228) );
var geocoder = new YMaps.Geocoder(value, {boundedBy : mysearchBounds, strictBounds : true});

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

Полный код примера после внесения исправлений:

<!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>
    <title>API Яндекс.Карт – ограничиваем область поиска</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=AIW0o0kBAAAAkwyUMwMAEkDz8ddCkU0UnlyLEu4ddFBXhQQAAAAAAAAAAAA1Md4ULCo5QbciEo5T26eV1lhuEQ==" type="text/javascript"></script>
 
    <script type="text/javascript">
 
	var map;
	var geoResult;
 
        window.onload = function () {
           map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(44.0, 56.316667),12);
        }
 
		function showAddress (value) {
            map.removeOverlay(geoResult);
 
			var mysearchBounds = new YMaps.GeoBounds(new YMaps.GeoPoint(43.69101,56.166626), new YMaps.GeoPoint(44.175786,56.407228) );
            var geocoder = new YMaps.Geocoder(value, {boundedBy : mysearchBounds, strictBounds : true});
 
 
            YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
                if (this.length()) {
                    geoResult = this.get(0);
                    map.addOverlay(geoResult);
                    map.setBounds(geoResult.getBounds());
					geoResult.openBalloon();
                }else {
                    alert("Ничего не найдено")
                }
            });
        }
    </script> 
</head> 
 
<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> 
        <div id="YMapsID" style="width:600px;height:400px"></div> 
    </form> 
 
</body>
</html>

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

В строке поиска набираем Фрунзе, 6 и получаем участок карты Нижнего Новгорода с открытым балуном на данном адресе.

API Яндекс.Карт - пример поиска в ограниченной области

Если тоже ввести на странице по адресу http://api.yandex.ru/maps/jsapi/examples/geocoding.html получим совершенно другой результат (Россия, Москва, улица Тимура Фрунзе, 8).

API Яндекс.Карт - пример поиска

Более расширенный пример по работе с геокодером можно посмотреть по адресу: http://ymaps.narod2.ru/examples/geocode-search.html

API Яндекс.Карт – ограничиваем область поиска

API Яндекс.Карт – ограничиваем область поиска: 1 комментарий

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