В этой заметке я хочу продолжить изучение новой версии API Яндекс.Карт 2.1, начало смотрите здесь.
А здесь я рассажу о работе с метками и группами меток и геокодировании, на примере создания карты фотографий из сервиса Instagram.
Пример работает так, Вы заходите на страницу с картой и в поле поиска вводите любой адрес, для данного адреса в радиусе от 1 до 5 километров на карту загружаются фотографии из Интаграм.
Рядом с картой также отображаются, найденные фото.
Теперь давайте рассмотрим код.
Для своего примера я использовал библиотеку Bootstrap.
И в самом начале код станицы имел следующий вид:
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Фото Instagram на Яндекс.Карте</title>
<link rel="nofollow" href="http://yandex.st/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://yandex.st/jquery/1.8.0/jquery.min.js"></script>
<script src="http://yandex.st/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
body, html {
padding:0;
margin: 0;
width: 100%;
height: 100%;
}
body {
padding-top: 50px;
}
.custom-search-form{
margin-top:5px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Instagram на Яндекс.Карте</a>
</div>
<div class="collapse navbar-collapse">
<div class="col-lg-3">
<div class="input-group custom-search-form">
<input type="text" class="form-control" name="search_address">
<span class="input-group-btn">
<button id="searchmap" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
</div>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
<div id="add_img" class="row">
</div>
</div>
</div>
</div><!-- /.container -->
</body>
</html> |
Далее я добавил Яндекс.Карту в левую часть страницы.
Это код:
<script type="text/javascript">
var myMap;
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
function init () {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map").
myMap = new ymaps.Map('map', {
// При инициализации карты обязательно нужно указать
// её центр и коэффициент масштабирования.
center: [56.326944, 44.0075], // Нижний Новгород
zoom: 12,
controls: ['zoomControl', 'typeSelector']
});
}
</script> |
и код вывода div для карты
<div id="map" style="width: 100%; height: 800px;"></div> |
Также нужно подключить API Яндекс.Карт 2.1. строкой:
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> |
Теперь нам нужно преобразовать адрес из формы поиска в географические координаты.
Это делает следующий код:
$("#searchmap").click(function () {
var address = $('input[name="search_address"]').val();
ymaps.geocode(address, {results: 1 }).then(function (res) {
var firstGeoObject = res.geoObjects.get(0),
// Координаты геообъекта.
coord_lat = firstGeoObject.geometry.getCoordinates()[0],
coord_lon = firstGeoObject.geometry.getCoordinates()[1],
// Область видимости геообъекта.
bounds = firstGeoObject.properties.get('boundedBy');
alert(coord_lat+' '+coord_lon);
myMap.setBounds(bounds, {
checkZoomRange: true // проверяем наличие тайлов на данном масштабе.
});
});
});
} |
Здесь по клику на кнопке в форме поиска, мы получаем значение адреса в строке:
var address = $('input[name="search_address"]').val(); |
А затем формируем запрос к геокодеру Яндекса, из ответа берем один самый первый результат.
ymaps.geocode(address, {results: 1 }) |
Получаем найденый объект
var firstGeoObject = res.geoObjects.get(0) |
Определяем значения координат:
coord_lat = firstGeoObject.geometry.getCoordinates()[0], coord_lon = firstGeoObject.geometry.getCoordinates()[1] |
Определяем область видимости геообъекта и масшабируем карту:
bounds = firstGeoObject.properties.get('boundedBy');
myMap.setBounds(bounds, {checkZoomRange: true }); |
Теперь, когда мы проверили, что все хорошо работает, нужно передать координаты в скрипт zapros.php, который используя API Instagram будет посылать запрос сервису и получать ответ от него.
Код файла zapros.php:
Рассмотрим код файла подробнее.
Первое, что нам понадобиться — это получить значение CLIENT_ID для нашего сайта.
Чтобы получить CLIENT ID нужно зайти на сайт разработчиков Instagram Developer Documentation.
Автроризоваться через Ваш аккаунт в Instagram.
Далее нажать на кнопку "Управлять программами".
В форме Developer SignUp ввести значения:
You website: url Вашего сайта;
Phone number: номер телефона;
What do you want to bulid with the API? Для чего Вы используете API Instagram.
Согласится с условиями использования и нажать кнопку "Регистрация"
Снова нажать на кнопку "Управлять программами".
Появилось сообщение, что Вы еще не зарегистрировали программы с API Instagram.
Нажимаем на кнопку "Регистрация новой программы".
В появившейся форме нужно в полях ввести название приложения латинскими буквами, описание и адрес сайта.
После нажатия на кнопку "Regisre", появятся данные для Вашего приложения, в том числе и CLIENT ID.
Далее все просто.
Мы формируем запрос к сервису и отправляем его, используя встроенную в php библиотеку Curl.
Полученный ответ в формате JSON, выводим с помощью оператора echo.
Теперь нам нужно получить данные из файла zapros.php, сформировать из них коллекцию меток и добавить ее на карту.
Коллекцию меток мы создаем в строке:
var myCollection = new ymaps.GeoObjectCollection({}, {preset: 'islands#redIcon'}); |
Часть кода preset: ‘islands#redIcon’ задает стиль для всех меток коллекции.
Вот код который, с использованием технологии AJAX, посылает значение координат файлу zapros.php и из ответа в формате JSON формируются метки, которые добавляются в коллекцию.
Перед тем, как добавлять метки, мы удаляем все из коллеекции
myCollection.removeAll(); |
Затем мы добавляем коллекцию на карту
myMap.geoObjects.add(myCollection); |
И устанавливаем отображение карты так, чтобы были видны все метки
myMap.setBounds(myCollection.getBounds()); |
В данном варианте я использовал стандартные метки.
Можно использовать свой значок для обозначения меток на карте.
Нужно изменить несколько строк кода:
var myCollection = new ymaps.GeoObjectCollection(); |
И код формирования меток:
myCollection.add(new ymaps.Placemark([json.data[i].location.latitude,json.data[i].location.longitude], {
balloonContent: '<strong>'+json.data[i].location.name+'</strong><br /><a href="'+json.data[i].link+'" target="_blank"><img src="'+json.data[i].images.thumbnail.url+'" /></a>'},
{
iconLayout: 'default#image',
iconImageHref: 'instagram-icon-map.png',
iconImageSize: [30, 30],
iconImageOffset: [-15, -15]
})); |
Здесь после задания содержимого балуна, мы задаем параметры отображения значка метки:
обозначение иконки — iconLayout;
файл с изображением — iconImageHref;
размер значка иконки в пикселях — iconImageSize;
смещение от точки привязки — iconImageOffset.
Как видите, у нас получился хороший рабочий пример, который можно дорабатывать и дополнять новым функционалом.