https://yandex.ru/dev/maps/jsbox/2.1/geoobjects_menu/ как в этом примере сделать чекбокс для снятия/очистки всех меток на карте и чекбоксов выбора типо
$('#снять выбор').click(myMap.geoObjects.removeAll());
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуhttps://yandex.ru/dev/maps/jsbox/2.1/geoobjects_menu/ как в этом примере сделать чекбокс для снятия/очистки всех меток на карте и чекбоксов выбора типо
$('#снять выбор').click(myMap.geoObjects.removeAll());
В коде ниже, в HTML - добавлен идентификатор блоку с фильтрами и новый чекбокс, а в JavaScript добавлен обработчик и связь с новым чекбоксом:
html
<!DOCTYPE html>
<html>
<head>
<title>Фильтрация объектов на карте по различным признакам</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш API-ключ>" type="text/javascript"></script>
<script type="text/javascript" src="https://yandex.st/jquery/2.2.3/jquery.js"></script>
<script src="geoobjects_menu.js" type="text/javascript"></script>
<style>
body, html {
font-family: Arial;
font-size: 11pt;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 60%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="filters" style="padding: 5px;">
<div>
Фильтр по геометриям <br>
<input type='checkbox' id='all' checked=true>Все оъекты</input><br>
</div>
<div>
Фильтр по цветам <br>
<input type='checkbox' id='red' checked=true>Красные</input><br>
<input type='checkbox' id='green' checked=true>Зеленые</input><br>
<input type='checkbox' id='yellow' checked=true>Желтые</input>
</div>
<div>
Фильтр по геометриям <br>
<input type='checkbox' id='point' checked=true>Точки</input><br>
<input type='checkbox' id='polygon' checked=true>Многоугольники</input><br>
<input type='checkbox' id='circle' checked=true>Круги</input>
</div>
</div>
</body>
</html>
js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('map', {
center: [55.30954, 37.721587],
zoom: 8
}, {
searchControlProvider: 'yandex#search'
});
// Функция, которая по состоянию чекбоксов в меню
// показывает или скрывает геообъекты из выборки.
function checkState () {
var shownObjects,
byColor = new ymaps.GeoQueryResult(),
byShape = new ymaps.GeoQueryResult();
// Отберем объекты по цвету.
if ($('#red').prop('checked')) {
// Будем искать по двум параметрам:
// - для точечных объектов по полю preset;
// - для контурных объектов по цвету заливки.
byColor = myObjects.search('options.fillColor = "#ff1000"')
.add(myObjects.search('options.preset = "islands#redIcon"'));
}
if ($('#green').prop('checked')) {
byColor = myObjects.search('options.fillColor = "#00ff00"')
.add(myObjects.search('options.preset = "islands#greenIcon"'))
// После того, как мы нашли все зеленые объекты, добавим к ним
// объекты, найденные на предыдущей итерации.
.add(byColor);
}
if ($('#yellow').prop('checked')) {
byColor = myObjects.search('options.fillColor = "#ffcc00"')
.add(myObjects.search('options.preset = "islands#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);
}
// Мы отобрали объекты по цвету и по форме. Покажем на карте объекты,
// которые совмещают нужные признаки.
shownObjects = byColor.intersect(byShape).addToMap(myMap);
// Объекты, которые не попали в выборку, нужно убрать с карты.
myObjects.remove(shownObjects).removeFromMap(myMap);
}
function toggleAll () {
var filters = $('#filters input');
var value = filters.first().prop('checked');
filters.each(function (i) {
$(this).prop('checked', value);
});
checkState();
}
$('#red').click(checkState);
$('#green').click(checkState);
$('#yellow').click(checkState);
$('#point').click(checkState);
$('#polygon').click(checkState);
$('#circle').click(checkState);
$('#all').click(toggleAll);
// Создадим объекты из их JSON-описания и добавим их на карту.
window.myObjects = ymaps.geoQuery({
type: "FeatureCollection",
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [55.34954, 37.721587]
},
options: {
preset: 'islands#yellowIcon'
}
},
{
type: 'Feature',
geometry: {
type: 'Circle',
coordinates: [55.24954, 37.5],
radius: 20000
},
options: {
fillColor: "#ffcc00"
}
},
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[[55.33954, 37.7], [55.43954, 37.7], [55.33954, 38.7], [55.33954, 37.7]]]
},
options: {
fillColor: "#ffcc00"
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [55.24954, 37.4]
},
options: {
preset: 'islands#greenIcon'
}
},
{
type: 'Feature',
geometry: {
type: 'Circle',
coordinates: [55.14954, 37.61587],
radius: 10000
},
options: {
fillColor: '#00ff00'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [55.14954, 37.61587],
radius: 10000
},
options: {
preset: 'islands#redIcon'
}
}
]
}).addToMap(myMap);
}