Кластеризация меток яндекс карт

115
09 августа 2019, 03:30

ВСЕМ ПРИВЕТ!

Помогите решить проблему кластеризации меток. Есть карта на ней отображаются метки с разными цветами (зеленые, красные, оранжевые). При клике на метку выводиться балун с названием метки и описание, подсказка показывается при наведении на метку. Так как метки будут близко друг к другу нужно кластеризовать, но сохранив функционал отображения информации как описал выше.

Вот содержимое JS карт

var myMap, myCollection;
    ymaps.ready(init);
  function init () {
        myMap = new ymaps.Map("map", {
        center: [55.753237, 37.618687],
        zoom: 10.31
        }, {
            balloonMaxWidth: 300
            });
    myMap.controls
        .add('zoomControl');
        myMap.controls.add('typeSelector')  ;
    var MyBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass(
    '<strong>$[properties.name]</strong>' +
    '<p>$[properties.description]</p>'
    );
    $.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], {
            name: json.markers[i].icontext,
            description: json.markers[i].balloontext,
            hintContent: json.markers[i].hinttext
            },{
                balloonContentLayout: MyBalloonContentLayoutClass,
                preset: json.markers[i].styleplacemark
            });
  myMap.geoObjects.add(myPlacemark);
}

});
    $('#image').change(function(){
        $('.add-on').find('img:first').attr('src', $('#image option:selected').attr('data-path'));
    });
    $('#addmarker').click( function () {
    var name = $('#marker_name').val();
    var hintText = $('#marker_hint').val();
    var address = $('#marker_address').val();
    var adlat = $('#marker_lat').val();
    var adlon = $('#marker_lon').val();
    var balloonText = $('#marker_balloontext').val();
    var stylePlacemark = $("#image option:selected").val();

    var myGeocoder = ymaps.geocode([adlat,adlon]);
    myGeocoder.then(
        function (res) {
            var firstGeoObject = res.geoObjects.get(0);
            coords = firstGeoObject.geometry.getCoordinates();
            marker = new ymaps.Placemark(coords,
            {
            name: name,
            description: balloonText,
            hintContent: hintText
            },{
                balloonContentLayout: MyBalloonContentLayoutClass,
                preset: stylePlacemark
            });
            $("#res").load("addmetki.php", {icontext: name, hinttext : hintText, balloontext : balloonText, styleplacemark : stylePlacemark, lat : firstGeoObject.geometry.getCoordinates()[0], lon : firstGeoObject.geometry.getCoordinates()[1]});

            myMap.geoObjects.add(marker);
        },
        function (err) {
            alert('Ошибка');
        }
    );

    });
    }

файл vivodpointsmap.php

<?php
header('Content-Type: text/html; charset=utf-8');
require ("bd.php");
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
$result = mysql_query("SELECT * FROM mapmetki");
if(mysql_num_rows($result)>0)
{
while ($mar = mysql_fetch_array($result))
{
$json =  array(icontext=>$mar['iconText'], hinttext=>$mar['hintText'], balloontext=>$mar['balloonText'], styleplacemark=>$mar['stylePlacemark'], lat=>$mar['lat'], lon=>$mar['lon']);
$markers[] = $json;
}
}
$points = array(markers=>$markers);
echo json_encode($points);
}

?>
READ ALSO
Как передать id button-а из html в js объект?

Как передать id button-а из html в js объект?

Помогите пожалустаИмею такую ситуацию, есть две кнопки с разными id в HTML файлe, мне нужно взять все id всех кнопок с классом

131
Сумма в зависимости от значения

Сумма в зависимости от значения

есть 2 слайдера(input range) подскажите, как в зависимости от значений month и cash менять значение формулыДумал функцию создать и передавать параметры,...

95
Выводить данные с БД mysql на график (библиотека D3)

Выводить данные с БД mysql на график (библиотека D3)

Есть база данных и впринципе сами графики но вот проблема, я не понимаю как их связать между собой чтоб данные которые постоянно обновляются...

109