В данной записи мы с вами детально рассмотрим JavaScript API Яндекс.Карт и попрактикуемся в кастомизации карта от Яндекса. JavaScript API Яндекс.Карт представляет собой набор JavaScript-компонентов, предназначенных для создания интерактивных карт. Компоненты размещены на серверах Яндекса и доступны для использования сразу после их загрузки на страницу.
Документация по API Яндекс здесь — https://tech.yandex.ru/maps/doc/archive/jsapi/2.0/dg/concepts/about-docpage/
Песочница с примерами здесь — https://tech.yandex.ru/maps/jsbox/2.1/customSet_controls
Геокодинг
Для описания геокодинга я создал отдельную запись — https://prog-time.ru/api-yandeks-karty-geokoding/
Как подключается API от Яндекс
Для того чтобы подключить API нужно внутрь тега head прописать следующий код.
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>В первом примере мы подключаем полный пакет всех классов и методов ( GET запрос — load=package.full )
Могут быть загружены как все компоненты API, так и отдельные пакеты, содержащие только необходимые компоненты. Это позволяет регулировать объем трафика, передаваемого клиентскому приложению.
В следующем примере подключены только пакеты package.controls и package.geoObjects. Набор загружаемых пакетов задается параметром load.
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&load=package.controls,package.geoObjects" type="text/javascript"></script>Контейнер для карты
Для карты может использоваться любой контейнер который имеет высоту и ширину. Для него должен быть задан id к которому будет проводиться обращение.
<div id="myMap" style="width: 700px; height: 700px;"></div>Создание карты
Создавать карту следует после того, как веб-страница загрузится целиком. Это значит, что контейнер для карты создан и к нему можно обращаться по id. Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready().
<!-- КОНТЕЙНЕР ДЛЯ КАРТЫ -->
<div id="myMap" style="width: 700px; height: 700px;"></div>
<!-- СКРИПТ КАРТЫ -->
<script>
ymaps.ready(init);
function init(){
var myMap = new ymaps.Map ('myMap', {
center: [68.964033, 33.068066], //координаты центра
zoom: 10 //уровень приближения
});
}
</script>Динамическое удаление Яндекс Карты
Для динамического удаления карты можете использовать метод .destroy();
// Удаление карты.
myMap.destroy();Выбор типа карты
Вы можете указать тип карты. Для этого нужно прописать дополнительный параметр type с одним из значений.
yandex#map— тип карты «схема» (по умолчанию);yandex#satellite— тип карты «спутник»;yandex#hybrid— тип карты «гибрид»;yandex#publicMap— тип карты «народная карта»;yandex#publicMapHybrid— тип карты «народный гибрид».
<!-- КОНТЕЙНЕР ДЛЯ КАРТЫ -->
<div id="myMap" style="width: 700px; height: 700px;"></div>
<!-- СКРИПТ КАРТЫ -->
<script>
ymaps.ready(init);
function init(){
var myMap = new ymaps.Map ('myMap', {
center: [68.964033, 33.068066],
zoom: 10,
type: 'yandex#hybrid' //указываем тип карты гибрид
});
}
</script>Локализация. Выбор языка для карты
Для изменения языка, необходимо указать локализацию в GET запросе на API.
На данный момент поддерживаются следующие локализации.
lang=ru_RU;lang=en_US;lang=en_RU;lang=ru_UA;lang=uk_UA;lang=tr_TR.
<script src="https://api-maps.yandex.ru/2.1/?lang=en_US" type="text/javascript">Подробнее о локализации здесь — https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/localization-docpage/
Как добавить метку на яндекс карту
В API от Яндекс метки реализуются с помощью класса Placemark. Перед тем как добавить метку на карту, создайте экземпляр этого класса. При создании метки вы можете задать текст её иконки, а также текст балуна, который откроется при щелчке кнопкой мыши на этой метке.
<!-- КОНТЕЙНЕР ДЛЯ КАРТЫ -->
<div id="myMap" style="width: 700px; height: 700px;"></div>
<!-- СКРИПТ КАРТЫ -->
<script>
ymaps.ready(init);
function init(){
var myMap = new ymaps.Map ('myMap', {
center: [68.964033, 33.068066],
zoom: 7
});
/*СОЗДАЕМ ЭКЗЕМПЛЯР КЛАССА Placemark*/
var myPlacemark = new ymaps.Placemark([68.964033, 33.068066], {
iconContent: 'Мурманск', //текст на иконке
balloonContent: 'Красивый город' /*текст появляющийся после нажатия*/
}, {
preset: 'twirl#blueStretchyIcon' //тип иконки
});
/*ДОБАВЛЯЕМ СОЗДАННУЮ КНОПКУ НА НАШУ КАРТУ*/
myMap.geoObjects.add(myPlacemark);
}
</script>Вы можете использовать стандартные стили кнопок. Все стандартные стили кнопок находятся здесь — https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/
Как задать собственный стиль для кнопки
В качестве иконки метки можно установить собственное изображение. Для этого необходимо задать следующие опции:
iconLayout— значение ‘default#image’ или ‘default#imageWithContent’ для меток соответственно без текста и с текстом поверх картинки;iconImageHref— URL графического файла значка;iconImageSize— размер значка в пикселах;iconImageOffset— сдвиг значка в пикселах относительно точки привязки (задается, если «ножка» значка не находится в левом верхнем углу изображения;iconContentOffset— для меток с текстом сдвиг текста относительно точки привязки метки.
var myPlacemark = new ymaps.Placemark([55.76, 37.56], {}, {
iconLayout: 'default#image',
iconImageHref: '/maps/doc/jsapi/2.1/examples/images/myIcon.gif',
iconImageSize: [30, 42],
iconImageOffset: [-3, -42]
});Я предоставляю только часть информации, которая используется в большинстве случаев реализации карты. Вся подробная информация находится на сайте с документацией — https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/geoobjects-docpage/
Добавляем стандартные элементы управления на карту
Для того чтобы добавить стандартные кнопки управления картой нужно добавить следующий код.
<!-- КОНТЕЙНЕР ДЛЯ КАРТЫ -->
<div id="myMap" style="width: 700px; height: 400px;"></div>
<!-- СКРИПТ КАРТЫ -->
<script>
ymaps.ready(init);
function init(){
/*СОЗДАЕМ КАРТУ*/
var myMap = new ymaps.Map ('myMap', {
center: [55.75, 37.61],
zoom: 3,
type: 'yandex#satellite'
});
/*ПОДКЛЮЧАЕМ СТАНДАРТНЫЕ КНОПКИ УПРАВЛЕНИЯ*/
myMap.controls
.add('mapTools') // стандартные кнопки
.add('typeSelector') // переключатель типа карты
.add('zoomControl'); // изменение масштаба
}
</script>Можно изменить расположение кнопок управления.
<!-- КОНТЕЙНЕР ДЛЯ КАРТЫ -->
<div id="myMap" style="width: 700px; height: 400px;"></div>
<!-- СКРИПТ КАРТЫ -->
<script>
ymaps.ready(init);
function init(){
/*СОЗДАЕМ КАРТУ*/
var myMap = new ymaps.Map ('myMap', {
center: [55.75, 37.61],
zoom: 3,
type: 'yandex#satellite'
});
/*ПОДКЛЮЧАЕМ СТАНДАРТНЫЕ КНОПКИ УПРАВЛЕНИЯ*/
myMap.controls
.add('mapTools', {left:5, bottom:35})
.add('typeSelector', {left:5, top:5})
.add('zoomControl', {right:5, top:15});
}
</script>Добавление кастомных балунов на Яндекс карту
Балун — это всплывающее окно, в котором может быть показано любое HTML-содержимое. Одновременно на карте может быть показан только один балун.
<!-- КОНТЕЙНЕР ДЛЯ КАРТЫ -->
<div id="myMap" style="width: 700px; height: 700px;"></div>
<!-- СКРИПТ КАРТЫ -->
<script>
ymaps.ready(init);
function init() {
var tinkoMap = new ymaps.Map('myMap', { center: [55.750, 37.607], zoom: 11 });
// Масштабирование с помощью колесика мышки
tinkoMap.behaviors.enable('scrollZoom');
// Добавляем стандартные элементы управления
tinkoMap.controls.add('zoomControl').add('typeSelector').add('mapTools');
// Создаем метку центрального офиса
var centralOfficePlacemark = new ymaps.Placemark([55.752422, 37.77163], {
// Свойства
iconContent: 'Центральный',
name: 'Центральный офис',
address: '3-й проезд Перова поля, дом 8',
phone: 'тел: (495) 708-42-13, факc: (495) 708-42-14',
photo: '<img src="http://prog-time.ru/wp-content/uploads/2019/05/polnyj-razbor-api-yandeks-kart.jpg" alt="Центральный офис" />',
print: '<a href="" alt="Центральный офис" target="_blank" / rel="noopener noreferrer">Версия для печати</a>'
}, {
// Опции
preset: 'twirl#redStretchyIcon' // иконка растягивается под контент
});
// Создаем метку офиса продаж Сокол
var sokolOfficePlacemark = new ymaps.Placemark([55.810463, 37.524699], {
// Свойства
iconContent: 'Сокол',
name: 'Офис продаж Сокол',
address: 'ул. Часовая, д. 24, стр. 2',
phone: 'тел: (495) 708-42-13 доб. 401',
photo: '<img src="http://prog-time.ru/wp-content/uploads/2019/05/akkordeon-na-chistom-css.jpg" alt="Офис продаж Сокол" />',
print: '<a href="/images/print1.jpg" alt="Офис продаж Сокол" target="_blank" / rel="noopener noreferrer">Версия для печати</a>'
}, {
// Опции
preset: 'twirl#redStretchyIcon' // иконка растягивается под контент
});
// Создаем коллекцию, в которую будем добавлять метки
var tinkoCollection = new ymaps.GeoObjectCollection();
// Добавляем метки в коллекцию геообъектов
tinkoCollection
.add(centralOfficePlacemark)
.add(sokolOfficePlacemark);
// Создаем шаблон для отображения контента балуна
var tinkoBalloonLayout = ymaps.templateLayoutFactory.createClass(
'<p><strong>$[properties.name]</strong></p>' +
'<p>$[properties.address]</p>' +
'<p>$[properties.phone]</p>' +
'<p>$[properties.photo]</p>' +
'<p>$[properties.print]</p>'
);
// Помещаем созданный шаблон в хранилище шаблонов.
// Теперь наш шаблон доступен по ключу 'tinko#officeslayout'
ymaps.layout.storage.add('tinko#officeslayout', tinkoBalloonLayout);
// Задаем наш шаблон для балунов геобъектов коллекции
tinkoCollection.options.set({
balloonContentBodyLayout:'tinko#officeslayout',
// Максимальная ширина балуна в пикселах
balloonMaxWidth: 350
});
// Добавляем коллекцию геообъектов на карту
tinkoMap.geoObjects.add(tinkoCollection);
}
</script>Добавляем многоугольник на Яндекс карту
Для того чтобы добавить фигуру на карту нужно прописать координаты его углов. Делается это так…
<!-- КОНТЕЙНЕР ДЛЯ КАРТЫ -->
<div id="myMap" style="width: 100%; height: 400px;"></div>
<!-- СКРИПТ КАРТЫ -->
<script>
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map ('myMap', {
center: [55.75, 37.61],
zoom: 10
});
// создаем многоугольник
var myPolygon = new ymaps.Polygon([[
// координаты вершин внешней границы многоугольника
[55.778607,37.553126],
[55.792923,37.647883],
[55.724391,37.709681],
[55.708887,37.583339]
]]);
myMap.geoObjects.add(myPolygon);
}
</script>Добавление круга на карту
Круг на карте создаётся с помощью метода ymaps.Circle.
ymaps.ready(init);
function init() {
// Создаем карту.
var myMap = new ymaps.Map("myMap", {
center: [55.76, 37.64],
zoom: 10
});
// Создаем круг.
var myCircle = new ymaps.Circle([
// Координаты центра круга.
[55.76, 37.60],
// Радиус круга в метрах.
10000
], {
// Описываем свойства круга.
// Содержимое балуна.
balloonContent: "Радиус круга - 10 км",
// Содержимое хинта.
hintContent: "Подвинь меня"
}, {
// Задаем опции круга.
// Включаем возможность перетаскивания круга.
draggable: true,
// Цвет заливки.
// Последний байт (77) определяет прозрачность.
// Прозрачность заливки также можно задать используя опцию "fillOpacity".
fillColor: "#DB709377",
// Цвет обводки.
strokeColor: "#990066",
// Прозрачность обводки.
strokeOpacity: 0.8,
// Ширина обводки в пикселях.
strokeWidth: 5
});
// Добавляем круг на карту.
myMap.geoObjects.add(myCircle);
}Ломанная с возможностью редактирования
ymaps.ready(init);
function init() {
// Создаем карту.
var myMap = new ymaps.Map("map", {
center: [55.72, 37.64],
zoom: 10
});
// Создаем ломаную.
var myPolyline = new ymaps.Polyline([
// Указываем координаты вершин.
[55.80, 37.50],
[55.80, 37.40],
[55.70, 37.50],
[55.70, 37.40]
], {}, {
// Задаем опции геообъекта.
// Цвет с прозрачностью.
strokeColor: "#00000088",
// Ширину линии.
strokeWidth: 4,
// Максимально допустимое количество вершин в ломаной.
editorMaxPoints: 6,
// Добавляем в контекстное меню новый пункт, позволяющий удалить ломаную.
editorMenuManager: function (items) {
items.push({
title: "Удалить линию",
onClick: function () {
myMap.geoObjects.remove(myPolyline);
}
});
return items;
}
});
// Добавляем линию на карту.
myMap.geoObjects.add(myPolyline);
// Включаем режим редактирования.
myPolyline.editor.startEditing();
}Редактор многоугольника
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.73, 37.75],
zoom: 10
});
// Создаем многоугольник без вершин.
var myPolygon = new ymaps.Polygon([], {}, {
// Курсор в режиме добавления новых вершин.
editorDrawingCursor: "crosshair",
// Максимально допустимое количество вершин.
editorMaxPoints: 5,
// Цвет заливки.
fillColor: '#00FF00',
// Цвет обводки.
strokeColor: '#0000FF',
// Ширина обводки.
strokeWidth: 5
});
// Добавляем многоугольник на карту.
myMap.geoObjects.add(myPolygon);
// В режиме добавления новых вершин меняем цвет обводки многоугольника.
var stateMonitor = new ymaps.Monitor(myPolygon.editor.state);
stateMonitor.add("drawing", function (newValue) {
myPolygon.options.set("strokeColor", newValue ? '#FF0000' : '#0000FF');
});
// Включаем режим редактирования с возможностью добавления новых вершин.
myPolygon.editor.startDrawing();
}Указание региона на карте
Для работы с регионами в Яндекс Картах вам нужно знать код страны региона и номер уровня показа. Для выделения региона воспользуемся методом ymaps.regions.load который в качестве первого параметра передаём код страны (для России указываем «RU»), а вторым параметром указываем.
ymaps.ready(function () {
geoMap = new ymaps.Map('map', {
center: [55.73, 37.75],
type: "yandex#map",
zoom: 3
});
var lastCollection = 0,
lng = 'ru',
contr = '60189',
level = '1';
ymaps.regions.load('RU', {
lang: lng,
quality: level
}).then(function (result) {
lastCollection = result.geoObjects;
geoMap.geoObjects.add(lastCollection);
}, function () {
//alert('no response');
});
});Указание регионов России на карте с подписью
Теперь давайте выделим регионы России на Яндекс Карте с указанием названия региона.
Для точного расчёта областей нам понадобится дополнительный плагин от разработчиков Яндекс Карты — util.calculateArea
Ссылка на GitHub — https://github.com/yandex/mapsapi-area
А для добавления надписей названий регионов воспользуемся плагином polylabeler.
Ссылка на GitHub — https://github.com/yandex/mapsapi-polylabeler
ymaps.ready(['polylabel.create']).then(function () {
var map = new ymaps.Map('myMapBlock', {
center: [58, 40],
zoom: 5,
controls: []
}, {
maxZoom: 18,
minZoom: 2
});
let zoomControl = new ymaps.control.ZoomControl({
options: {
size: 'small',
float: 'none',
position: {
bottom: 145,
right: 10
}
}
});
map.controls
.add(zoomControl);
// Создадим менеджер объектов.
var objectManager = new ymaps.ObjectManager();
// Загрузим регионы.
ymaps.borders.load('RU', {
lang: 'ru',
quality: 2
}).then(function (result) {
var options = {
// Стандартный вид текста будет темный с белой обводкой.
labelDefaults: 'dark',
// Макет подписи.
labelLayout: '<div>{{properties.hintContent}}</div>',
// Цвет заливки.
fillColor: 'rgba(27, 125, 190, 0.7)',
// Цвет обводки.
strokeColor: 'rgba(255, 255, 255, 0.8)',
// Отключим показ всплывающей подсказки при наведении на полигон.
openHintOnHover: false,
// Размер текста подписей зависит от масштаба.
// На уровнях зума 3-6 размер текста равен 12, а на уровнях зума 7-18 равен 14.
labelTextSize: {'3_6': 12, '7_18': 14},
cursor: 'grab',
labelDotCursor: 'pointer',
// Допустимая погрешность в расчете вместимости подписи в полигон.
labelPermissibleInaccuracyOfVisibility: 4
};
// Добавляем полигоны в менеджер объектов.
objectManager.add(result.features.map(function (feature) {
feature.id = feature.properties.iso3166;
// В свойство regionName запишем название региона.
feature.properties.regionName = feature.properties.iso3166;
// Присваиваем регионам опции, нужные для модуля подписей полигонов.
feature.options = options;
return feature;
}));
map.geoObjects.add(objectManager);
// Запускаем модуль подписей.
var polylabel = new ymaps.polylabel.create(map, objectManager);
// Подписываемся на события подписей.
objectManager.events.add(['labelmouseenter', 'labelmouseleave'], function (event) {
// Получаем полигон, на котором произошло событие.
var polygon = objectManager.objects.getById(event.get('objectId'));
// Получаем состояние подписи.
var state = polylabel.getLabelState(polygon);
// Получаем проекцию позиции подписи, чтобы показать на этом месте всплывающую подсказку.
var centerProj = map.options.get('projection').toGlobalPixels(state.get('center'), map.getZoom());
if (event.get('type') === 'labelmouseenter' && state.get('currentVisibility') === 'dot') {
objectManager.objects.hint.open(polygon.id, centerProj);
} else {
objectManager.objects.hint.close();
}
});
});
});
Добавление группы меток на Яндекс Карту
Для создания коллекций используем метод ymaps.GeoObjectCollection(). Для добавления меток в коллекцию мы создаём метку с помощью метода ymaps.Placemark(), а затем добавляем её в коллекцию с помощью метода add().
В качестве примера я создам 2 коллекции с красными и зелёными метками. Параметры для меток я заранее запишу в массив groups, в котором укажу координаты и типы кнопок.
// массив параметров меток
let groups = [
{
style: "islands#redIcon",
items: [
{
center: [50.45351, 30.516489],
name: "Место 1"
},
{
center: [50.454433, 30.529874],
name: "Место 2"
},
{
center: [50.452463, 30.520676],
name: "Место 3"
},
{
center: [50.454299, 30.523294],
name: "Место 4"
}
]
},
{
style: "islands#darkGreenIcon",
items: [
{
center: [50.449129, 30.516839],
name: "Место 1"
},
{
center: [50.449897, 30.524306],
name: "Место 2"
},
{
center: [50.449897, 30.524306],
name: "Место 3"
},
{
center: [50.448143, 30.528683],
name: "Место 4"
},
{
center: [50.451431, 30.512376],
name: "Место 5"
}
]
},
];
ymaps.ready(init);
function init() {
// Создание экземпляра карты.
let myMap = new ymaps.Map('map', {
center: [50.458997, 30.518067],
zoom: 14
}, {
searchControlProvider: 'yandex#search'
})
for(let groupId in groups) {
let group = groups[groupId]
// Коллекция для геообъектов группы.
let collection = new ymaps.GeoObjectCollection(null, { preset: group.style });
// Добавляем коллекцию на карту.
myMap.geoObjects.add(collection);
let lengthItem = group.items.length,
item = {};
for (let j = 0; j < lengthItem; j++) {
item = group.items[j];
// Создаем метку.
let placemark = new ymaps.Placemark(item.center, { balloonContent: item.name });
// Добавляем метку в коллекцию.
collection.add(placemark);
}
}
// Выставляем масштаб карты чтобы были видны все группы.
myMap.setBounds(myMap.geoObjects.getBounds());
}Создание кластеризатора
ymaps.ready(function () {
var myMap = new ymaps.Map('myMapBlock', {
center: [55.751574, 37.573856],
zoom: 9,
behaviors: ['default', 'scrollZoom']
}, {
searchControlProvider: 'yandex#search'
}),
/**
* Создадим кластеризатор, вызвав функцию-конструктор.
* Список всех опций доступен в документации.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary
*/
clusterer = new ymaps.Clusterer({
/**
* Через кластеризатор можно указать только стили кластеров,
* стили для меток нужно назначать каждой метке отдельно.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml
*/
preset: 'islands#invertedVioletClusterIcons',
/**
* Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
*/
groupByCoordinates: false,
/**
* Опции кластеров указываем в кластеризаторе с префиксом "cluster".
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark.xml
*/
clusterDisableClickZoom: true,
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false
}),
/**
* Функция возвращает объект, содержащий данные метки.
* Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
* Поле balloonContentBody - источник данных для контента балуна.
* Оба поля поддерживают HTML-разметку.
* Список полей данных, которые используют стандартные макеты содержимого иконки метки
* и балуна геообъектов, можно посмотреть в документации.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointData = function (index) {
return {
balloonContentHeader: '<font size=3><b><a target="_blank" href="https://yandex.ru">Здесь может быть ваша ссылка</a></b></font>',
balloonContentBody: '<p>Ваше имя: <input name="login"></p><p>Телефон в формате 2xxx-xxx: <input></p><p><input type="submit" value="Отправить"></p>',
balloonContentFooter: '<font size=1>Информация предоставлена: </font> балуном <strong>метки ' + index + '</strong>',
clusterCaption: 'метка <strong>' + index + '</strong>'
};
},
/**
* Функция возвращает объект, содержащий опции метки.
* Все опции, которые поддерживают геообъекты, можно посмотреть в документации.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointOptions = function () {
return {
preset: 'islands#violetIcon'
};
},
points = [
[55.831903,37.411961], [55.763338,37.565466], [55.763338,37.565466], [55.744522,37.616378], [55.780898,37.642889], [55.793559,37.435983], [55.800584,37.675638], [55.716733,37.589988], [55.775724,37.560840], [55.822144,37.433781], [55.874170,37.669838], [55.716770,37.482338], [55.780850,37.750210], [55.810906,37.654142], [55.865386,37.713329], [55.847121,37.525797], [55.778655,37.710743], [55.623415,37.717934], [55.863193,37.737000], [55.866770,37.760113], [55.698261,37.730838], [55.633800,37.564769], [55.639996,37.539400], [55.690230,37.405853], [55.775970,37.512900], [55.775777,37.442180], [55.811814,37.440448], [55.751841,37.404853], [55.627303,37.728976], [55.816515,37.597163], [55.664352,37.689397], [55.679195,37.600961], [55.673873,37.658425], [55.681006,37.605126], [55.876327,37.431744], [55.843363,37.778445], [55.875445,37.549348], [55.662903,37.702087], [55.746099,37.434113], [55.838660,37.712326], [55.774838,37.415725], [55.871539,37.630223], [55.657037,37.571271], [55.691046,37.711026], [55.803972,37.659610], [55.616448,37.452759], [55.781329,37.442781], [55.844708,37.748870], [55.723123,37.406067], [55.858585,37.484980]
],
geoObjects = [];
/**
* Данные передаются вторым параметром в конструктор метки, опции - третьим.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark.xml#constructor-summary
*/
for(var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i), getPointOptions());
}
/**
* Можно менять опции кластеризатора после создания.
*/
clusterer.options.set({
gridSize: 80,
clusterDisableClickZoom: true
});
/**
* В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#add
*/
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
/**
* Спозиционируем карту так, чтобы на ней были видны все объекты.
*/
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true
});
});
