Недавно, 2 декабря 2010 года, появилась возможность использования Народной карты на других сайтах, ее можно использовать не только в режиме просмотра, но и для поиска.
В этой заметке я покажу, как можно разместить Народную карту на Вашем сайте с использованием API Яндекс.Карт.
Для использования Народной карты в API Яндекс.Карт существует специальный модуль и в начале необходимо подключить его.
В строке загрузки API сразу после ключа для Вашего сайта нужно добавить параметр modules=pmap через символ &.
Например:
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==&modules=pmap" type="text/javascript"></script> |
Если Вы используете на своем сайте другие модули, то для подключения дополнительного модуля нужно через символ через тильду (~) добавит модуль pmap.
Например:
<script src="http://api-maps.yandex.ru/1.1/?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==modules=hotspot~pmap" type="text/javascript"></script> |
Для выбора определенного участка Народной карты нужно определить координаты ее центра, сделать это можно используя инструмент для определения координат.
Для отображения Народной карты существует два типа НК-схема (YMaps.MapType.PMAP) и НК-гибрид (Ymaps.MapType.PHYBRID).
Пример размещения Народной карты с возможностью переключения типа карты:
<!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=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==&modules=pmap" type="text/javascript"></script>
<script type="text/javascript">
function init () {
var map = new YMaps.Map( document.getElementById("YMap") );
map.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, YMaps.MapType.PHYBRID]));
map.setCenter(new YMaps.GeoPoint(44.00189,56.324461), 14, YMaps.MapType.PMAP);
};
</script>
</head>
<body onload="init();">
<div id="YMap" style="height:600px; width:800px;"></div>
</body>
</html> |
Можно добавить и тип обычной карты
Теперь покажу как организовать поиск по Народной карте
Для поиска можно использовать элемент управления Поиск по карте YMaps.SearchControl.
У него прописывается специальное свойство geocodeProvider: "yandex#pmap"
<!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=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==&modules=pmap" type="text/javascript"></script>
<script type="text/javascript">
function init () {
var map = new YMaps.Map( document.getElementById("YMap") );
map.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, YMaps.MapType.PHYBRID]));
map.setCenter(new YMaps.GeoPoint(44.00189,56.324461), 12, YMaps.MapType.PMAP);
map.addControl(new YMaps.SearchControl({geocodeOptions: {geocodeProvider: "yandex#pmap"}}));
};
</script>
</head>
<body onload="init();">
<div id="YMap" style="height:400px; width:600px;"></div>
</body>
</html> |
Например, наберем в строке поиска Лобачевский Plaza, увидим результат поиска.
Для поиска по Народной карте используется класс Ymaps.Geocoder.
Процедура полностью аналогична сервесу геокодирования, но отличие заключается в том, что происходит обращение к другому поисковому сервису — yandex#pmap (а не yandex#map, который используется по умолчанию). Результаты поиска возвращаются в виде набора меток класса YMaps.PMap.SearchResult.
<!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=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==&modules=pmap" type="text/javascript"></script>
<script type="text/javascript">
function init () {
var map = new YMaps.Map( document.getElementById("YMap") );
map.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, YMaps.MapType.PHYBRID]));
map.setCenter(new YMaps.GeoPoint(44.00189,56.324461), 16, YMaps.MapType.PMAP);
map.addControl(new YMaps.SmallZoom());
var geocoder = new YMaps.Geocoder("КЗ Юпитер", {geocodeProvider:"yandex#pmap"});
map.addOverlay(geocoder);
YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
if (this.length()) {
map.addOverlay(this.get(0));
map.panTo(this.get(0).getGeoPoint())
}
else {
alert("Ничего не найдено");
}
});
YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (error) {
alert("Произошла ошибка: " + error.message)
});
};
</script>
</head>
<body onload="init();">
<div id="YMap" style="height:400px; width:600px;"></div>
</body>
</html> |
И еще пример, множественное геокодирование на Народной карте.
За основу взят пример из документации по адресу http://api.yandex.ru/maps/jsapi/examples/multiplygeocoding.html
В исходном примере произведены следующие изменения:
- добавлено подключение модуля Народной карты в строку загрузки API;
- определение центра карты:
- изменена строка с адресами геогравических объектов;
Было:
// Координаты или адреса географических объектов
var data = ["Москва", "Санкт-Петербург", "Екатеринбург", "Киев", "Одесса", "Сиферополь"];
Стало:
// Координаты или адреса географических объектов
var data = ["Нижний Новгород, Лобачевский Plaza", "Нижний Новгород, Клуб Матрица", "Нижний Новгород, школа №18", "Нижний Новгород, Нагорный дворец спорта"];
- изменена строка в функции geocode, вызова геокодера для одного объекта
Было:
var geocoder = new YMaps.Geocoder(request);
Стало:
var geocoder = new YMaps.Geocoder(request, {geocodeProvider:"yandex#pmap"});
Подробнее о поиске по Народной карте можно прочитать по адресу http://api.yandex.ru/maps/geocoder/doc/psearch/concepts/About.xml
а как ограничить поиск ?
что бы искал не по всей России )) а по определенному месту? на народных картах???
Вам может помочь вот эта статья Как ограничить область поиска?
Пример можно переделать для использования поиска по Народной карте, т.к. в обоих случаях используется один класс YMaps.Geocoder
помогла! спасибо!
а что должно меняться при реализации подобного примера для Народной карты?
http://api.yandex.ru/maps/ymapsml/examples/menufromymapsml.html
поясните плиз!
Написал заметку Как ограничить область поиска на Народной карте