Question

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

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

Answer 1

有许多解决方案可用于向单张地图添加搜索控件。有些列在Leaflet Plugin page under Search and Popups上。搜索控件需要一些数据才能进行搜索，因此您应该可以访问地图上的某些数据。您可以将数据托管在地图上，也可以连接到某些远程数据源。

搜索本地级别的位置：

如果您的搜索标准是检索您在地图上托管的数据，那么我建议您Leaflet Search plugin maintained by Stefano Cudini查看this link上的工作示例。

更多信息，请访问：https://gis.stackexchange.com/questions/130623/adding-a-search-box-to-a-leaflet-js-example

搜索全局级别的位置：

如果您希望搜索条件搜索世界各地的随机位置（也就是说，数据库不在您的应用程序中），请使用ESRI Leaflet project之类的公司提供的自定义解决方案。请参见以下示例代码页的工作示例：“ 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: '&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>

Answer 2

此解决方案适用于leaflet和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: '&copy; <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

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

2 个答案: