मैं एक छोटी सामाजिक परियोजना पर काम कर रहा हूं - गैर-लाभकारी। यह एक मानचित्र पर सोशल सर्कस परियोजनाओं के बिंदु डेटा दिखाने वाला एक वेबपेज होगा। यह लगभग हो चुका है लेकिन मैं अंतिम चरण का पता नहीं लगा सकता। मैं एनएवी में सर्चफील्ड और मानचित्र पर दिखाए गए बिंदुओं के बीच कार्यक्षमता जोड़ना चाहता हूं। इसके अलावा, मैं चाहता हूं कि खोज परिणाम एक छोटे से div में दिखाए जाएं। प्रारंभ में मानचित्र को सभी बिंदुओं को दिखाना चाहिए। पॉइंटडेटा एक जेएस ऐरे में है, मेरे पास जियोसन के रूप में डेटा भी है क्योंकि मैंने पहले से ही बहुत सारे सामान की कोशिश की थी। यह अच्छा काम कर रहा है। अंक प्रदर्शित होते हैं, मैं क्लस्टर समूह का उपयोग करता हूं। जुर्माना। यदि उपयोगकर्ता किसी स्थान (शहर, देश, सर्कस का नाम) की खोज करता है, तो मैं चाहता हूं कि मिलान परिणाम एक div में दिखाए जाएं और मैं चाहता हूं कि मानचित्र पर केवल मिलान बिंदु प्रदर्शित हों। (जिसे मैं अब तक प्रबंधित नहीं कर सका।) साथ ही मैं खोज को साफ़ करने के लिए एक बटन की कामना करता हूं, इसलिए नक्शा प्रारंभिक स्थिति में सेट है।

यह केवल कोड का एक हिस्सा है क्योंकि यह लीफलेट और बूटस्ट्रैप4 की सभी लिंक की गई फाइलों के साथ काम नहीं करेगा। अगर मुझे अलग कोड तैयार करना चाहिए तो कृपया मुझे बताएं।

जैसा कि घर पर नक्शा अपनी प्रारंभिक स्थिति में काम कर रहा है, मानचित्र पर सरणी के प्रत्येक तत्व को दिखा रहा है, मुझे आश्चर्य है कि मैं कोड कैसे लिख सकता हूं ताकि लूप के लिए जो लीफलेट ऑब्जेक्ट को तत्व देता है वह उस सर्चफील्ड के साथ ठीक से बातचीत करेगा।

मुझे पता है कि स्टेफानो क्यूडिनी द्वारा लीफलेट सर्च इंजन है लेकिन मैं इसे अब तक काम नहीं कर सका।

<!-- 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>
0
milan 2 अप्रैल 2020, 19:05

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/

0
Falke Design 2 अप्रैल 2020, 18:27