Добавление маркера на карту
Обычный маркер добавить очень просто. Достаточно коротенького кода: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 - Число результатов, которое необходимо пропустить.
Пример с установкой маркеров и получение их адреса с помощью геокодера. Для установки маркера - кликните на карту.
В примере Кластеризация маркеров хочу задать индивидуальный стиль для одиночных маркеров и кластеров, для кластеров разобрался (preset: 'islands#nightClusterIcons',) а для одиночных маркеров не могу понять, можете помочь?
ОтветитьУдалитьРазобрался, вот так нужно:
ОтветитьУдалитьGeoObjects[0] = new ymaps.GeoObject({
geometry: { type: "Point", coordinates: [56.034, 36.992] },
properties: {
clusterCaption: 'Маркер №1',
balloonContentBody: 'Содержимое балуна маркера №1.'}}, {
preset: "islands#nightIcon"
});
Приветствую, замучился уже с кластеризатором. Имею объекты приблизительно 200 шт, у них собственные иконки (iconImageHref:) и данные для балунов. Если добавлять объекты присваивая им очередные номера: GeoObjects[0], GeoObjects[1], GeoObjects[3] и тд. и потом удалить промежуточный объект, то все ломается. В моей ситуации может понадобится удаление, добавление объектов в список и наведение порядка в номерах это тот еще гемор. Подскажите пожалуйста возможно ли как-то добавлять массив объектов без присвоения им порядковых номеров?
ОтветитьУдалить