AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

Несколько точек Яндекс карты?

Задача состоит в том что должна быть яндекса карта с не ограниченным количеством точек и при клике должно выходить описание с адресом а так же кастомная метка. Я это все реализовал для одной точки с помощью этой статьи Ссылка 1

Метку кастомизировал, описание вывел по клику. Теперь проблема когда я пытаюсь добавлять множество точек то кастомная метка работает только на ту, что я сделал но описание не выходит у других. Это я пытался интегрировать с помощью этой статьи Ссылка 2

Мой Код для одной метки выглядит сейчас вот так:
ymaps.ready(init);
    var myMap;

    function init() {

        myMap = new ymaps.Map("YMapsID", {
            center: [43.238253, 76.945465], // Координаты объекта
            zoom: 13, // Маштаб карты
            controls: [] // Отключаем элементы управления.
        });

        // Добавим на карту ползунок масштаба и линейку.
        myMap.controls.add(
            new ymaps.control.ZoomControl()
        );

        // Отключаем zoom на скролле мыши
        myMap.behaviors.disable('scrollZoom');

        myPlacemark = new ymaps.Placemark([43.238253, 76.945465], { // Координаты метки объекта
            balloonContent: "<div class='ya-map'><div class='ya-map__city'>Алматы</div><div class='ya-map__title'>Название филиала</div><p>Богенбай батыра, 172 2 этаж, офис 72 вход с Желтоксан</p><p>+7 777 727 35 63<br>+7 777 727 35 63<br>+7 777 727 35 63</p></div>" // Надпись метки
        }, {
            iconLayout: 'default#image',

            // Своё изображение иконки метки
            iconImageHref: "%=static=%img/general/ic-map-marker.svg",

            // Размер мкетки
            iconImageSize: [40, 50],

            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-20, -25]
        });

        myMap.geoObjects.add(myPlacemark);
        //myPlacemark.balloon.open();

    };


Как сюда интегрировать код из второй статьи чтобы все метки были кастомизированные + выходило у каждого описание.
Для дальнейшей передачи на бэк энд.

Вот демо с несколькими метками Тык
  • Вопрос задан
  • 1597 просмотров
Решения вопроса 1
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
ymaps.ready(function () {
    var map = new ymaps.Map(
        'map-pickups', 
        {center: [55.75, 37.64], zoom: 10, controls: ['zoomControl', 'fullscreenControl']}, 
        {searchControlProvider: 'yandex#search'}
    );
    var objManager = new ymaps.ObjectManager({
        clusterize: true,
        gridSize: 32,
        clusterDisableClickZoom: true
    });
    objManager.objects.options.set('preset', 'islands#blueDotIcon');
    objManager.clusters.options.set('preset', 'islands#blueClusterIcons');
    map.geoObjects.add(objManager);
    
    var pickups = {
        type: 'FeatureCollection',
        features: []
    };
    var coordinates = [
        [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.691046, 37.711026],
        [55.723123, 37.406067],
        [55.843363, 37.778445]
    ];
    $.each(coordinates, function (id, coordinates) {
        pickups.features.push({
            type: 'Feature', 
            id: id, 
            geometry: {type: 'Point', coordinates: coordinates}, 
            properties: {
                balloonContentHeader: 'ПВЗ Grastin №' + id, 
                balloonContentBody: 'Адрес доставки, описание, контакты, время работы.', 
                balloonContentFooter: 'График работы: пн-сб 10:00-20:00', 
                clusterCaption: 'ПВЗ Grastin №' + id, 
                hintContent: 'ПВЗ Grastin №' + id
            }
        });
    });
    objManager.add(pickups);
    map.setBounds(map.geoObjects.getBounds());
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы