Я работаю над небольшим социальным проектом - некоммерческим. Это будет веб-страница, показывающая точечные данные социальных цирковых проектов на карте. Это почти сделано, но я не могу понять последний шаг. Я хочу добавить функциональность между полем поиска в навигации и точками, показанными на карте. Также я хочу, чтобы результаты поиска отображались в небольшом div. Изначально на карте должны быть показаны все точки. Точечные данные хранятся в массиве JS, у меня также есть данные в виде Geo JSON, поскольку я уже пробовал много вещей. Это работает хорошо. Точки отображаются, я использую группу кластеров. Хорошо. Если пользователь ищет место (город, страну, название цирка), я хочу, чтобы результаты сопоставления отображались в div, и я хочу, чтобы на карте отображались только точки совпадения. (Это я не смог до сих пор управлять.) Я также sh для кнопки, чтобы очистить поиск, поэтому карта установлена в исходное состояние.
Это только часть кода, поскольку она не будет работать со всеми связанными файлами листовок и начальной загрузки4. Если я должен подготовить другой код, пожалуйста, дайте мне знать.
Поскольку дома карта работает в своем начальном состоянии, показывая каждый элемент массива на карте, мне интересно, как я могу написать код так, чтобы для l oop, который дает элементы объекту листовки, будет правильно взаимодействовать с этим полем поиска.
Я знаю, что есть механизм поиска листовок от Стефано Кудини, но я пока не мог заставить его работать.
###################################################### #################### помогите пожалуйста
<!-- navbar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">social circus map</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
<!-- map DIV -->
<div class="jumbotron" id = "map">
</div>
<script>
////////////// map container//////////////////
var map = L.map('map', {
center: [ 32.84267363195431,0],
zoom: 2,
maxZoom: 18
});
// create stamen watercolor layer //
var stamen_Watercolor = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 1,
maxZoom: 16,
ext: 'jpg'
});
stamen_Watercolor.addTo( map );
var markers = L.markerClusterGroup({
maxClusterRadius: 30
});
markers.addTo(map);
// der for loop geht durch den array und erstellt die einzelnen marker
zirkusArray = [["Bamyan MMCC (Mobile Mini Circus for Children)",34.829709,67.83587799999998, "Bamyam", "Afghanistan", "https://www.facebook.com/BamyanCircus/"],["Un Grito Interior - Teatro Murga",-33.179456,-64.99515500000001, "Achiras" ,"Argentina","https://www.facebook.com/ungritointerior/timeline"],["Conseil de la nation Atikamekw",47.440994,-72.785958, "La Tuque", "Canada", "https://www.atikamekwsipi.com/fr"],["The Green Light Circus",62.320335,-150.107900, "Talkeetna", "United States", "https://www.facebook.com/greenlightcircus/"],["Circus Zambia",-15.400536,28.351749, "Kabulonga", "Zambia", "http://www.circuszambia.org/"], ["Zirkus Internationale", 52.5476, 13.3668, "Berlin", "Germany", "http://www.zirkus-internationale.de/"],["Sirko Fantastiko",41.0380, 28.9779, "Istanbul", "Turkey", "https://www.facebook.com/Sirko-Fantastiko-183372812260322/"],["Cadir", 40.9944, 29.0403, "Istanbul", "Turkey", "https://www.cadirstudyo.com/"],["Social Circus Myanmar", 16.8494, 96.1711, "Yangon", "Myanmar","https://socialcircusmyanmar.com/"],["Circus Schatzinsel", 52.5023, 13.4415, "Berlin", "Germany", "https://www.circus-schatzinsel.de/"], ["Circulum e.V.", 52.518880, 13.397946, "Berlin", "Germany", "https://www.circulum.de/wordpress/"],["Gençlik Ve Kültür Evi - Sirk Projesi", 37.3144, 40.7441, "Mardin", "Turkey", "https://www.gapgenclikevleri.org/merkezler/mardin/"],["Aula Circo Tropical Crew", 11.2421, -73.5580, "Palomino", "Colombia", "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=2ahUKEwjG6NKfxfPmAhXOPOwKHf9vDhUQFjAAegQIAhAB&url=https%3A%2F%2Fwww.facebook.com%2Fpages%2Fcategory%2FCircus%2FAula-circo-tropical-crew-282326232661274%2F&usg=AOvVaw30pXPrJihnjVQ51Xa0sW9L"],["Circus Luna", 47.4895, 8.3446, "Baden", "Switzerland", "http://circusluna.ch/" ], ["Spark Circus", 15.5553, 100.4659, "Thailand", "Thailand", "https://sparkcircus.org/about/" ], ["CircO Hannover", 52.3657, 9.7072, "Hannover", "Germany", "https://circo-hannover.de/"]]
for (i=0; i < zirkusArray.length; i++) {
var lat = zirkusArray[i][1].toFixed(4);
var lon = zirkusArray[i][2].toFixed(4);
var zirkusName = zirkusArray[i][0];
var zirkusCity = zirkusArray[i][3];
var zirkusCountry = zirkusArray[i][4];
var zirkusLink = zirkusArray[i][5];
//variable für den marker anlegen
var zirkusMarker = L.marker([lat, lon]);
//die marker der clustergruppe hinzufügen
markers.addLayer(zirkusMarker);
// Popup mit HTML erstellen // Popup an Marker anbinden
zirkusMarker.bindPopup('<a href="'+zirkusLink+'" target="_blank">'+zirkusName+'</a>' + '<br>' + zirkusCity + ', ' + zirkusCountry);
}
</script>