Метка: yandex

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

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);   
    };
}

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

Оставить комментарий , , ,

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

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;  
                        };
                    };
                });
Оставить комментарий , , ,

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

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());

            });
Оставить комментарий , , ,

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

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);
                }              
            };
Оставить комментарий , , ,

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

WEB

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

 

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

Оставить комментарий , , , , , ,
1 2