Yandex Maps API. Установка и определение маршрутов

В этой статье я опишу два вида работы с маршрутами. 1 - автоматическая прокладка маршрута между двумя точками на карте. 2 - ручная прокладка маршрута с помощью линии.

Автоматический маршрут

Воспользуемся стандартной функцией прокладки маршрута:

var start_point = [56, 37];
var end_point = [57, 39];
ymaps.route([start_point, end_point], {
 mapStateAutoApply: true,
 avoidTrafficJams: false,
 multiRoute: false,
 routingMode: "auto",
 viaIndexes: []
}).then(function (route) {
 var points = route.getWayPoints();  
 points.get(0).properties.set('balloonContent', '');
 points.get(1).properties.set('balloonContent', 'Дистанция: '+route.getHumanLength()+'
Продолжительность: '+route.getHumanTime());
 points.get(0).properties.set('iconContent', 'А');
 points.get(1).properties.set('iconContent', 'Б');
 map.geoObjects.add(route);
}, function (error) {
 // Ошибка error.message
});

start_point - Координаты или адрес точки начала маршрута
end_point - Координаты или адрес точки конца маршрута
mapStateAutoApply - Автоматически позиционировать карту
avoidTrafficJams - Включает построение маршрута с учетом пробок. При использовании опции учитывайте, что объезд пробок не всегда возможен.
multiRoute - Позволяет строить мультимаршруты.
routingMode - Тип маршрутизации для мультимаршрутов (auto - автомобильная маршрутизаци, masstransit - маршрутизация с использованием общественного транспорта)
viaIndexes – Индексы транзитных точек мультимаршрута.

Посмотреть пример

Ручной маршрут

Свой маршрут можно проложить с помощью линии (polyline), но учтите, что линия не будет обращать внимания на дороги и вообще возможность пройти по указанному маршруту.

var poly = new ymaps.Polyline([[56, 37], [57, 37], [57, 38], [55, 38]], {
 hintContent: "Ломаная линия",
 balloonContent: ""
}, {
 cursor: "pointer",
 draggable: true,
 hasBalloon: true,
 hasHint: true,
 interactiveZIndex: false,
 opacity: 1,
 openBalloonOnClick: true,
 openEmptyBalloon: false,
 openEmptyHint: false,
 openHintOnHover: true,
 strokeColor: '#000000',
 strokeOpacity: 0.8,
 strokeStyle: '',
 strokeWidth: 5,
 syncOverlayInit: false,
 visible: true
});
map.geoObjects.add(poly); 
map.setBounds(poly.geometry.getBounds());
poly.editor.startEditing(); 
poly.editor.startDrawing(); 

hintContent - содержимое всплывающей подсказки ломаной
balloonContent - содержимое балуна ломаной
cursor - Вид курсора над ломаной
draggable - Определяет возможность перетаскивания ломаной
hasBalloon - Определяет наличие поля balloon у ломаной
hasHint - Определяет наличие поля hint у ломаной
interactiveZIndex - Включает режим автоматического изменения z-index ломаной в зависимости от ее состояния.
opacity - Прозрачность
openBalloonOnClick - Определяет, показывать ли балун при щелчке на ломаной.
openEmptyBalloon - Определяет, показывать ли пустой балун при щелчке на ломаной.
openEmptyHint - Определяет, показывать ли пустой хинт при наведении указателя мыши на ломаную.
openHintOnHover - Определяет, показывать ли хинт при наведении указателя мыши на ломаную.
strokeColor - Цвет линии или обводки
strokeOpacity - Прозрачность линии или обводки
strokeStyle - Стиль линии или обводки
strokeWidth - Толщина линии или обводки
syncOverlayInit - Включает синхронное добавление оверлея на карту. По умолчанию добавление оверлея осуществляется асинхронно, что позволяет предотвратить зависания браузера при добавлении на карту большого числа ломаных. Однако, асинхронное добавление не позволяет получать доступ к оверлею сразу после добавления ломаной на карту.расстановка стрелок через каждые n пикселей марштура
visible - Определяет видимость ломаной

Для завершения редактирования и рисования линии используйте функции:

poly.editor.stopEditing(); 
poly.editor.stopDrawing();

Чтобы получить актуальный массив с координатами всего маршрута воспользуйтесь этим кодом:

var points = poly.geometry.getCoordinates();

Посмотреть пример

На этом я закончу статьи по Yandex Maps. До тех пор пока не появятся запросы на описание каких-либо пропущенных мною функций.

Список статей о Yandex Maps API смотрите здесь

Yandex Maps API. Маркеры, кластеры и геокодирование

Добавление маркера на карту

Обычный маркер добавить очень просто. Достаточно коротенького кода:

var Placemark = new ymaps.Placemark([55.8, 37.6]);
map.geoObjects.add(Placemark);

и маркер будет установлен. Однако это будет пустой и стандартный маркер.
Сделаем его более уникальным, заменив изображение маркера на свое:

var Placemark = new ymaps.Placemark(
      [55.8, 37.6],
      {},
      {
        iconLayout: 'default#image',
        iconImageHref: 'marker_image.png',
        iconImageSize: [20, 30],
        iconImageOffset: [-10, -20]
      }
);
map.geoObjects.add(Placemark);

marker_image.png - замените на свое изображение маркера
iconImageSize - размер изображения
iconImageOffset - смещение изображения (чтобы якорь маркера был в нужной точке)

Или заменив изображение маркера на другое из стандартного набора:

var Placemark = new ymaps.Placemark([55.8, 37.6], {}, {
        preset: 'islands#redIcon'
});
map.geoObjects.add(Placemark);

Другие варианты переменной preset смотрите здесь:

Посмотреть варианты

Изображение маркера изменили, теперь нужно установить на маркер балун (всплывающее окошко при клике на маркер).

Балун добавляется в маркер:

var Placemark = new ymaps.Placemark(
      [55.8, 37.6],
      {
          balloonContent: 'Содержание балуна',
          iconContent: "1"
      },
      {
          balloonCloseButton: true,
          hideIconOnBalloonOpen: false
      }
);
map.geoObjects.add(Placemark);

balloonContent - Содержание балуна. Можно использовать html.
iconContent - Текст выводится над иконкой маркера
balloonCloseButton - включена ли кнопка закрытия балуна.
hideIconOnBalloonOpen - включено ли открытия и закрытие балуна кликом на иконку маркера.

Посмотреть пример

Кластеризация маркеров

В картах яндекса есть встроенная функция кластеризации любых объектов карты.
Для примера создадим маркеры в виде гео-объектов:

var GeoObjects = [];
GeoObjects[0] = new ymaps.GeoObject({
    geometry: { type: "Point", coordinates: [56.034, 36.992] },
    properties: {
        clusterCaption: 'Маркер №1',
        balloonContentBody: 'Содержимое балуна маркера №1.'
    }
});
GeoObjects[1] = new ymaps.GeoObject({
    geometry: { type: "Point", coordinates: [56.021, 36.983] },
    properties: {
        clusterCaption: 'Маркер №2',
        balloonContentBody: 'Содержимое балуна маркера №2.'
    }
});

var clusterer = new ymaps.Clusterer({ 
    gridSize: 64, 
    groupByCoordinates: false,
    hasBalloon: true,
    hasHint: true,
    margin: 10,
    maxZoom: 10,
    minClusterSize: 2,
    showInAlphabeticalOrder: false,
    viewportMargin: 128,
    zoomMargin: 0, 
    clusterDisableClickZoom: true 
});
clusterer.add(GeoObjects);
map.geoObjects.add(clusterer);

gridSize – Размер ячейки кластеризации в пикселях
groupByCoordinates – Специальный режим работы кластеризатора при котором кластеры образуются только из гео-объектов с одинаковыми координатами.
hasBalloon – Открывать ли балун кластера, если он есть
hasHint – Отображать ли всплывающую подсказку кластера, если она есть
margin – Число или массив чисел, задающие отступ для центра кластера относительно ячеек кластеризации. Если задано одно число - оно применяется ко всем сторонам. Если задано два - то это вертикальные и горизонтальные отступы соответственно. Если задан массив из 4х чисел, то это отступы top, right, bottom, left.
maxZoom – Максимальный коэффициент масштабирования карты, на котором происходит кластеризация объектов. Даже если кластеризация отключена, будут показаны только объекты в видимой области карты.
minClusterSize – Минимальное количество объектов, образующих кластер.
showInAlphabeticalOrder – Показывать метки в балуне в алфавитном порядке при нажатии на кластер. Гео-объекты кластера сортируются по специальным полям в данных этих гео-объектов - clusterCaption (или balloonContentHeader, если предыдущее поле не определено). По умолчанию гео-объекты показываются в порядке добавления в кластеризатор.
viewportMargin – Отступ для области, в которой производится кластеризация. Кластеризация проводится для видимой области карты. С помощью данной опции область кластеризации расширяется по отношению к видимой области карты.
zoomMargin – Отступы от границ видимой области карты, которые соблюдаются при приближении карты после клика на кластере.
clusterDisableClickZoom – Отключить масштабирование с помощью клика на кластер

Функция очистки кластера может быть полезна:

clusterer.removeAll();

Посмотреть пример

Геокодирование

Геокодирование бывает двух видов:
1) Поиск адреса по координатам
2) Поиск координат по адресу
У карт яндекса запросы к этим двум типам геокодирования не отличаются. Ищем адрес - вводим адрес текстом (текстовой переменной), ищем координаты - вводим координаты массивом чисел: [56, 37].

