如何功能性链接JS数组，传单和搜索按钮？

Question

我正在从事一个小型的社会项目-非营利组织。这将是一个网页，在地图上显示社交马戏团项目的点数据。差不多完成了，但是我不知道最后一步。我想在导航的搜索字段和地图上显示的点之间添加功能。我也希望搜索结果显示在一个小div中。最初，地图应显示所有点。 pointdata保存在一个JS数组中，由于尝试了很多东西，我还拥有GeoJSON数据。这运作良好。显示的点数，我使用群集组。精细。如果用户搜索某个地点（城市，国家/地区，马戏团名称），我希望将匹配结果显示在div中，而我希望在地图上仅显示匹配点。 （到目前为止，我无法应付。）我也希望有一个Button来清除搜索，因此将地图设置为初始状态。

仅是代码的一部分，因为它不适用于Leaflet和bootstrap4的所有链接文件。如果我应该准备不同的代码，请告诉我。

[ 。

我确实知道有stefano cudini制作的传单搜索引擎，但到目前为止我无法使它起作用。

################################################ ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃请帮助

<!-- 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> &mdash; Map data &copy; <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>

Answer 1

将循环放入函数中。然后在开始时清除图层组markers.clearLayers()。

检查您的姓名，国家/地区，...是否包含搜索：

var searchstr = document.getElementById("inputsearch").value;
if(searchstr == "" || zirkusName.indexOf(searchstr) > -1 || zirkusCity.indexOf(searchstr) > -1 || zirkusCountry.indexOf(searchstr) > -1 ){
   markers.addLayer(zirkusMarker);
}

并将事件监听器添加到您的搜索字段：
document.getElementById("inputsearch").addEventListener('keyup',function(e){
    loadMarkers();
})

https://jsfiddle.net/falkedesign/st5384x6/