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

Автор: | 25.12.2011
20 комментариев

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

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

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

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

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

<script type="text/javascript" src="http://maps.api.2gis.ru/1.0"></script>

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

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

<div id="myMapId" style="width:800px; height:600px"></div>

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

// Создаем обработчик загрузки страницы: 
        DG.autoload(function() { 
            // Создаем объект карты, связанный с контейнером: 
            var myMap = new DG.Map('myMapId'); 
            // Устанавливаем центр карты: 
            myMap.setCenter(new DG.GeoPoint(43.99150,56.31534)); 
            // Устанавливаем коэффициент масштабирования: 
            myMap.zoomTo(15); 
            // Добавляем элемент управления коэффициентом масштабирования: 
            myMap.controls.add(new DG.Controls.Zoom());             
        });

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

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

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

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

myMap.setCenter(new DG.GeoPoint(43.99150,56.31534));

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

myMap.zoomTo(15);

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

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

Посмотреть пример в действии

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

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

// Создаем балун: 
            var myBalloon = new DG.Balloons.Common({ 
                // Местоположение на которое указывает балун: 
                geoPoint: new DG.GeoPoint(43.99150,56.31534), 
                // Текст внутри балуна: 
                contentHtml: 'Нижний Новгород'
            }); 
            // Создаем маркер: 
            var myMarker = new DG.Markers.Common({ 
                // Местоположение на которое указывает маркер (в нашем случае, такое же, где и балун): 
                geoPoint: new DG.GeoPoint(43.99150,56.31534), 
                // Функция, которая будет вызвана при клике по маркеру: 
                clickCallback: function() { 
                    // Если балун еще не был добавлен: 
                    if (! myMap.balloons.getDefaultGroup().contains(myBalloon)) { 
                        // Добавить балун на карту: 
                        myMap.balloons.add(myBalloon); 
                    } else { 
                    // Если балун уже был добавлен на карту, но потом был скрыт: 
                        // Показать балун: 
                        myBalloon.show(); 
                    } 
                } 
            }); 
            // Добавить маркер: 
            myMap.markers.add(myMarker);

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

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

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

myMap.markers.add(myMarker);


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

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

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

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

<html>
<head> 
<title>API 2GIS - пример поиска фирмы</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=AMSxmUwBAAAA5WSyQAMAwB5YJ3rvTgSgDcPJynaIsXvmUkYAAAAAAAAAAABv1IbpHjj4ZIFUHyMRhnQtZxjXZg==" type="text/javascript"></script>  
 
<style type="text/css"> 
  html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 12px;
}
</style>
 
<script type="text/javascript">
 
var map;
 
YMaps.jQuery(document).ready(function(){		
 
map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(43.998779,56.316537), 13);
 
// Создание группы
var gCollection = new YMaps.GeoObjectCollection("default#greenPoint");
var bounds = new YMaps.GeoCollectionBounds();
 
map.addControl(new YMaps.ToolBar());					
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.TypeControl());
 
YMaps.jQuery('#search-form').submit(function() {
var whatName = YMaps.jQuery('#what').attr('value');
var whereName = YMaps.jQuery('#where').attr('value');			
		var url='http://catalog.api.2gis.ru/search?method=search&what='+whatName+'&page=1&pagesize=20&sort=relevance&where='+whereName+'&key=rudaxa6557&version=1.3&output=jsonp&sort=relevance&callback=?';
YMaps.jQuery.getJSON(url,function(json){
 
if(json.response_code == 200)
{
YMaps.jQuery("#rezultat").html('');
gCollection = new YMaps.GeoObjectCollection("default#greenPoint");
bounds = new YMaps.GeoCollectionBounds();
map.removeAllOverlays();
YMaps.jQuery.each(json.result,function(i,result){
 
// Создает метку в центре
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(result.lon,result.lat));
bounds.add(new YMaps.GeoPoint(result.lon,result.lat));
// Устанавливает содержимое балуна
placemark.name = result.name;
placemark.description = result.address;
 
// Добавляет метку на карту
gCollection.add(placemark); 
 
YMaps.jQuery("#rezultat").append(
		'<div class="post">'+
			'<a href="#" onClick="fullfirm('+"'"+result.id+"'"+','+"'"+result.hash+"'"+')">'+result.name+'</a>'+
			'<p>Адрес: '+result.address+'</p>'+
		'</div>'
	);	
 
	});	
map.setBounds(bounds);
map.addOverlay(gCollection);
}
else
{
alert('Отсутствуют результаты поиска');
}
 
});
});	
});	
 
