Архивы yandex

Yandex map: динамическая загрузка содержимого балуна

12.12.2023 Павел Грибов WEB

Задача: динамически загружать контент по клику на метку, в т.ч. и при кластеризации

Решение:

Добавим события открытия балуна по клике на метку из карты и кластера:

                objectManager.objects.events.add('balloonopen', function (e) {
                    console.log("Открыт балун вне кластера");
                    var id = e.get('objectId'),
                    geoObject = objectManager.objects.getById(id);
                    downloadContent([geoObject], id);
                });          

                objectManager.clusters.events.add('balloonopen', function (e) {
                    var id = e.get('objectId'),
                        cluster = objectManager.clusters.getById(id),
                        geoObjects = cluster.properties.geoObjects;
                        console.log("Открыт балун из кластера..");
                        downloadContent(geoObjects, id, true);
                });   
....
function downloadContent(obj,id,isCluster){    
    console.log("Загружаем объект:");
    aids = obj.map(function (geoObject) {return geoObject.id;});
    if ((obj.length)<200) {
        $("#global").addClass("loading");   
            $.post("?r=inications/get_points_content", {  
            ids:aids,
        }).done(function(data) {            
            obj.forEach(function (geoObject) {
              //console.log("--присваиваем новое тело балуна");                
              if (geoObject.properties.balloonContentBody.includes("<l></l>")){
                //console.log("-подменяю содержимое балуна!");  
                //console.log(geoObject);
                geoObject.properties.balloonContentBody =geoObject.properties.balloonContentBody.replace("<l></l>",data.result[geoObject.id].content);      
                if (isCluster!==true){
                    objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());
                } else {
                    objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());
                };
                //setNewData();
              }            
            });                   
            $("#global").removeClass("loading");                    
        });
    } else {
     ToastMessage("error","Кластер слишком велик","Кластер слишком велик для того чтобы его раскрыть. Увеличьте масштаб и попробуйте снова!",6000);   
    };
}

objectManager.objects.events.add('balloonopen', function (e) {

console.log("Открыт балун вне кластера");

var id = e.get('objectId'),

geoObject = objectManager.objects.getById(id);

downloadContent([geoObject], id);

});

objectManager.clusters.events.add('balloonopen', function (e) {

var id = e.get('objectId'),

cluster = objectManager.clusters.getById(id),

geoObjects = cluster.properties.geoObjects;

console.log("Открыт балун из кластера..");

downloadContent(geoObjects, id, true);

});

....

function downloadContent(obj,id,isCluster){

console.log("Загружаем объект:");

aids = obj.map(function (geoObject) {return geoObject.id;});

if ((obj.length)<200) {

$("#global").addClass("loading");

$.post("?r=inications/get_points_content", {

ids:aids,

}).done(function(data) {

obj.forEach(function (geoObject) {

//console.log("--присваиваем новое тело балуна");

if (geoObject.properties.balloonContentBody.includes("<l></l>")){

//console.log("-подменяю содержимое балуна!");

//console.log(geoObject);

geoObject.properties.balloonContentBody =geoObject.properties.balloonContentBody.replace("<l></l>",data.result[geoObject.id].content);

if (isCluster!==true){

objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());

} else {

objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());

};

//setNewData();

}

});

$("#global").removeClass("loading");

});

} else {

ToastMessage("error","Кластер слишком велик","Кластер слишком велик для того чтобы его раскрыть. Увеличьте масштаб и попробуйте снова!",6000);

};

}

К сожалению, если в кластере собрано очень много меток (более 200), то обновление идёт довольно долго, потому пришлось немножко ограничить загрузку. В хорошем варианте, нужно бы отслеживать клик по заголовку списка в кластере, но это пока не удалось

Оставить комментарий javascript, maps, yandex, динамическая загрузка

Yandex Map: отображение меток в зависимости от масштаба карты

28.07.2023 Павел Грибов WEB

Работал давече с плагином HeatMap для яндекс карт. Всё хорошо, но один нюанс — невозможно навесить эвент на клик по точке карты. Ну или не нашел как. Пришлось задействовать «финт ушами» — при достижении определенного приближения, принудительно отрисовывать поверх точек heatmap свои «кликабельные» точки. В результете родилось нечто подобное:

