Всем привет! Столкнулся с такой проблемой, и на Я.Картах не смог найти разжевание данной функции. Не понимаю как привязать к range input'у (slider range jquery) сортировку от properties метки из json файла. (..."properties": {"maxpr": "8000", "minpr": "1000"...}...)
При том я взял за основу пример с чекбоксами из Я.песочницы, и они с properties работают хорошо. Но у меня сравнение цифр, т.е. properties.minpr > $( "#slider-range" ).slider( "values", 0 ); Но проблема в том, что если мы делаем сравнение через ==, то как в случае с чекбоксами - все супер. А если мы делаем меньше/больше - он возвращает undefined от properties, и соответственно возвращает false.
Делал подобную вещь с objectManager'ом, но он не подходит для некоторых других целей.
Поэтому очень прошу помощи у вас! Всем спасибо заранее, кто обратил внимание.
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('YMapsID', {
center: [37.573856, 55.751574],
zoom: 10
});
jQuery.getJSON('data1.json', function (json) {
var myObjects = ymaps.geoQuery(json)
.addToMap(myMap)
.applyBoundsToMap(myMap, {
checkZoomRange: true
});
var shownObjects,
byColor = new ymaps.GeoQueryResult(),
byShape = new ymaps.GeoQueryResult(),
byCity = new ymaps.GeoQueryResult(),
byRating = new ymaps.GeoQueryResult();
byPrice = new ymaps.GeoQueryResult();
//функция, которая отвечает за рендж слайдер
$(function() {
$('#slider-range').slider({
range: true,
min: 0,
max: 8000,
values: [ 75, 7750 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function(event, ui) {
checkState();
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
var minimus = $( "#slider-range" ).slider( "values", 0 );
function checkState () {
// Отберем объекты по цвету.
if ($('#red').prop('checked')) {
// Будем искать по двум параметрам:
// - для точечных объектов по полю preset;
// - для контурных объектов по цвету заливки.
byColor = myObjects.search('options.fillColor = "#ff1000"')
.add(myObjects.search('options.preset = "islands#yellowStretchyIcon"'));
}
if ($('#red').prop('checked')) {
// Будем искать по двум параметрам:
// - для точечных объектов по полю preset;
// - для контурных объектов по цвету заливки.
byCity = myObjects.search('properties.fillColor = "#ff1000"')
.add(myObjects.search('options.preset = "islands#yellowStretchyIcon"'));
}
if ($('#green').prop('checked')) {
byColor = myObjects.search('options.fillColor = "#00ff00"')
.add(myObjects.search('options.preset = "islands#greenStretchyIcon"'))
// После того, как мы нашли все зеленые объекты, добавим к ним
// объекты, найденные на предыдущей итерации.
.add(byColor);
}
if ($('#yellow').prop('checked')) {
byColor = myObjects.search('options.fillColor = "#ffcc00"')
.add(myObjects.search('options.preset = "twirl#yellowIcon"'))
.add(byColor);
}
// Отберем объекты по форме.
if ($('#point').prop('checked')) {
byShape = myObjects.search('geometry.type = "Point"');
}
if ($('#polygon').prop('checked')) {
byShape = myObjects.search('geometry.type = "Polygon"').add(byShape);
}
if ($('#circle').prop('checked')) {
byShape = myObjects.search('geometry.type = "Circle"').add(byShape);
}
var minimus = $( "#slider-range" ).slider( "values", 0 );
byPrice = myObjects.search('properties.minpr >'+minimus).add(byPrice);
console.log(byPrice);
shownObjects = byColor.intersect(byShape).intersect(byPrice).addToMap(myMap);
// Объекты, которые не попали в выборку, нужно убрать с карты.
myObjects.remove(shownObjects).removeFromMap(myMap);
}
$('#red').click(checkState);
$('#green').click(checkState);
$('#yellow').click(checkState);
$('#point').click(checkState);
$('#polygon').click(checkState);
$('#circle').click(checkState);
});
}