API Яндекс Карт. Основные методы и классы. Добавление карты на сайт — PROG-TIME

API Яндекс Карт. Основные методы и классы. Добавление карты на сайт

21.09.2020
Содержание:

В данной записи мы с вами детально рассмотрим 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
    });
});
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Наши планы
  • Написание материала для курса по разработке ботов на Telegram
  • Разработка универсального парсера на PHP

Поддержите мой сайт!

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Контакты для связи

Технология на prog-time
Telegram
https://t.me/prog_time_bot