Архивы map.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, список

Яндекс карты: отображение очень большого количества обьектов на карте

09.11.2020 Павел Грибов PHP, WEB

Задача: отобразить на карте ОЧЕНЬ большого количества обьектов на карте:

Решение: для отображения используем ObjectManager с включенной кластеризаций, кроме того, обекты загружаем через JSON с типом «Feature» — т.е. метки загружаются ни как обьекты, а как «теневой массив», который не умеет отображать контент,хинты и имеет еще ряд ограничений. Этот момент мы обходим следующим образом: при наведении курсора мышки на метку, мы переносим её в «обьекты».

javascript:

    var myMap;    
    latitude=55.76;
    longitude=37.64;
    navigator.geolocation.getCurrentPosition(
    function(location) {
      latitude=location.coords.latitude;
      longitude=location.coords.longitude;
      accuracy=location.coords.accuracy;
      ymaps.ready(init);
    },
    function(error){
        ymaps.ready(init);        
    }
    );    


function init () {
    console.log("-инициируем карту в "+latitude+" и "+longitude);
    myMap = new ymaps.Map('map', {
        center: [latitude, longitude], 
        controls: ['trafficControl','zoomControl','routeButtonControl','routeEditor'],
        zoom: 15
    }, {
        searchControlProvider: 'yandex#search'
    });    
    if (isMobile.any()) {
        console.log("-открыто на мобильнике - отключаем мультитач");
        //myMap.behaviors.disable('drag');
        myMap.behaviors.disable('multiTouch');
    }
    LoadEVCByCar(<?=$Users->defaultcar?>);
}    
function LoadEVCByCar(carcode){
    //очищаем холст
    myMap.geoObjects.removeAll();
    NormalCollection = new ymaps.GeoObjectCollection();
    //теневые не полноценные обьекты загружаем скопом
    objectManager = new ymaps.ObjectManager({clusterize: true}); 
    myMap.geoObjects.add(objectManager);        
    $.post("csdcsdcs", {  
        carcode:carcode,
        latitude:latitude,
        longitude:longitude
    }).done(function(data) {
        jsond=JSON.parse(data);
        objectManager.add(jsond);    
    });
    // по событию "попадание мышкой" теневой обьект удаляем и создаем "настоящий" полноценный, с которым далее и работаем..
    objectManager.objects.events.add(['mouseenter', 'mouseleave'], Shadow2Normal);
  
};
function Shadow2Normal (e) {
    aa=e;
    console.log(e);
    if (e.get('type') == 'mouseenter') {        
        objectIdcur = e.get('objectId');
        newob=objectManager.objects.getById(objectIdcur);
        myMap.geoObjects.remove([objectIdcur]);
        objectManager.remove([objectIdcur]);
                
        newob.options["draggable"]=false;
        newob.options["id"]=newob.id;
        NormalObject = new ymaps.GeoObject(
                {
                    id:   newob.id,
                    geometry :   newob.geometry,
                    properties:  newob.properties
                },
                    newob.options
                );
        
        NormalCollection.add(NormalObject); //добавляем в коллекцию    
        myMap.geoObjects.add(NormalCollection); // добавляем на холст                  
        
    };
}

var myMap;

latitude=55.76;

longitude=37.64;

navigator.geolocation.getCurrentPosition(

function(location) {

latitude=location.coords.latitude;

longitude=location.coords.longitude;

accuracy=location.coords.accuracy;

ymaps.ready(init);

function(error){

ymaps.ready(init);

}

);

function init () {

console.log("-инициируем карту в "+latitude+" и "+longitude);

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

center: [latitude, longitude],

controls: ['trafficControl','zoomControl','routeButtonControl','routeEditor'],

zoom: 15

}, {

searchControlProvider: 'yandex#search'

});

if (isMobile.any()) {

console.log("-открыто на мобильнике - отключаем мультитач");

//myMap.behaviors.disable('drag');

myMap.behaviors.disable('multiTouch');

}

LoadEVCByCar(<?=$Users->defaultcar?>);

}

