如何在传单地图上添加搜索框
[英]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?所以我的问题是如何在传单地图上添加搜索框？
Do you have any other solution to use a map to be the background?您有其他解决方案可以使用地图作为背景吗？ like this page: http://directory.spatineo.com/喜欢这个页面： http : //directory.spatineo.com/
2 个解决方案
解决方案1
10 2019-08-03 08:19:34
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).您可以在地图上托管数据或连接到某些远程数据源。
Search Local Level Locations:搜索本地级别的位置：
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 .如果您的搜索条件是检索您在地图上托管的数据，那么我推荐由 Stefano Cudini 维护的Leaflet Search 插件请参阅此链接上的工作示例。
Read more at: https://gis.stackexchange.com/questions/130623/adding-a-search-box-to-a-leaflet-js-example阅读更多信息： https : //gis.stackexchange.com/questions/130623/adding-a-search-box-to-a-leaflet-js-example
Search Global Level Locations:搜索全球级别的位置：
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 .如果您希望搜索条件搜索世界各地的随机地点（即数据库不在您的应用程序中），请使用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>
解决方案2
1 2020-12-10 04:27:23
This solution works with last versions of leaflet and geosearch .此解决方案适用于传单和geosearch 的最新版本。 First load scripts from unpkg.com (the order is important here).首先从 unpkg.com 加载脚本（这里的顺序很重要）。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.1.0/dist/geosearch.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-geosearch@3.1.0/dist/bundle.min.js"></script>
<script>
jQuery(document).ready(function($) {
var map = L.map('map', {
center: [36.979120, -121.899390],
zoom: 5
}); //Creates a leaflet map centered at center [latitude, longitude] coordinates.
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(map); //Creates the attribution box at the top bottom right of map.
const provider = new window.GeoSearch.OpenStreetMapProvider();
const search = new GeoSearch.GeoSearchControl({
provider: provider,
style: 'bar',
updateMap: true,
autoClose: true,
}); // Include the search box with usefull params. Autoclose and updateMap in my case. Provider is a compulsory parameter.
L.marker([51.0, -0.09]).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.'); //Creates a marker at [latitude, longitude] coordinates.
});
</script>
<div id="map"></div> // Creates the wrapper cotaining the map
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.