如何通过输入传单进行搜索？

Question

我需要您的帮助，我正在使用 Leaflet 库，我想将地址搜索放在地图内，但不是在地图内搜索，但是是的，在地图外输入：

在此处输入图像描述

但是，我看到它可以做到，Nominatim甚至使用它（https://nominatim.openstreetmap.org/），但没有关于如何做到这一点的解释。

代码看起来像这样

var target = document.getElementById('map');

document.addEventListener('DOMContentLoaded', function(e){ //executa o código somente após carregar o DOM

    var optionsMap = {

        center: [-21.511263, -51.434978],

        zoom: 15

    }

    // criação do mapa

    let map = new L.map(target, optionsMap);

    map.doubleClickZoom.disable();

    //adicionar uma camada de bloco do OpenStreetMap

    let basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

    }); basemap.addTo(map);

});

/*Imports*/

@import 'reset.css';

@import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';

@import 'https://unpkg.com/leaflet@1.6.0/dist/leaflet.css';

@import 'popup.css';

/*Geral*/

body{

    background-color: rgb(109, 164, 182);

    font-family: Arial, Helvetica, sans-serif;

}

.titulo{

    padding: 0.5em;

    color: white;

    text-align: center;

    font-size: 3em;

    font-weight: bold;

    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

}

.container {

    width: 100%;

    padding-right: 15px;

    padding-left: 15px;

    margin-right: auto;

    margin-left: auto;

}

/*Section*/

.campo{

    padding: 1em;

    background-color: rgba(255, 255, 255, 0.5);

    width: 80%;

    height: 80%;

    border-radius: 1em;

    box-shadow: 0px 2px 6.35px 0.35px rgba(0, 0, 0, 0.3);

}

.pesquisa{

    border: none;

    border-top-left-radius: 5px;

    border-bottom-left-radius: 5px;

    width: 92%;

    padding: 10px;

}

.btn{

    border: none;

    border-top-right-radius: 5px;

    border-bottom-right-radius: 5px;

    padding: 10px;

    margin-left: 0em;

    margin-top: 0em;

}

.btn:hover{

    background-color: rgb(90, 136, 221, 0.3);

}

#map{    

    width: auto;

    height: 500px;

    border: none;

    border-radius: 1em;

    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);

}

Answer 1

正如我昨天所说，我准备了一个使用GeoJSON格式的工作示例。我稍微修改了自动建议我的应用程序。我已经连接了nominatim，还添加了处理静态GeoJSON文件的选项。我准备了一个分支 - autosuggest+nominatim和工作示例nominatim-leaflet-search当然，我可以在短时间内进行尽可能多的测试，但是您必须考虑到可能存在一些错误的事实。Gzip 代码，重约 8KB，所以还不错。更新我在 github Leaflet.Autocomplete上准备了一个项目，展示了插件的工作，并尽可能多地解释它是如何工作的。