如何使用 Leaflet 的 Geosearch 插件获取常规表单字段以自动完成地理搜索？
Posted
技术标签:
【中文标题】如何使用 Leaflet 的 Geosearch 插件获取常规表单字段以自动完成地理搜索？【英文标题】：How to get a regular form field to autocomplete a geosearch with Leaflet's Geosearch plugin? 【发布时间】：2021-10-02 23:07:16 【问题描述】：我正在尝试使用Leaflet Geosearch 插件获取用于搜索地址以自动完成其值的常规表单字段，如this page 所示。
到目前为止，文档说它可以绑定到表单。 Jquery UI 的自动完成功能看起来可以做到这一点，但是我无法弄清楚如何做到这一点。
我已成功将表单字段链接到地理搜索提供程序，它返回一个可以在浏览器控制台中看到的数组。我可以让自动完成插件工作，但使用本地数组，而不是地理搜索插件生成的数组。
这是两个插件分别运行的示例：
<!DOCTYPE html>
<html>
<head>
<title>Leaflet tests</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style type="text/css"> #mapid height: 500px; width: 500px</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.0.0/dist/geosearch.css" />
<script src="https://unpkg.com/leaflet-geosearch@3.0.0/dist/geosearch.umd.js"></script>
</head>
<body>
<div id="mapid"></div>
<hr>
<div class="">
<label for="search">geosearch field (check console): </label>
<input id="search">
</div>
<div class="">
<label for="search2">autocomplete field (apple or banana): </label>
<input id="search2">
</div>
<script type="text/javascript">
//code for generating map below
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://s.tile.openstreetmap.org/z/x/y.png',
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a','b','c']
).addTo(mymap);
//code for search form below
const providerform = new GeoSearch.OpenStreetMapProvider();
const input = document.querySelector('input[id="search"]');
input.addEventListener('input', async (event) =>
const results = await providerform.search( query: input.value );
console.log(results[0]); // » [, , , ...]
);
//
let fruits = ['Apple', 'Banana']
$("#search2").autocomplete(
source: fruits,
delay: 100,
minLength: 1
);
</script>
</body>
</html>我非常感谢任何关于如何让自动完成功能与地理搜索提供程序一起工作的正确方向的指示。
【问题讨论】：
【参考方案1】：这应该可以，但我目前不知道如何检查，因为https://nominatim.openstreetmap.org/ 目前不工作。
$('#search2').autocomplete(
source(request, response)
const providerform = new GeoSearch.OpenStreetMapProvider(
params:
limit: 5
);
return providerform.search( query: request.term ).then(function (results)
response(results);
);
,
delay: 100,
minLength: 1
);【讨论】：
非常感谢，它有效！一个简单的问题，自动完成插件如何知道要显示数组中的哪个值？它正确显示了标签值。 如果您分析来自custom-data 的示例，那么您将看到默认情况下从标签元素中获取数据。 Leaflet.GeoSearch 也是如此，带有标签元素的对象也在那里返回。【参考方案2】：这是一个使用 jquery 的基本示例，还有其他选项
const input = document.querySelector('input[id="search2"]');
input.addEventListener('input', async (event) =>
const results = await providerform.search( query: input.value );
console.log(results[0]); // » [, , , ...]
);
let fruits = ['Apple', 'Banana']
$("#search2").autocomplete(
source: fruits,
delay: 100,
minLength: 1
);<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<hr>
<h1> Autocomplerde demo </h1>
<div class="">
<label for="search2">autocomplete field (apple or banana): </label>
<input id="search2">
</div>
<script type="text/javascript">
</script>
</body>
</html>【讨论】：
感谢您的反馈，但是在您的 sn-p 中，地理搜索字段不起作用，只有本地数组以上是关于如何使用 Leaflet 的 Geosearch 插件获取常规表单字段以自动完成地理搜索？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 iframe 中使用 Leaflet.js 中的地图
如何将 Angular JS 与 Leaflet.js 一起使用
如何在带有 webpack 的 React 应用程序中包含“leaflet.css”？