function fullfirm(firm_id, firm_hash)
{
YMaps.jQuery("#rezultat").html('');
url3 = "http://localhost/2gis/newversion/firm-info.php?idfirm="+firm_id+"&hashfirm="+firm_hash;
YMaps.jQuery.getJSON(url3,function(json){
map.removeAllOverlays();
var info = '<h3>'+json[1]+'</h3><strong>Адрес:</strong> '+json[2]+', '+json[3]+'<br /><br />'+json[0]+'<br /><br /><strong>Рубрики:</strong> '+json[4]+'<br /><br />'+json[7]+json[8]+'<br /><br />'+json[9];
YMaps.jQuery("#rezultat").append(info);
if(json[5]!="" && json[6]!= "")
			{			
			map.setCenter(new YMaps.GeoPoint(json[5],json[6]),16);
			var placemark=new YMaps.Placemark(new YMaps.GeoPoint(json[5],json[6]));
			placemark.name='<div style="color:#ff0303;font-weight:bold;">'+json[1]+'</div>';
			placemark.description = '<strong>Адрес:</strong> '+json[3]+'</div></div>';
			map.addOverlay(placemark);
			placemark.openBalloon();
			}
 
});
}
</script>
 
</head>
<body> 
 
 <div id="YMapsID" style="float:left; width:600px; height:400px; margin-right: 10 px;"></div>
 
            <form id="search-form" action="javascript:alert("success!");">
                <table cellpadding="0" cellspacing="0">
                    <tbody><tr>
                        <td>
                            <div class="title">Что ищем?</div>
                            <input type="text"  id="what" value="" placeholder="Например мебель...">
                        </td>
                        <td>
                            <div class="title">Где ищем?</div>
                            <input type="text"  id="where" value="Нижний Новгород" placeholder="Где ищем?">
                        </td>
                        <td valign="bottom">
                            <input type="submit" id="submit" value="Найти!">
                        </td>
                    </tr>
                </tbody></table>
            </form>
 
	<div id="rezultat"></div>
</body> 
</html>

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

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=AMSxmUwBAAAA5WSyQAMAwB5YJ3rvTgSgDcPJynaIsXvmUkYAAAAAAAAAAABv1IbpHjj4ZIFUHyMRhnQtZxjXZg==" type="text/javascript"></script>

на

<script type="text/javascript" src="http://maps.api.2gis.ru/1.0"></script>

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

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

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

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

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

<script type="text/javascript">

Код:

var map;
 
YMaps.jQuery(document).ready(function(){		
 
map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(43.998779,56.316537), 13);
 
// Создание группы
var gCollection = new YMaps.GeoObjectCollection("default#greenPoint");
var bounds = new YMaps.GeoCollectionBounds();
 
map.addControl(new YMaps.ToolBar());					
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.TypeControl());
 
YMaps.jQuery('#search-form').submit(function() {
var whatName = YMaps.jQuery('#what').attr('value');
var whereName = YMaps.jQuery('#where').attr('value');			
		var url='http://catalog.api.2gis.ru/search?method=search&what='+whatName+'&page=1&pagesize=20&sort=relevance&where='+whereName+'&key=rudaxa6557&version=1.3&output=jsonp&sort=relevance&callback=?';
YMaps.jQuery.getJSON(url,function(json){
 
if(json.response_code == 200)
{
YMaps.jQuery("#rezultat").html('');
gCollection = new YMaps.GeoObjectCollection("default#greenPoint");
bounds = new YMaps.GeoCollectionBounds();
map.removeAllOverlays();
YMaps.jQuery.each(json.result,function(i,result){
 
// Создает метку в центре
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(result.lon,result.lat));
bounds.add(new YMaps.GeoPoint(result.lon,result.lat));
// Устанавливает содержимое балуна
placemark.name = result.name;
placemark.description = result.address;
 
// Добавляет метку на карту
gCollection.add(placemark); 
 
YMaps.jQuery("#rezultat").append(
		'<div class="post">'+
			'<a href="#" onClick="fullfirm('+"'"+result.id+"'"+','+"'"+result.hash+"'"+')">'+result.name+'</a>'+
			'<p>Адрес: '+result.address+'</p>'+
		'</div>'
	);	
 
	});	
map.setBounds(bounds);
map.addOverlay(gCollection);
}
else
{
alert('Отсутствуют результаты поиска');
}
 
});
});	
});

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

var myMap;
 