var Geocoder = ymaps.geocode("Адрес", { kind: 'house', results: 1, skip: 0 });
Geocoder.then(
    function (res) {
        map.geoObjects.add(res.geoObjects);
    },
    function (err) {
        // Адрес не найден
    }
);

Массив res.geoObjects может содержать не одну запись, если похожий адрес был найден в нескольких разных точках.

kind - Вид топонима: house, street, metro, district, locality
results - Максимальное количество возвращаемых результатов.
skip - Число результатов, которое необходимо пропустить.


Пример с установкой маркеров и получение их адреса с помощью геокодера. Для установки маркера - кликните на карту.

Посмотреть пример

Список статей о Yandex Maps API смотрите здесь

Yandex Maps API. Элементы управления и свой интерфейс карты

В этой статье будут описаны все настройки интерфейса карты и примеры установки в карту своих элементов интерфейса

Пример функции загрузки карты с расширенными настройками:

var map;
ymaps.ready(function () {
map = new ymaps.Map("map-canvas", {
center: [56, 37],
zoom: 8,
type: "yandex#map",
behaviors: ['DblClickZoom', 'Drag', 'LeftMouseButtonMagnifier', 'MultiTouch', 'RightMouseButtonMagnifier', 'RouteEditor', 'Ruler', 'ScrollZoom'],
controls: ['zoomControl', 'searchControl', 'routeEditor', 'fullscreenControl', 'TypeSelector', 'TrafficControl', 'RulerControl', 'GeolocationControl']
});
});

