Клуб API Карт

Помогите сделать кластер для точек расставляемых из БД

sergei.spruga
10 августа 2015, 12:26

В общем проблема такая. Во первых начинающий програмист... И никак не могу допетрить как это сделать.

Есть бд(mysql) в которой координаты точек и наполнение балуна. Точек достаточно много, поэтому возникла необходимость сделать кластер для удобства пользователей.

Помогите кто чем сможет, уже часа 4 мучаюсь ничего не получается...

Код js-скрипта для вывода точек и карты:

 

ymaps.ready(init);

 

function init(){ 

            myMap = new ymaps.Map("map", {

                center: [56.03778829, 92.89742450],

                zoom: 12,

                controls: []

            }); 

        // Метка, содержимое балуна которой загружается с помощью AJAX.

        placemark = new ymaps.Placemark([56.05330270, 92.90406615], {

            iconContent: "Узнать адрес",

            hintContent: "Перетащите метку и кликните, чтобы узнать адрес"

        }, {

            // Запретим замену обычного балуна на балун-панель.

            balloonPanelMaxMapArea: 0,

            draggable: "true",

            preset: "islands#blueStretchyIcon",

            // Заставляем балун открываться даже если в нем нет содержимого.

            openEmptyBalloon: true

        });

        

     // Создадим провайдер пробок "Сейчас" с включенным слоем инфоточек.

    var actualProvider = new ymaps.traffic.provider.Actual({}, { infoLayerShown: true });

    // И затем добавим его на карту.

    actualProvider.setMap(myMap);

  

    $.getJSON("vivodpointsmap.php",

function(json){

for (i = 0; i < json.markers.length; i++) {

 

var myPlacemark = new ymaps.Placemark([json.markers[i].lat,json.markers[i].lon], {

// Свойства

iconContent: json.markers[i].icontext, 

balloonContent: 'новая <strong>камера</strong>',

        balloonContentHeader: json.markers[i].adres,

        balloonContentBody: json.markers[i].icontext,

        balloonContentFooter: '<button class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal'+ json.markers[i].id +'" >Смотреть On-line</button>'

}, {

    // Опции

   iconLayout: 'default#image',

           iconImageHref: 'http://my-net.ru/img/mclogomap3.png',

           iconImageSize: [30, 30],

           iconImageOffset: [-10, -10]

  });

   // Добавляем метку на карту

  myMap.geoObjects.add(myPlacemark);

  }

 }); 

}       

3 комментария
Подписаться на комментарии к посту

Можно использовать ROM, который вообще не требует какой-либо клиентской части (3 строчки) только генери нужный JSON на сервере.

При большом количестве точек – самое то

Подгрузка точек это не такая уж проблема, грузится все быстро и проблем от этого никто не испытывает. Главная проблема в наложении точек на карте. Нужно сделать при клике на кластер чтоб вылетел список из точек и по клику на списке спаво появлялся сам балун с картинкой и кнопкой для модального окна. Вот как примастачить этот кластер к моей карте я понять то и не могу...

По кластерам очень понятные примеры в "Песочнице". Там все необходимые кейсы для вас показаны (от создания до балунов):
https://tech.yandex.ru/maps/jsbox/2.1/clusterer_create