Продолжаем изучать API Яндекс.Карт 2.1. Работаем с метками

Автор: | 21.05.2014

В этой заметке я хочу продолжить изучение новой версии API Яндекс.Карт 2.1, начало смотрите здесь.

А здесь я рассажу о работе с метками и группами меток и геокодировании, на примере создания карты фотографий из сервиса Instagram.

Пример работает так, Вы заходите на страницу с картой и в поле поиска вводите любой адрес, для данного адреса в радиусе от 1 до 5 километров на карту загружаются фотографии из Интаграм.

Рядом с картой также отображаются, найденные фото.

Смотрите работу примера

Фото Instagram на Яндекс.Карте

Теперь давайте рассмотрим код.

Для своего примера я использовал библиотеку 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.

Загрузить архив с файлами.

Как видите, у нас получился хороший рабочий пример, который можно дорабатывать и дополнять новым функционалом.

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

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