// Создаем обработчик загрузки страницы: 
DG.autoload(function() { 
// Создаем объект карты, связанный с контейнером: 
myMap = new DG.Map('myMapId'); 
// Устанавливаем центр карты: 
myMap.setCenter(new DG.GeoPoint(43.998779,56.316537)); 
// Устанавливаем коэффициент масштабирования: 
myMap.zoomTo(10); 
// Добавляем элемент управления коэффициентом масштабирования: 
myMap.controls.add(new DG.Controls.Zoom()); 
 
$('#search-form').submit(function() {
var whatName = $('#what').attr('value');
var whereName = $('#where').attr('value');			
var url='http://catalog.api.2gis.ru/search?method=search&what='+whatName+'&page=1&pagesize=20&sort=relevance&where='+whereName+'&key=rudaxa6557&version=1.3&output=jsonp&sort=relevance&callback=?';
$.getJSON(url,function(json){
 
if(json.response_code == 200)
{
$("#rezultat").html('');
 
myMap.markers.removeAll();
myMap.balloons.removeAll();
$.each(json.result,function(i,result){
 
var myBalloon = new DG.Balloons.Common({ 
                // Местоположение на которое указывает балун: 
                geoPoint: new DG.GeoPoint(result.lon,result.lat), 
                // Текст внутри балуна: 
                contentHtml: '<strong>'+result.name+'</strong><br />'+result.address
            }); 
 
// Создаем маркер: 
            var myMarker = new DG.Markers.Common({ 
                // Местоположение на которое указывает маркер (в нашем случае, такое же, где и балун): 
                geoPoint: new DG.GeoPoint(result.lon,result.lat), 
				icon: new DG.Icon("http://api-maps.yandex.ru/i/0.4/placemarks/pmrds.png", new DG.Size(19,20)),
                // Функция, которая будет вызвана при клике по маркеру: 
                clickCallback: function() { 
                    // Если балун еще не был добавлен: 
                    if (! myMap.balloons.getDefaultGroup().contains(myBalloon)) { 
                        // Добавить балун на карту: 
                        myMap.balloons.add(myBalloon); 						
                    } else { 
                    // Если балун уже был добавлен на карту, но потом был скрыт: 
                        // Показать балун: 
                        myBalloon.show(); 						
                    } 
                } 
            }); 
 
	// Добавить маркер: 
    myMap.markers.add(myMarker);
 
$("#rezultat").append(
		'<div class="post">'+
			'<a href="#" onClick="fullfirm('+"'"+result.id+"'"+','+"'"+result.hash+"'"+')">'+result.name+'</a>'+
			'<p>Адрес: '+result.address+'</p>'+
		'</div>'
	);	
	});	
}
else
{
alert('Отсутствуют результаты поиска');
}
 
});
});	
});

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

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

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

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

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

Ее новый код:

function fullfirm(firm_id, firm_hash)
{
$("#rezultat").html('');
url3 = "firm-info.php?idfirm="+firm_id+"&hashfirm="+firm_hash;
$.getJSON(url3,function(json){
 
myMap.markers.removeAll();
myMap.balloons.removeAll();
var info = '<h3>'+json[1]+'</h3><strong>Адрес:</strong> '+json[2]+', '+json[3]+'<br /><br />'+json[0]+'<br /><br /><strong>Рубрики:</strong> '+json[4]+'<br /><br />'+json[7]+json[8]+'<br /><br />'+json[9];
$("#rezultat").append(info);
 
 
if(json[5]!="" && json[6]!= "")
			{			
			myMap.setCenter(new DG.GeoPoint(json[5],json[6]), 16);		
 
			var myBalloon = new DG.Balloons.Common({ 
                // Местоположение на которое указывает балун: 
                geoPoint: new DG.GeoPoint(json[5],json[6]), 
                // Текст внутри балуна: 
                contentHtml: '<div style="color:#ff0303;font-weight:bold;">'+json[1]+'</div><br>'+'<strong>Адрес:</strong> '+json[3]+'</div></div>'
            }); 
 
			myMap.balloons.add(myBalloon);			
}
 
});
 
}

Еще изменить идентификатор контейнера карты с id="YMapsID" на id="myMapId"


Посмотреть работу примера в действии и окончательный код

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

    1. admin Автор записи

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

      Ответить ↓
  2. War

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

    Ответить ↓
  3. Александр

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

    Ответить ↓
  4. Александр

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

    Ответить ↓
  5. ustus

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

    Ответить ↓
  6. ustus

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

    Ответить ↓
  7. ustus

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

    Ответить ↓
  8. ustus

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

    Ответить ↓
  9. Михаил

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

    Ответить ↓
    1. admin Автор записи

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

      Ответить ↓
  10. Евгений

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

    Ответить ↓
  11. Михаил

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

    Ответить ↓
    1. admin Автор записи

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

      Ответить ↓
  12. Михаил

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

    Ответить ↓
  13. Михаил

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

    Ответить ↓
  14. kurman

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

    Ответить ↓
  15. Shalty

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

    Ответить ↓
    1. admin Автор записи

      Используйте какой-нибудь плагин jQuery для вывода модальных окон

      Ответить ↓

Добавить комментарий для ustus Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *