如何在傳單地圖上添加搜索框
[英]How to add a search box on a leaflet map
問題描述
我想使用傳單地圖作為頁面的背景。 而且這個頁面有搜索功能，但是這個搜索框不是用來搜索這個地圖的。 所以我的問題是如何在傳單地圖上添加搜索框？
您有其他解決方案可以使用地圖作為背景嗎？ 喜歡這個頁面： http : //directory.spatineo.com/
2 個解決方案
解決方案1
10 2019-08-03 08:19:34
有許多解決方案可用於向傳單地圖添加搜索控件。 一些列在傳單插件頁面上的搜索和彈出窗口下。 搜索控件需要一些數據來進行搜索，因此您應該可以訪問地圖上的一些數據。 您可以在地圖上托管數據或連接到某些遠程數據源。
搜索本地級別的位置：
如果您的搜索條件是檢索您在地圖上托管的數據，那么我推薦由 Stefano Cudini 維護的Leaflet Search 插件請參閱此鏈接上的工作示例。
閱讀更多信息： https : //gis.stackexchange.com/questions/130623/adding-a-search-box-to-a-leaflet-js-example
搜索全球級別的位置：
如果您希望搜索條件搜索世界各地的隨機地點（即數據庫不在您的應用程序中），請使用ESRI Leaflet project等公司提供的自定義解決方案。 請參閱此代碼筆頁面的工作示例：'帶地點搜索的傳單地圖'。
<!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
此解決方案適用於傳單和geosearch 的最新版本。 首先從 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
如何使用地理門戶擴展 leaflet 在 map 上添加搜索欄
[英]How to add a search bar on a map using geo portal extention leaflet
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.