obj = data.result; 
                heatmap = new ymaps.Heatmap(obj, {
                    // Радиус влияния.
                    radius: 15,
                    // Нужно ли уменьшать пиксельный размер точек при уменьшении зума. False - не нужно.
                    dissipating: false,
                    // Прозрачность тепловой карты.
                    opacity: 0.8,
                    // Прозрачность у медианной по весу точки.
                    intensityOfMidpoint: 0.05,
                    // JSON описание градиента.
                    gradient: {
                           0.1: 'rgba(128, 255, 0, 0.7)',
                           0.2: 'rgba(255, 255, 0, 0.8)',
                           0.7: 'rgba(234, 72, 58, 0.9)',
                           0.9: 'rgba(162, 36, 25, 1)',
                           1.0: 'rgba(0, 0, 0, 1)'
                       }
                });
                heatmap.options.events.add('click', function (e) {   
                    console.log(e);
                    var objectId = e.get('objectId');    
                    //objectManager.objects.balloon.open(objectId);
                });                    
                heatmap.setMap(myMap); 

        
       
        
                myMap.events.add('boundschange', function () {
                    size = myMap.getZoom();
                    console.log(size);
                    if (size>15){
                        console.log("-- пора бы и нарисовать метки");
                        if (all_deleted==true){
                            console.log("--- рисуем метки");
                            // настройки кластеризакции
                            objectManager = new ymaps.ObjectManager({
                                clusterDisableClickZoom: true,
                                geoObjectOpenBalloonOnClick: true,
                                clusterize: false
                            }); //кластеризуем
                            objectManager=SetClusterProp(objectManager);     
                            myMap.geoObjects.add(objectManager);   
                            objectManager.add(obj);  
                            objectManager.objects.events.add('click', function (e) {   
                                console.log(e);
                                var objectId = e.get('objectId');    
                                objectManager.objects.balloon.open(objectId);
                            });                                        
                          all_deleted=false;  
                        };
                    } else {
                        if (all_deleted==false){
                            myMap.geoObjects.remove(myMap.geoObjects.get(myMap.geoObjects.getLength()-1));                          
                            all_deleted=true;  
                        };
                    };
                });

obj = data.result;

heatmap = new ymaps.Heatmap(obj, {

// Радиус влияния.

radius: 15,

// Нужно ли уменьшать пиксельный размер точек при уменьшении зума. False - не нужно.

dissipating: false,

// Прозрачность тепловой карты.

opacity: 0.8,

// Прозрачность у медианной по весу точки.

intensityOfMidpoint: 0.05,

// JSON описание градиента.

gradient: {

0.1: 'rgba(128, 255, 0, 0.7)',

0.2: 'rgba(255, 255, 0, 0.8)',

0.7: 'rgba(234, 72, 58, 0.9)',

0.9: 'rgba(162, 36, 25, 1)',

1.0: 'rgba(0, 0, 0, 1)'

}

});

heatmap.options.events.add('click', function (e) {

console.log(e);

var objectId = e.get('objectId');

//objectManager.objects.balloon.open(objectId);

});

heatmap.setMap(myMap);

