0

Доброго времени суток.

Делаю проект, карта городов, в каждом городе есть много организаций, у каждой организации есть описание и еще некоторые данные.
Использую карту яндекс и кластеризацию.
Я сделал таблицу objects в которой есть поля name, latitude, longitude, description
Я смог сделать что бы координаты организаций брались из таблицы и исходя из этого маркеры кластеризуются на карте.
Но у меня не получается сделать что бы при щелчке уже на конкретный маркер, в тоолтипе отображались данные из таблицы из полей name, description. Вот код который формирует балуны меток:

var getPointData = function (index) {
        return {
        balloonContentBody: 'балун <strong>метки ' + index + '</strong>',
        clusterCaption: 'метка <strong>' + index + '</strong>'
        };
    }

Сейчас по щелчку на маркер, выводится сообщение балун метки + его индекс, это 1, 2, и т.д.
Подскажите пожалуйста как реализовать что бы данные брались из таблицы objects?
Вот код во вьюшке:

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
    center: [48.548043,66.904544],
    zoom: 15
    }, {
    searchControlProvider: 'yandex#search'
    }),
    clusterer = new ymaps.Clusterer({
    preset: 'islands#invertedVioletClusterIcons',
    clusterHideIconOnBalloonOpen: false,
    geoObjectHideIconOnBalloonOpen: false
    });

    /**
    * Кластеризатор расширяет коллекцию, что позволяет использовать один обработчик
    * для обработки событий всех геообъектов.
    * Меняю цвет иконок и кластеров при наведении.
    */
    clusterer.events
    // Слушаю сразу несколько событий, указывая их имена в массиве.
    .add(['mouseenter', 'mouseleave'], function (e) {
    var target = e.get('target'),
    type = e.get('type');
    if (typeof target.getGeoObjects != 'undefined') {
    // Событие произошло на кластере.
    if (type == 'mouseenter') {
    target.options.set('preset', 'islands#invertedPinkClusterIcons');
    } else {
    target.options.set('preset', 'islands#invertedVioletClusterIcons');
    }
    } else {
    // Событие произошло на геообъекте.
    if (type == 'mouseenter') {
    target.options.set('preset', 'islands#pinkIcon');
    } else {
    target.options.set('preset', 'islands#violetIcon');
    }
    }
    });


    var getPointData = function (index) {
        return {
        balloonContentBody: 'балун <strong>метки ' + index + '</strong>',
        clusterCaption: 'метка <strong>' + index + '</strong>'
        };
    },
    getPointOptions = function () {
    return {
    preset: 'islands#violetIcon'
    };
    },
    points = [

            @foreach($objects as $object)
                [
                    {{ $object->latitude.','.$object->longitude }}
                ],
            @endforeach

    ],
    geoObjects = [];

    for(var i = 0, len = points.length; i < len; i++) {
    geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i), getPointOptions());
    }

    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);

    myMap.setBounds(clusterer.getBounds(), {
    checkZoomRange: true
    });
});
3
  • зависит от того как фронтенд связан с бекендом. REST API или вы используете Blade? То есть маркеры на карту вы добавили (latitude, longitude), но не можете сделать чтобы для подсказки брались данные (name, description). Где код в котором получены данные из таблицы objects и где из этих данных генерируются метки? 17 окт 2018 в 21:17
  • Илья, приветсвую. Я вставил весь код в тело вопроса.
    – Dolphin
    18 окт 2018 в 4:39
  • Во фронтенде я использую blade.
    – Dolphin
    20 окт 2018 в 5:06

1 ответ 1

1

А что координаты работают когда они в массиве в следующем формате?

[
['latitude,longitude'], // координаты 1
['latitude,longitude'] // координаты 2
...
]

Странно как-то.

Нужно передавать в массив остальные данные, а не только координаты, примерно так:

        @foreach($objects as $object)
            {
                balloonContentBody: {{ $object->balloonContentBody }}
                clusterCaption: {{ $object->clusterCaption }},
                coordinates: '{{ $object->latitude.','.$object->longitude }}'
            },
        @endforeach

Потом вот этот код у вас добавлять маркеры:

for(var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i), getPointOptions());
}

Нужно в getPointData передавать нужные данные агрументами чтобы оно отображало что надо:

    for(var i = 0, len = points.length; i < len; i++) {
      geoObjects[i] = new ymaps.Placemark(
         points[i].coordinates, 
         getPointData(points[i].balloonContentBody, points[i].clusterCaption), 
         getPointOptions()
      );
    }

Функция будет получать другие параметры (данные каждого объекта):

var getPointData = function (balloonContentBody, clusterCaption) {
    return {
    balloonContentBody: 'балун <strong>метки ' + balloonContentBody + '</strong>',
    clusterCaption: 'метка <strong>' + clusterCaption + '</strong>'
    };
},
4
  • Выдает ошибку на стороне фронтенда: Uncaught SyntaxError: Unexpected identifier. А если массив объектов из бэкенда, во фронтенд передать в виде json массива. То как можно вывести данные из json во вьюшке, в этом случае?
    – Dolphin
    22 окт 2018 в 10:07
  • Вот ссылка: neweconomy.thevision.kz
    – Dolphin
    22 окт 2018 в 10:39
  • Все, получилось! balloonContentBody: '{{ $business->name }}', нужно в одинарные ковычки обернуть. И далее, coordinates: [ {{ $business->latitude.','.$business->longitude }} ], в квадратные скобки.
    – Dolphin
    22 окт 2018 в 10:43
  • Илья спасибо! Дай Бог вам всего самого лучшего! =)))
    – Dolphin
    22 окт 2018 в 10:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.