Добавление маркера на карту
Обычный маркер добавить очень просто. Достаточно коротенького кода: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 - Число результатов, которое необходимо пропустить.
Пример с установкой маркеров и получение их адреса с помощью геокодера. Для установки маркера - кликните на карту.