myMap.events.add('boundschange', function () {

size = myMap.getZoom();

console.log(size);

if (size>15){

console.log("-- пора бы и нарисовать метки");

if (all_deleted==true){

console.log("--- рисуем метки");

// настройки кластеризакции

objectManager = new ymaps.ObjectManager({

clusterDisableClickZoom: true,

geoObjectOpenBalloonOnClick: true,

clusterize: false

}); //кластеризуем

objectManager=SetClusterProp(objectManager);

myMap.geoObjects.add(objectManager);

objectManager.add(obj);

objectManager.objects.events.add('click', function (e) {

console.log(e);

var objectId = e.get('objectId');

objectManager.objects.balloon.open(objectId);

});

all_deleted=false;

};

} else {

if (all_deleted==false){

myMap.geoObjects.remove(myMap.geoObjects.get(myMap.geoObjects.getLength()-1));

all_deleted=true;

};

});

Оставить комментарий api, heatmap, map, yandex

MapYandex API: получение расстояний между двумя координатами

26.05.2023 Павел Грибов WEB

Задача: получить расстояние от точки до точки по автомобильным дорогам

Решение: воспользуемся вызовом route:

ymaps.route([
                [data[i]["to_latlatitude"],data[i]["to_longitude"]],
                [data[i]["from_latlatitude"],data[i]["from_longitude"]]
            ], {
                mapStateAutoApply: true
            }).then(function (route) {
                console.log("Маршрут:");
                console.log(route);
                console.log(route.getLength());

            });

ymaps.route([

[data[i]["to_latlatitude"],data[i]["to_longitude"]],

[data[i]["from_latlatitude"],data[i]["from_longitude"]]

], {

mapStateAutoApply: true

}).then(function (route) {

console.log("Маршрут:");

console.log(route);

console.log(route.getLength());

});

Оставить комментарий map, yandex, маршрут, расстояние

Получение геокординат по адресу

16.05.2023 Павел Грибов PHP

Задача: получить координаты по известному адресу

Решение: воспользуемся API Яндекс.Карты по геокодированию. К сожалению бесплатная версия ограничена 1000 запросов в сутки. Но это обходимо возможностью «растягивать» во времени заполнение БД


            $address= urlencode($maddress->address);
            $rul="https://geocode-maps.yandex.ru/1.x/?geocode=".$address."&format=json&results=1&apikey=".$api_map;
            var_dump($rul);
            $ch = curl_init($rul);        
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json')); 
            $res_curl=json_decode(curl_exec($ch));            
            if ($res_curl!=null){
                if (isset($res_curl->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos)){
                 $coors=$res_curl->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos;     
                 $coors= explode(" ",$coors);
                 var_dump($coors);
                }              
            };

$address= urlencode($maddress->address);

$rul="https://geocode-maps.yandex.ru/1.x/?geocode=".$address."&format=json&results=1&apikey=".$api_map;

var_dump($rul);

$ch = curl_init($rul);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));

$res_curl=json_decode(curl_exec($ch));

if ($res_curl!=null){

if (isset($res_curl->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos)){

$coors=$res_curl->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos;

$coors= explode(" ",$coors);

var_dump($coors);

}

};

Оставить комментарий map, php, yandex, геокодирование

Список выбора с checkbox на карте yandex

16.02.2021 Павел Грибов WEB

Чтобы получилось примерно такое:

Нужно выполнить довольно много телодвижений:

    // кнопка фильтров
  var listBoxItems = ['111', '222']
       .map(function(title) {
            return new ymaps.control.ListBoxItem({
                data: {
                    content: title
                },
                state: {
                    selected: false
                }
            })
        }),
        // Список 
        listBoxControl = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр',
                title: 'Фильтр'
            },
            items: listBoxItems,
            state: {
                // Признак, развернут ли список.
                expanded: false,
                filters: listBoxItems.reduce(function(filters, filter) {
                    filters[filter.data.get('content')] = filter.isSelected();
                    return filters;
                }, {})
            }
        });
    myMap.controls.add(listBoxControl);   
    listBoxControl.events.add(['select', 'deselect'], function(e) {
        var listBoxItem = e.get('target');
        console.log(e);
        var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
        filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
        console.log(filters);
        listBoxControl.state.set('filters', filters);
    });

// кнопка фильтров

var listBoxItems = ['111', '222']

.map(function(title) {

return new ymaps.control.ListBoxItem({

data: {

content: title

state: {

selected: false

}

})

}),

// Список

listBoxControl = new ymaps.control.ListBox({

data: {

content: 'Фильтр',

title: 'Фильтр'

items: listBoxItems,

state: {

// Признак, развернут ли список.

expanded: false,

filters: listBoxItems.reduce(function(filters, filter) {

filters[filter.data.get('content')] = filter.isSelected();

return filters;

}, {})

}

});

myMap.controls.add(listBoxControl);

listBoxControl.events.add(['select', 'deselect'], function(e) {

var listBoxItem = e.get('target');

console.log(e);

var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));

filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();

console.log(filters);

listBoxControl.state.set('filters', filters);

});

Оставить комментарий api, checkbox, input, listbox, map.yandex, yandex, список

1 2 »

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30