Yandex Карта на сайте

test
Наверное на текущий момент, карты Yandex являются одними из самых удобных и функциональных. Прикрутить их не сложно, не хватает только нормальных материалов с примерами. Понятно что есть официальная документация, которая позволяет сделать почти все что хочешь и много того что не хочешь, но в кипе информации, для разных версий API найти то нужное понимание не легко. Иногда проще по примеру разбираться что и за что отвечает.

Так вот, Яндекс.карты это не сложно. Есть два вида геокодирования, прямое и обратное. В одном случае мы получаем по текстовому адресу координаты на карте, во втором - по координатам получаем текстовый адрес. Вариантов размещения точек на карте API карт тоже имеет не один.

Небольшое отступление: Для себя я использую фреймворк Kohana 3, но в общем, это не вносит практически никаких корректив в код. Использую ORM, но не думаю что для кого-то будет сложность заменить $object->title на $row['title']. Главная же цель, показать что все не так сложно как кажется. Еще что следует учесть, что мы используем координаты заранее сохраненные в базе. Для этого в конце статьи есть ссылка к Yandex API, по которой можно получать координаты. Лучше всего один раз спросить API карт и сохранить результат у себя, чем лишними запросами дергать их API

Фронт, то что видит пользователь

В наш файл HTML с отображением нашей карты подключаем Yandex API карт и добавляем блок для карты.
<script src="http: //api-maps.yandex. ru/2.1/?lang=ru_RU" type="text/javascript"></script>
...
<div id="map" style="width: 100% !important; height: 500px"></div>
...


Мой контроллер так устроен, что при обычном вводе ссылки, он выводит страницу HTML, если в URL передать параметр json=1, то он отдаст данные в json формате. Вы же можете просто скормить данные в json формате по ссылке хоть выложив просто файл, с нужными данными по ссылке.
//когда документ загружен, вызываем функцию создания карты
$(document).ready({
loadMap();
});

//сама функция загрузки карты
function loadMap(){
            ymaps.ready(init);
            var myMap;

            function init () {
                            myMap = new ymaps.Map("map", {
                                center: [50.488128, 30.576955],//центр  нашей карты
                                zoom: 10 //приближение на карте
                            });

                        objectManager = new ymaps.ObjectManager({
                            // Чтобы метки начали кластеризоваться, выставляем опцию.
                            clusterize: true,
                            // ObjectManager принимает те же опции, что и кластеризатор.
                            gridSize: 32
                        });

                // Чтобы задать опции одиночным объектам и кластерам,
                // обратимся к дочерним коллекциям ObjectManager.
                objectManager.objects.options.set('preset', 'islands#greenDotIcon');
                objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
//добавим к нашей карте, objectManager, который и будет работать с объектами
                myMap.geoObjects.add(objectManager);
                var url = changeUrlJson();//вызываем функцию которая вернет нам текущий URL+&json=1
                $.ajax({
                    url: url  //ссылка по которой наш ObjectManager получит данные
                }).done(function(data) {
//когда завершили, добавляем данные в objectManager
                    objectManager.add(data);
                });
            }
        }

//функция возвращает наш текущий url добавляя параметр json = 1.
        function changeUrlJson(){
            var url = location.toString();
            if (url.indexOf('?')>0){
                url += '&json=1';
            }
            else
            {
                url += '?json=1';
            }
            return url;
        }

Backend, то откуда получаем данные.

Создаем класс Model_Yandex_Collection. В этом классе мы будем содержать всю нашу коллекцию меток.
class Model_Yandex_Collection extends Kohana_Model{
    public $type = 'FeatureCollection';
    public $features;//в этой переменной будет массив наших объектов
}


Создаем класс Model_Yandex_Geometry. Тип нашего объекта на карте и объект содержащий координаты.
class Model_Yandex_Geometry extends Kohana_Model{
    //"type": "Point", "coordinates": [55.831903, 37.411961]
    public $type = 'Point';
    public $coordinates = '';
}


Создаем класс Model_Yandex_Propperty. Свойства нашей метки на карте, такие как содержимое балуна(то что отображается по клику), Название кластера и подсказка.
class Model_Yandex_Propperty extends Kohana_Model{
    //{"balloonContent": "Содержимое балуна", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки"}
    public $balloonContent = '';
    public $clusterCaption = '';
    public $hintContent = '';
}


И класс, который будет содержать объекты обозначенных выше классов
class Model_Yandex_Point extends Kohana_Model{
    public $type = 'Feature';
    public $id = 0;
    public $geometry;
    public $properties;
//конструктор, в который передается объект содержащий нужные нам данные.
    function __construct($object)
    {
//создаем объект с геометрией нашей метки
        $this->geometry = new Model_Yandex_Geometry();
//задаем ей координаты для отображения
        $this->geometry->coordinates = array($object->coord1,$object->coord2);

//создаем объект с свойствами точки
        $this->properties = new Model_Yandex_Propperty();
//В балун можно загнать код HTML, чтобы было визуально и наглядно.
//Но лучше сразу удалять переносы строк и другие спец. символы
        $this->properties->balloonContent = "<b>".$object->title."</b>";
       
        $this->properties->hintContent = 'Подсказка';
        $this->properties->clusterCaption = 'Наш кластер';
//просто id нашей записи в базе данных,
        $this->id = $object->id;
    }
}


Ну и в финале, кусочек вывода карты
                $arr = array();
           $this->response->headers('Content-Type','application/json');
//получаем объекты, которые хотим разместить на карте.
            $objects = $records
                ->where('coords','!=','')
                ->order_by("date_order","desc")
                ->limit(20)
                ->find_all();
            foreach ($objects as $object)
            {
//загоняем в массив данные, создавая объект нашего класса <b>Model_Yandex_Point</b>,
//передавая в конструктор объект с данными
                $arr[] = new Model_Yandex_Point($object);
            }
//создадим коллекцию для наших объектов
            $result = new Model_Yandex_Collection();
//передадим наш массив с точками в наш объект-Коллекцию
            $result->features = $arr;
//выводим на страницу данные в формате JSON
            $this->response->body(json_encode($result));


Как получить координаты

Для этого достаточно передать в ссылке на Yandex API нужный запрос, например:
В XML формате:
http://geocode-maps.yandex.ru/1.x/?geocode=Москва, улица Новый Арбат, дом 24


В JSON формате:
http://geocode-maps.yandex.ru/1.x/?format=json&geocode=Москва, улица Новый Арбат, дом 24
Можно это сделать, например через CURL. Дальше дело техники.
Категория: 
Share/Save

Делитесь с друзьями в социальных сетях! Оставляйте комментарии!

Share/Save

Это Вам так же может быть интересно!