如何使用传单API实现自动补全位置搜索框

Question

我想问你如何从传单搜索插件中实现搜索框功能，并且只适用于两个国家。我想制作一个具有自动完成功能的位置插入输入字段。

我试着先用地图实现搜索框，但我只能看到地图，没有搜索框。

你能告诉我从哪里开始吗？我是新手，不知道该怎么走。

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);

var searchLayer = L.geoJson().addTo(map);
//... adding data in searchLayer ...
L.map('map', { searchControl: {layer: searchLayer} });  

Answer 1

查看传单的L.Control.Geocoder插件。该插件允许您使用许多不同的服务(如Open Street Maps(搜索位置。

为了将搜索结果限制在某些国家/地区，您必须配置您使用的地理编码服务。我使用OSM/Nomatim创建了一个快速示例，将搜索结果限制在英国和美国：

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
let geoCoderOptions = {
collapsed: false,
geocoder: L.Control.Geocoder.nominatim({
geocodingQueryParams: {
// List the country codes here
countrycodes: 'gb,us'
}
})
}
L.Control.geocoder(geoCoderOptions).addTo(map);

请参阅代码笔的工作示例。如果你搜索一个位置(在右上角输入(，你应该只得到在英国或美国的结果。希望这有帮助！