Отображение маршрута между двумя точками на карте
Приветствую, дорогие читатели! В сегодняшней статье мы рассмотрим, как реализовать фильтры на карте, используя JavaScript и библиотеку Leaflet. Мы добавим поиск по местоположению и категории объектов, что поможет пользователям легко находить нужные точки на карте.
Подключение карты и данных
Для начала создадим HTML-страницу и подключим Leaflet:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Фильтры на карте</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
#map { height: 500px; }
.controls { margin: 10px; }
</style>
</head>
<body>
<h1>Фильтр объектов на карте</h1>
<div class="controls">
<input type="text" id="search" placeholder="Введите название...">
<select id="category">
<option value="all">Все</option>
<option value="restaurant">Рестораны</option>
<option value="hotel">Отели</option>
</select>
<button onclick="applyFilters()">Фильтровать</button>
</div>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([55.751, 37.617], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data \u00a9 OpenStreetMap contributors',
maxZoom: 18,
}).addTo(map);
const places = [
{ coords: [55.75, 37.61], name: "Ресторан 1", category: "restaurant" },
{ coords: [55.76, 37.62], name: "Отель 1", category: "hotel" },
{ coords: [55.74, 37.63], name: "Ресторан 2", category: "restaurant" }
];
let markers = [];
function displayMarkers(data) {
markers.forEach(marker => map.removeLayer(marker));
markers = data.map(place => {
return L.marker(place.coords).addTo(map).bindPopup(place.name);
});
}
function applyFilters() {
const searchText = document.getElementById("search").value.toLowerCase();
const category = document.getElementById("category").value;
const filtered = places.filter(place =>
(category === "all" || place.category === category) &&
place.name.toLowerCase().includes(searchText)
);
displayMarkers(filtered);
}
displayMarkers(places);
</script>
</body>
</html>
Разбор кода
-
Создаём карту и добавляем базовый слой OpenStreetMap.
-
Добавляем данные о местах, храня их в массиве объектов.
-
Рисуем маркеры и обновляем их в зависимости от фильтров.
-
Фильтруем по названию и категории с помощью
inputиselect.
Итог
Теперь карта умеет фильтровать объекты по названию и категории, что делает её удобнее для пользователей!
Хотите глубже освоить JavaScript? Рекомендую курс "Программирование на JavaScript с Нуля до Гуру 2.0", где вы найдёте ещё больше полезных техник и приёмов!
-
Создано 30.01.2025 10:45:22
-
Михаил Русаков
Комментарии (1):
Спасибо Михаил! Ваши уроки очень полезные и необходимые для обучения! С уважением к Вам Ахмад Гапурович
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.