function LoadEVCByCar(carcode){

//очищаем холст

myMap.geoObjects.removeAll();

NormalCollection = new ymaps.GeoObjectCollection();

//теневые не полноценные обьекты загружаем скопом

objectManager = new ymaps.ObjectManager({clusterize: true});

myMap.geoObjects.add(objectManager);

$.post("csdcsdcs", {

carcode:carcode,

latitude:latitude,

longitude:longitude

}).done(function(data) {

jsond=JSON.parse(data);

objectManager.add(jsond);

});

// по событию "попадание мышкой" теневой обьект удаляем и создаем "настоящий" полноценный, с которым далее и работаем..

objectManager.objects.events.add(['mouseenter', 'mouseleave'], Shadow2Normal);

};

function Shadow2Normal (e) {

aa=e;

console.log(e);

if (e.get('type') == 'mouseenter') {

objectIdcur = e.get('objectId');

newob=objectManager.objects.getById(objectIdcur);

myMap.geoObjects.remove([objectIdcur]);

objectManager.remove([objectIdcur]);

newob.options["draggable"]=false;

newob.options["id"]=newob.id;

NormalObject = new ymaps.GeoObject(

{

id: newob.id,

geometry : newob.geometry,

properties: newob.properties

newob.options

);

NormalCollection.add(NormalObject); //добавляем в коллекцию

myMap.geoObjects.add(NormalCollection); // добавляем на холст

};

}

PHP:

<?php
    $JsonEVCS=array();
    $JsonEVCS["type"]="FeatureCollection";
    
    $longitude= _POST("longitude");
    $latitude= _POST("latitude");
    $carcode= _POST("carcode");
    for ($i = 1; $i <= 10000; $i++) {
            $evcs_info=array();
            $evcs_info["type"]="Feature";
            $evcs_info["id"]=$i;        
            $evcs_info["geometry"]["type"]="Point";
            $m1=rand(0,1);if ($m1==0){$m1=-1;};
            $m2=rand(0,1);if ($m2==0){$m2=-1;};
            $evcs_info["geometry"]["coordinates"]=array($latitude+$m1*rand(1,200)/100,$longitude+$m2*rand(1,200)/100);                                
            $evcs_info["properties"]["balloonContent"]="html код";
            $evcs_info["properties"]["hintContent"]="Подсказка";
            $evcs_info["properties"]["data"]["ip"]="32у23";  
            $evcs_info["options"]["preset"]="islands#redDotIcon";
            $evcs_info["properties"]["iconContent"]="Имя";
            $evcs_info["options"]["draggable"]=false;
            $evcs_info["options"]["hideIconOnBalloonOpen"]=false;
            $JsonEVCS["features"][]=$evcs_info;
    };
  echo json_encode($JsonEVCS);

<?php

$JsonEVCS=array();

$JsonEVCS["type"]="FeatureCollection";

$longitude= _POST("longitude");

$latitude= _POST("latitude");

$carcode= _POST("carcode");

for ($i = 1; $i <= 10000; $i++) {

$evcs_info=array();

$evcs_info["type"]="Feature";

$evcs_info["id"]=$i;

$evcs_info["geometry"]["type"]="Point";

$m1=rand(0,1);if ($m1==0){$m1=-1;};

$m2=rand(0,1);if ($m2==0){$m2=-1;};

$evcs_info["geometry"]["coordinates"]=array($latitude+$m1*rand(1,200)/100,$longitude+$m2*rand(1,200)/100);

$evcs_info["properties"]["balloonContent"]="html код";

$evcs_info["properties"]["hintContent"]="Подсказка";

$evcs_info["properties"]["data"]["ip"]="32у23";

$evcs_info["options"]["preset"]="islands#redDotIcon";

$evcs_info["properties"]["iconContent"]="Имя";

$evcs_info["options"]["draggable"]=false;

$evcs_info["options"]["hideIconOnBalloonOpen"]=false;

$JsonEVCS["features"][]=$evcs_info;

};

echo json_encode($JsonEVCS);

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

Наложение выполненных услуг на Яндекс.Карты

28.05.2020 Павел Грибов Из жизни

Давече сделал интересный скриптик, который иммитирует «онлайн» выполнение заказов и накладывает их на Яндекс.Карты

Демо тут.

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
        <link href="main.css" rel="stylesheet"/>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=df140307-afa8-4232-8513-6308f7fc6f65" type="text/javascript"></script>
</head>
<body>
    <div id="main_layer" style="position: relative; width: 100%;  height: 500px; overflow: hidden;">
        <div class="tickets-wrapper with-list">
            <div id="tickets-map"></div>
            <div id="tickets-list" class="tickets-list">                
            </div>
        </div>
    </div>
    <script>
        ymaps.ready(function () {
            work_show=new Array();
            work_show.push({
                            address : "ул. Герцена 60",
                            nameuser : "Вася",
                            work : "Роутер",
                            summ : 1000,
                            status : "Сделано",
                            img: "waterheater.jpg",                
                            comment: "Абра швабра кадабра!",
                            
                            point : [59.220392, 39.891568], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            work_show.push({
                            address : "ул. Герцена 54",
                            nameuser : "Павел",
                            work : "Газовый котел",
                            summ : 1600,
                            status : "Сделано",
                            img: "waterheater.jpg",
                            comment: "Сделали быстро.Чаевых не просили.",
                
                            point : [59.230492, 39.891568], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            work_show.push({
                            address : "ул. Ленина 54",
                            nameuser : "Вася",
                            work : "Котел",
                            summ : 900,
                            status : "Делаем",
                            img: "waterheater.jpg",
                            comment: "Потек конденцатор. Заменили.",
                
                            point : [59.232492, 39.891568], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            work_show.push({
                            address : "ул. Путина 54",
                            nameuser : "Вася 2",
                            work : "Котел",
                            summ : 100,
                            status : "Делаем",
                            img: "waterheater.jpg",
                            comment: "Потек конденцатор. Заменили.",
                
                            point : [59.232492, 39.893568], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            work_show.push({
                            address : "ул. Карла Маркса 99",
                            nameuser : "Карл-Маркс",
                            work : "Читать книгу",
                            summ : 900,
                            status : "Сделали",
                            img: "waterheater.jpg",
                            comment: "Почитали.Рады.",
                
                            point : [59.237492, 39.891868], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            

        
        
            myMap = new ymaps.Map('tickets-map', {
                    center: [59.220492, 39.891568],
                    zoom: 20,
                    controls: ['rulerControl'],
                   // behaviors: ['default', 'scrollZoom']
                }, {
                    //searchControlProvider: 'yandex#search'
                }),
                    clusterer = new ymaps.Clusterer({

                    preset: 'islands#invertedVioletClusterIcons',
                    groupByCoordinates: false,

                    clusterDisableClickZoom: false,
                    clusterHideIconOnBalloonOpen: false,
                    geoObjectHideIconOnBalloonOpen: false
                }),
                myMap.controls.add(new ymaps.control.ZoomControl({options: { position: { right: 10, top: 50 }}}));
                getPointData = function (index) {
                 return {
                        balloonContentHeader: 'Задача: '+work_show[index].work,
                        balloonContentBody: 'Адрес: '+work_show[index].address+","+work_show[index].nameuser+"<br/>Сумма работ:"+work_show[index].summ+"руб.",
                        balloonContentFooter: work_show[index].comment,
                        clusterCaption: "Сделано: "+work_show[index].summ+"руб.",
                        iconContent: "Сделано: "+work_show[index].summ+"руб.",
                    };
                },
                geoObjects = [];
                messages=new Array();
                for(var i = 0, len = work_show.length; i < len; i++) {
                    geoObjects[i] = new ymaps.Placemark(work_show[i].point, getPointData(i), {preset: work_show[i].ico_preset});                                
                    messages.push('<div id="ticket_id_'+i+'" class="ticket ticket-completed" style="display:none">'+
                            '<div class="ticket-icon" style="background-image: url(images/'+work_show[i].img+')">'+
                            '</div>'+
                            '<div class="ticket-content">'+
                            '    <div class="ticket-title">'+
                            '        <span class="ticket-address">'+work_show[i].address+'</span>'+
                            '        <span class="ticket-contact">'+work_show[i].nameuser+'</span>'+
                            '    </div>'+
                            '    <div class="ticket-category">'+work_show[i].work+'</div>'+
                            '    <div class="ticket-sum">'+work_show[i].summ+'₽</div>'+
                            '    <span class="ticket-state ticket-state-completed">'+work_show[i].status+'</span>'+
                            '</div>'+
                        '</div>');                    
                    if (i<=3) {
                        $("#tickets-list").prepend(messages[i]);
                        $("#ticket_id_"+i).show();
                    };
                }
            clusterer.options.set({
                gridSize: 80,
                clusterDisableClickZoom: true
            });

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

            myMap.setBounds(clusterer.getBounds(), {
              //  checkZoomRange: true
            });
            //setTimeout('myMap.setZoom(20);', 2000)            
            // запускаем таймер во время которго перебираем все точки раз в секунду (по кругу)..
             timerId = setInterval(AnimatePoint, 2000);
             gcnt=3; // начинаем с 3-й точки
             function AnimatePoint(){
                 gcnt++;          
                 if (gcnt==work_show.length){gcnt=0;};                 
                 $("#tickets-list").prepend(messages[gcnt]);          
                 $("#ticket_id_"+gcnt).show(1000);
                 myMap.panTo(work_show[gcnt].point, {delay: 500});
                // geoObjects[gcnt].balloon.open();
                // objectState = clusterer.getObjectState(geoObjects[gcnt]);
                 //clusterer.balloon.open(objectState.cluster);
                var objectState = clusterer.getObjectState(geoObjects[gcnt]);
                    if (objectState.isClustered) {
                        objectState.cluster.state.set('activeObject', geoObjects[gcnt]);
                        clusterer.balloon.open(objectState.cluster);
                    } else if (objectState.isShown) {
                        geoObjects[gcnt].balloon.open();
                    }                 
             };            
            
        });

    </script>    
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

<html>

<head>

</head>

<body>

</div>

ymaps.ready(function () {

work_show=new Array();

work_show.push({

address : "ул. Герцена 60",

nameuser : "Вася",

work : "Роутер",

summ : 1000,

status : "Сделано",

img: "waterheater.jpg",

comment: "Абра швабра кадабра!",

point : [59.220392, 39.891568], //координаты точки

ico_preset : 'islands#darkGreenStretchyIcon', // иконка сообщения

}

);

work_show.push({

address : "ул. Герцена 54",

nameuser : "Павел",

work : "Газовый котел",

summ : 1600,

status : "Сделано",

img: "waterheater.jpg",

comment: "Сделали быстро.Чаевых не просили.",

point : [59.230492, 39.891568], //координаты точки

ico_preset : 'islands#darkGreenStretchyIcon', // иконка сообщения

}

);

work_show.push({

address : "ул. Ленина 54",

nameuser : "Вася",

work : "Котел",

summ : 900,

status : "Делаем",

img: "waterheater.jpg",

comment: "Потек конденцатор. Заменили.",

point : [59.232492, 39.891568], //координаты точки

ico_preset : 'islands#darkGreenStretchyIcon', // иконка сообщения

}

);

work_show.push({

address : "ул. Путина 54",

nameuser : "Вася 2",

work : "Котел",

summ : 100,

status : "Делаем",

img: "waterheater.jpg",

comment: "Потек конденцатор. Заменили.",

point : [59.232492, 39.893568], //координаты точки

ico_preset : 'islands#darkGreenStretchyIcon', // иконка сообщения

}

);

work_show.push({

address : "ул. Карла Маркса 99",

nameuser : "Карл-Маркс",

work : "Читать книгу",

summ : 900,

status : "Сделали",

img: "waterheater.jpg",

comment: "Почитали.Рады.",

point : [59.237492, 39.891868], //координаты точки

ico_preset : 'islands#darkGreenStretchyIcon', // иконка сообщения

}

);

myMap = new ymaps.Map('tickets-map', {

center: [59.220492, 39.891568],

zoom: 20,

controls: ['rulerControl'],

// behaviors: ['default', 'scrollZoom']

}, {

//searchControlProvider: 'yandex#search'

}),

clusterer = new ymaps.Clusterer({

preset: 'islands#invertedVioletClusterIcons',

groupByCoordinates: false,

clusterDisableClickZoom: false,

clusterHideIconOnBalloonOpen: false,

geoObjectHideIconOnBalloonOpen: false

}),

myMap.controls.add(new ymaps.control.ZoomControl({options: { position: { right: 10, top: 50 }}}));

getPointData = function (index) {

return {

balloonContentHeader: 'Задача: '+work_show[index].work,

balloonContentBody: 'Адрес: '+work_show[index].address+","+work_show[index].nameuser+"<br/>Сумма работ:"+work_show[index].summ+"руб.",

balloonContentFooter: work_show[index].comment,

clusterCaption: "Сделано: "+work_show[index].summ+"руб.",

iconContent: "Сделано: "+work_show[index].summ+"руб.",

};

geoObjects = [];

messages=new Array();

for(var i = 0, len = work_show.length; i < len; i++) {

geoObjects[i] = new ymaps.Placemark(work_show[i].point, getPointData(i), {preset: work_show[i].ico_preset});

messages.push('<div id="ticket_id_'+i+'" class="ticket ticket-completed" style="display:none">'+

'<div class="ticket-icon" style="background-image: url(images/'+work_show[i].img+')">'+

'</div>'+

'<div class="ticket-content">'+

' <div class="ticket-title">'+

' <span class="ticket-address">'+work_show[i].address+'</span>'+

' <span class="ticket-contact">'+work_show[i].nameuser+'</span>'+

' </div>'+

' <div class="ticket-category">'+work_show[i].work+'</div>'+

' <div class="ticket-sum">'+work_show[i].summ+'₽</div>'+

' <span class="ticket-state ticket-state-completed">'+work_show[i].status+'</span>'+

'</div>'+

'</div>');

if (i<=3) {

$("#tickets-list").prepend(messages[i]);

$("#ticket_id_"+i).show();

};

}

clusterer.options.set({

gridSize: 80,

clusterDisableClickZoom: true

});

clusterer.add(geoObjects);

myMap.geoObjects.add(clusterer);

myMap.setBounds(clusterer.getBounds(), {

// checkZoomRange: true

});

//setTimeout('myMap.setZoom(20);', 2000)

// запускаем таймер во время которго перебираем все точки раз в секунду (по кругу)..

timerId = setInterval(AnimatePoint, 2000);

gcnt=3; // начинаем с 3-й точки

function AnimatePoint(){

gcnt++;

if (gcnt==work_show.length){gcnt=0;};

$("#tickets-list").prepend(messages[gcnt]);

$("#ticket_id_"+gcnt).show(1000);

myMap.panTo(work_show[gcnt].point, {delay: 500});

// geoObjects[gcnt].balloon.open();

// objectState = clusterer.getObjectState(geoObjects[gcnt]);

//clusterer.balloon.open(objectState.cluster);

var objectState = clusterer.getObjectState(geoObjects[gcnt]);

if (objectState.isClustered) {

objectState.cluster.state.set('activeObject', geoObjects[gcnt]);

clusterer.balloon.open(objectState.cluster);

} else if (objectState.isShown) {

geoObjects[gcnt].balloon.open();

}

};

});

</script>

</body>

</html>

Оставить комментарий map.yandex, выполнение заказов, онлайн

Реализация рисования на картах с использованием API Яндекс.Карт.

01.07.2015 Павел Грибов PHP, WEB

Задача: необходимо реализовать рисование на картах, с возможностью сохранения нарисованного во внешнюю базу.

Решение: будем использовать API Яндекс.Карт.

Логика: отображаем карту в зависимости от выбранного подразделения, и слоя. При выборе подразделения или слоя, подгружаем из вне ранее нарисованные обьекты. При нажатии кнопки «Сохранить» — сохраняем их во внешнюю базу.

Демо (безо возможности сохранения обьектов)

Далее код: » Читать далее

5 комментариев api, map.yandex, редактирование, рисование, яндекс карты

Свои карты в Яндекс-Картах.

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

По мотивам вот этой статьи. Не захотелось тратить время на разработку своего движка,т.к. вдумчиво почитав документацию к API.Yandex пришел к выводу, что весь функционал необходимый для моих нужд, уже есть и написан. Один правда большой недостаток — для работы необходимо будет постоянное подключение к интернет, не нашел пока способа вытащить скрипты от яндекса в оффлайн. Итак, пошаговое руководство:
» Читать далее

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

Апрель 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