мне нужно сделать фильтр меток на карте используя Yandex map API.Вопрос заключается в том что нужно вывести данные из базы и потом используя фильтры выводить или скрывать метки на карте. Я вывел метки на карту и добавил фильтры но как сделать что бы метки скрывались не понимаю, прошу помощи или подсказки как мне это реализовать. Вот код как сейчас это работает:
<script>
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [59.9386300, 30.3141300],
zoom: 9,
controls: []
});
var arrList = $('#prof_ul li').map(function(){
return $(this).attr('id');
}).get();
var arrList2 = $('#obr_ul li').map(function(){
return $(this).attr('id');
}).get();
var arrList3 = $('#napravlenie_ul li').map(function(){
return $(this).attr('id');
}).get();
// Создадим 5 пунктов выпадающего списка.
var listBoxItems = arrList
.map(function(title) {
return new ymaps.control.ListBoxItem({
data: {
content: title
},
state: {
selected: true
}
})
}),
// Теперь создадим список, содержащий 5 пунктов.
listBoxControl = new ymaps.control.ListBox({
data: {
content: 'Фильтр по профессиям',
title: 'Фильтр по профессиям'
},
items: listBoxItems,
state: {
// Признак, развернут ли список.
expanded: true,
filters: listBoxItems.reduce(function(filters, filter) {
filters[filter.data.get('content')] = filter.isSelected();
return filters;
}, {})
}
});
myMap.controls.add(listBoxControl);
// Создадим 5 пунктов выпадающего списка.
var listBoxItems2 = arrList2
.map(function(title) {
return new ymaps.control.ListBoxItem({
data: {
content: title
},
state: {
selected: true
}
})
}),
// Теперь создадим список, содержащий 5 пунктов.
listBoxControl2 = new ymaps.control.ListBox({
data: {
content: 'Фильтр по образовательному учереждению',
title: 'Фильтр по образовательному учереждению'
},
items: listBoxItems2,
state: {
// Признак, развернут ли список.
expanded: true,
filters: listBoxItems2.reduce(function(filters, filter) {
filters[filter.data.get('content')] = filter.isSelected();
return filters;
}, {})
}
});
myMap.controls.add(listBoxControl2);
// Создадим 5 пунктов выпадающего списка.
var listBoxItems3 = arrList3
.map(function(title) {
return new ymaps.control.ListBoxItem({
data: {
content: title
},
state: {
selected: true
}
})
}),
// Теперь создадим список, содержащий 5 пунктов.
listBoxControl3 = new ymaps.control.ListBox({
data: {
content: 'Фильтр по направлению',
title: 'Фильтр по направлению'
},
items: listBoxItems3,
state: {
// Признак, развернут ли список.
expanded: true,
filters: listBoxItems3.reduce(function(filters, filter) {
filters[filter.data.get('content')] = filter.isSelected();
return filters;
}, {})
}
});
myMap.controls.add(listBoxControl3);
// Добавим отслеживание изменения признака, выбран ли пункт списка под номером #3 .
listBoxControl3.events.add(['select', 'deselect'], function(e) {
var listBoxItem3 = e.get('target');
var filters = ymaps.util.extend({}, listBoxControl3.state.get('filters'));
filters[listBoxItem3.data.get('content')] = listBoxItem3.isSelected();
listBoxControl3.state.set('filters', filters);
});
var filterMonitor = new ymaps.Monitor(listBoxControl3.state);
filterMonitor.add('filters', function(filters) {
// Применим фильтр.
objectManager.setFilter(getFilterFunction(filters));
});
function getFilterFunction(categories){
return function(obj){
var content = obj.properties.balloonContent;
return categories[content]
}
}
$.ajax({
url: "data.json"
}).done(function (data) {
objectManager.add(data);
});
<?php
foreach ($maps as $maps) {
print '
// Собственное изображение для метки с контентом
var placemark'.$maps['id'].' = new ymaps.Placemark('.$maps['cardination'].', {
hintContent: "Улица: '.$maps['street'].' <br> Организация : '.$maps['name'].' <br> Категория: '.$maps['category'].'",
"balloonContent": "'.$maps['prof'].'", "clusterCaption": "'.$maps['zavedenie'].'", "iconCaption": "'.$maps['naprav'].'",
}, {
// Опции.
// Необходимо указать данный тип макета.
iconLayout: "default#image",
// Своё изображение иконки метки.
iconImageHref: "'.$maps['image'].'",
// Размеры метки.
iconImageSize: [32, 32],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-16, -16],
});
myMap.geoObjects.add(placemark'.$maps['id'].');
';
}
?>
});
</script>
Код взят и адаптирован с официальной страницы api yandex, я так понимаю нужно получить файл json вот в этой строке
$.ajax({
url: "data.php"
}).done(function (data) {
objectManager.add(data);
});
но как мне это сделать связав с базой ?
Формат json файла должен выглядеть так:
{"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContent": "Аптека", "clusterCaption": "Аптека", "hintContent": "Аптека", "iconCaption": "Аптека"}, "options": {"preset": "islands#blueCircleDotIconWithCaption"}})]
Решил вопрос, теперь я получаю значение но не могу скрыть метки которые нужно если кто знает подскажите.
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [59.9386300, 30.3141300],
zoom: 9,
controls: []
});
<?php
foreach ($maps as $maps) {
if($maps['prof'] == 1) {
print '
// Собственное изображение для метки с контентом
var placemark'.$maps['id'].' = new ymaps.Placemark('.$maps['cardination'].', {
hintContent: "Улица: '.$maps['street'].' <br> Организация : '.$maps['name'].' <br> Категория: '.$maps['category'].'",
"balloonContent": "'.$maps['prof'].'", "clusterCaption": "'.$maps['zavedenie'].'", "iconCaption": "'.$maps['naprav'].'",
}, {
// Опции.
// Необходимо указать данный тип макета.
iconLayout: "default#image",
// Своё изображение иконки метки.
iconImageHref: "'.$maps['image'].'",
// Размеры метки.
iconImageSize: [32, 32],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-16, -16],
});
myMap.geoObjects.add(placemark'.$maps['id'].');
';
}
}
?>
var arrList = $('#prof_ul li').map(function(){
return $(this).attr('id');
}).get();
var arrList2 = $('#obr_ul li').map(function(){
return $(this).attr('id');
}).get();
var arrList3 = $('#napravlenie_ul li').map(function(){
return $(this).attr('id');
}).get();
// Создадим 5 пунктов выпадающего списка.
var listBoxItems = arrList
.map(function(title) {
return new ymaps.control.ListBoxItem({
data: {
content: title
},
state: {
selected: true
}
})
}),
// Теперь создадим список, содержащий 5 пунктов.
listBoxControl = new ymaps.control.ListBox({
data: {
content: 'Фильтр по профессиям',
title: 'Фильтр по профессиям'
},
items: listBoxItems,
state: {
// Признак, развернут ли список.
expanded: true,
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 selectedFilters = listBoxControl.filter(function (it) {
return it.isSelected();
});
applyFilters(selectedFilters);
});
function applyFilters(filters,myMap,geoObjects) {
filters.forEach(function (filter,myMap,geoObjects) {
<?php
foreach ($prof_main as $prof_main) {
print '
if(filter.data.get("content") == '.$prof_main['name'].') {
console.log("'.$prof_main['name'].'");
for (var i = 0; i< geoObjects.length; i++) {
console.log(i);
geoObject.options.set("visible", false);
}
}
';
}
?>
})
}
});
</script>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
я написал адаптивный сайт и через мобильный браузер работает отлично, но когда я открываю через webview на андроиде, камера и добавление фото...
голову уже сломал есть массив $arr = array('a'=>'01','A'=>'02','g'=>'03','e'=>'04','c'=>'05','d'=>'06','V'=>'07','O'=>'08','K'=>'09','X'=>'11','F'=>'12','T'=>'13','h'=>'14','n'=>'15','B'=>'16','Q'=>'17','M'=>'18','t'=>'19');