如何在传单地图上添加搜索框

Question

如何在传单地图上添加搜索框

Anc*_*hor 6 javascript leaflet

我想使用传单地图作为页面的背景。而且这个页面有搜索功能，但是这个搜索框不是用来搜索这个地图的。所以我的问题是如何在传单地图上添加搜索框？

您有其他解决方案可以使用地图作为背景吗？喜欢这个页面：http : //directory.spatineo.com/

Answer 1

use*_*Geo 10

有许多解决方案可用于向传单地图添加搜索控件。一些列在传单插件页面上的搜索和弹出窗口下。搜索控件需要一些数据来进行搜索，因此您应该可以访问地图上的一些数据。您可以在地图上托管数据或连接到某些远程数据源。

搜索本地级别的位置：

如果您的搜索条件是检索您在地图上托管的数据，那么我推荐由 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: '&copy; <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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，6 月前
查看次数：	18267 次
最近记录：	4 年，11 月前