如何在传单地图上添加搜索框 [英] How to add a search box on a leaflet map
问题描述
我想使用传单地图作为页面的背景.并且此页面具有搜索功能，但是此搜索框不用于搜索此地图.所以我的问题是如何在传单地图上添加搜索框?
I want to use a leaflet map to be a page's background. And this page has a search function, but this search box is not used to search this map. So my question is how to add a search box on a leaflet map?
您还有其他解决方案可以将地图用作背景吗? 类似于此页面: http://directory.spatineo.com/
Do you have any other solution to use a map to be the background? like this page: http://directory.spatineo.com/
推荐答案
有很多解决方案可用于向传单地图添加搜索控件.在搜索和弹出窗口"中的传单插件"页面上列出了一些.搜索控件需要一些数据才能进行搜索，因此您应该可以访问地图上的某些数据.您可以将数据托管在地图上，也可以连接到某些远程数据源.
There are many solutions available to adding a search control to a leaflet map. Some are listed on the Leaflet Plugin page under Search and Popups. The search control needs some data to conduct the search, so you should have access to some data on your map. You can host the data on your map or connect to some remote data source(s).
搜索本地级别的位置:
如果您的搜索条件是检索您在地图上托管的数据，那么我建议使用传单搜索"插件由Stefano Cudini维护，请参见此链接.
If your search criteria is to retrieve data you hosted on the map, then I recommend the Leaflet Search plugin maintained by Stefano Cudini See a working example on this link.
更多信息，请访问: https://gis .stackexchange.com/questions/130623/adding-a-search-box-to-a-leaflet-js-example
搜索全局级别的位置:
如果您希望搜索条件搜索世界各地的随机地点(也就是说，数据库不在您的应用程序中)，请使用由带位置搜索的传单地图".
If you want the search criteria to search for random places around the world (that is the database isn't in your app), then use a custom solution provided by a company like ESRI Leaflet project. See working example this codepen page: 'leaflet map with place search'.
<!DOCTYPE html>
<html>
<head>
<title>LeafletJS with Search Box</title>
<!-- CSS and JS files for Search Box -->
<script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>
<script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css">
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// This setup the leafmap object by linking the map() method to the map id (in <div> html element)
var map = L.map('map', {
center: [51.517327, -0.120005],
zoom: 1.5,
// minZoom: 1.5,
// maxZoom: 1.5
});
// Start adding controls as follow... L.controlName().addTo(map);
// Control 1: This add the OpenStreetMap background tile
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Control 2: This add a scale to the map
L.control.scale().addTo(map);
// Control 3: This add a Search bar
var searchControl = new L.esri.Controls.Geosearch().addTo(map);
var results = new L.LayerGroup().addTo(map);
searchControl.on('results', function(data){
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
}
});
</script>
</body>
</html>
这篇关于如何在传单地图上添加搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