Описание всех использованных выше настроек:
center - координата, которая будет использована в качестве центра карты после ее загрузки (56 - широта, 37 - долгота). Обязательная настройка.
zoom - зум над этой координатой (1 - максимальное отдаление, больше значение - сильнее увеличение. Максимальное значение зависит от точки (в городе может быть более 20, в лесу около 15). Обязательная настройка.
type - тип карты по-умолчанию (map, satellite, hybrid, publicMap, publicMapHybrid).

behaviors:
DblClickZoom - включает поведение карты - масштабирование карты двойным щелчком кнопки мыши
Drag - включает поведение карты - перетаскивание карты с помощью мыши либо одиночного касания
LeftMouseButtonMagnifier - включает поведение карты - масштабирование карты при выделении области левой кнопкой мыши
MultiTouch - включает поведение карты - масштабирование карты мультисенсорным касанием
RightMouseButtonMagnifier - включает поведение карты - масштабирование карты при выделении области правой кнопкой мыши
RouteEditor - включает поведение карты - редактор маршрутов
Ruler - включает поведение карты - "Линейка". Позволяет отмечать на карте точки и отображать расстояния между ними
ScrollZoom - включает поведение карты - масштабирование карты колесом мыши

controls:
zoomControl - включает элемент управления масштабом карты
searchControl - включает элемент управления "Поиск по карте". Позволяет обрабатывать поисковый запрос пользователя и отображать результат в панели и на карте
routeEditor - включает элемент управления "Редактор маршрутов"
fullscreenControl - включает элемент управления "Полноэкранный режим".
TypeSelector - включает элемент управления "Типы карты".
TrafficControl - включает панель управления пробками на карте.
RulerControl - включает элемент управления "Линейка".
GeolocationControl - включает элемент управления "геолокация". Позволяет отразить положение пользователя на карте.

С настройками разобрались, теперь добавим свой элемент в интерфейс карты.
Добавьте следующий код в конце функции ymaps.ready (или вынесите в отдельную функцию. как в примере):

   var UI = $("#mapUI").html();
   $("#mapUI").remove();
   $('#map-canvas').prepend('
'+UI+'
');
   $("#map-canvas").css('position', 'relative');
   $("#mapUI").css({
    position: 'absolute',
    left: '45%',
    top: '0px',
    padding: '10px',
    backgroundColor: '#FFF',
    border: 'solid 1px #000',
    zIndex: '1',
    margin: '8px'
   });

Этот код вставит весь код из контейнера с id=mapUI в верхнюю центральную часть карты. Добавить в этот контейнер можно все что угодно. Это может быть обычная кнопка, или же таблица (не забудьте добавить фон, т.к. по-умолчанию фон будет прозрачным и за вашим элементом интерфейса сразу начнется карта).
Все стили к элементу можно добавить как показано в примере. Для простоты была использована библиотека jquery, не забудьте подключить и ее.
Расположение элемента изменяется стилями left (или right) и top.

Посмотреть пример

Список статей о Yandex Maps API смотрите здесь

Yandex Maps API. Подключение карты.

Дошла очередь и до яндекс карт. Снова начнем с самого простого - подключить карту к своему сайту.

Для начала нужно загрузить скрипт самой карты. Установите этот код в любое место:

Контейнер, куда будет остановлена карта:

Изменяя размеры и расположение контейнера - будет изменяться вся карта.

Теперь функция загрузки карты:

  var map;
  ymaps.ready(function () {
   map = new ymaps.Map("map-canvas", {
    center: [56, 37],
    zoom: 8,
    type: "yandex#map"
   });
  });

center - координата, которая будет использована в качестве центра карты после ее загрузки (56 - широта, 37 - долгота).
zoom - зум над этой координатой (1 - максимальное отдаление, больше значение - сильнее увеличение. Максимальное значение зависит от точки (в городе может быть более 20, в лесу около 15).
type - тип карты по-умолчанию (map, satellite, hybrid, publicMap, publicMapHybrid).

И все готово. Карта будет выведена на вашем сайте.

Посмотреть пример

В следующей статье вы сможете прочитать о настройках интерфейса карты и добавлении своих элементов в интерфейс.

Список статей о Yandex Maps API смотрите здесь