Сделал вывод списка названий объектов на карте по примеру из песочницы https://tech.yandex.ru/maps/jsbox/2.1/object_list Как можно сделать скрытие названий объектов, которые находятся за границами видимой карты (после перемещения или зума карты)?
2 ответа
Отфильтровать объекты, которые находятся в пределах видимой области можно с помощью GeoQueryResult.searchInside.
Подписаться на изменение видимой области можно с помощью события Map@boundschange
var geoObjectsQuery;
var map;
ymaps.ready(['Map', 'geoQuery'])
.then(function() {
map = new ymaps.Map('map', {
center: [55.75, 37.62],
zoom: 9,
controls: []
});
// Создаем метки и добавляем их на карту.
var geoObjects = new ymaps.GeoObjectCollection({
children: generatePlacemarks(map.getBounds(), 50)
});
map.geoObjects.add(geoObjects);
// Создаем geoQuery для запросов к гео-объектам.
geoObjectsQuery = ymaps.geoQuery(geoObjects);
// Сразу же показываем список видимых гео-объектов.
refreshVisibleList();
// Обновляем список видимых гео-объектов при изменении видимой области.
map.events.add('boundschange', function() {
refreshVisibleList();
});
})
.catch(console.error);
function refreshVisibleList() {
// С помощью geoQuery получаем список объектов на карте.
var visibleGeoObjects = geoObjectsQuery.searchIntersect(map);
// Собираем данные из видимых гео-объектов.
var visibleObjectsHtml = [];
visibleGeoObjects.each(function(x) {
var iconContent = x.properties.get('iconContent');
visibleObjectsHtml.push('<li>' + iconContent + '</li>');
});
// Обновляем список.
var visibleElement = document.getElementById('visible');
visibleElement.innerHTML = 'Видимые:' +
'<ul>' + visibleObjectsHtml.join('') + '</ul>'
}
/** Создает случайные метки в пределах области. */
function generatePlacemarks(bounds, n) {
n = n || 50;
var placemarks = [];
for (var i = 0; i < n; i++) {
placemarks.push(new ymaps.Placemark([
bounds[0][0] + (bounds[1][0] - bounds[0][0]) * Math.random(),
bounds[0][1] + (bounds[1][1] - bounds[0][1]) * Math.random()
], {
iconContent: i,
}));
}
return placemarks;
}
#map {
width: 300px;
height: 300px;
display: inline-block;
}
#visible {
display: inline-block;
width: 150px;
height: 300px;
overflow-y: scroll;
}
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map"></div>
<div id="visible"></div>
Привет, у карты есть метод getBounds (https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Map-docpage/#getBounds) с помощью которого можно определить границы карты (прямоугольная область).
Так же в апи есть вспомогательная библиотека util.bounds в которой есть метод containsPoint (https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/util.bounds-docpage/#containsPoint) который может определить входит ли точка в данную прямоугольную область.
Для данного примера определить видим ли объект на карте и добавить его в список можно используя примерно такую логику:
var bounds = myMap.getBounds();
var contains = ymaps.util.bounds.containsPoint(bounds, item.center);
if (contains) {
// добавляем объект в список
} else {
// не добавляем объект в список
}