С момента публикаций заметок об использовании 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; charset2=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"
Запись опубликована
25 декабря 2011 в 14:17 Категория: Обзоры.
Вы можете следить за комментариями с помощью RSS 2.0-ленты.
Вы можете оставить комментарий или трекбэк с вашего сайта.
