среда, 9 июля 2014 г.

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 - Число результатов, которое необходимо пропустить.


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



3 комментария:

  1. В примере Кластеризация маркеров хочу задать индивидуальный стиль для одиночных маркеров и кластеров, для кластеров разобрался (preset: 'islands#nightClusterIcons',) а для одиночных маркеров не могу понять, можете помочь?

    ОтветитьУдалить
  2. Разобрался, вот так нужно:
    GeoObjects[0] = new ymaps.GeoObject({
    geometry: { type: "Point", coordinates: [56.034, 36.992] },
    properties: {
    clusterCaption: 'Маркер №1',
    balloonContentBody: 'Содержимое балуна маркера №1.'}}, {
    preset: "islands#nightIcon"
    });

    ОтветитьУдалить
  3. Приветствую, замучился уже с кластеризатором. Имею объекты приблизительно 200 шт, у них собственные иконки (iconImageHref:) и данные для балунов. Если добавлять объекты присваивая им очередные номера: GeoObjects[0], GeoObjects[1], GeoObjects[3] и тд. и потом удалить промежуточный объект, то все ломается. В моей ситуации может понадобится удаление, добавление объектов в список и наведение порядка в номерах это тот еще гемор. Подскажите пожалуйста возможно ли как-то добавлять массив объектов без присвоения им порядковых номеров?

    ОтветитьУдалить