leaflet 플러그인 > leaflet-fusesearch

4761 단어 fuse.jsleaflet
모호한 검색 Fuse.js를 Leaflet에서 사용할 수있게 해주는 플러그인

naomap/leaflet-fusesearch



install fuse.js


$ npm install fuse.js

    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
    <script src="./node_modules/leaflet/dist/leaflet.js"></script>

    <script src="./node_modules/fuse.js/dist/fuse.min.js"></script>
    <link rel="stylesheet" href="./leaflet-fusesearch/src/leaflet.fusesearch.css" />
    <script src="./leaflet-fusesearch/src/leaflet.fusesearch.js"></script>
    <script src="./js/data.js"></script>
    <link rel="stylesheet" href="./css/leaflet.infopane.css" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>


JS
    var map = L.map('map');
    map.setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);


    var searchCtrl = L.control.fuseSearch()
    searchCtrl.addTo(map);
    map.addControl(searchCtrl);

    var props = ['nom_comple', 'libcategor', 'commune'];
    searchCtrl.indexFeatures(jsonData.features, props);

좋은 웹페이지 즐겨찾기