如何让Leaflet Search真正进行搜索

Question

实现传单搜索示例只会生成一个搜索框。当您打开它并开始打字时，什么也没有发生。传单搜索代码未执行。它只显示红色Location not found。该图显示了感兴趣的区域，我需要对匹配搜索条件的区域执行一些操作，以便向用户识别它们。

var searchLayer = L.layerGroup().addTo(map);
//... adding data in searchLayer ...
map.addControl( new L.Control.Search({layer: searchLayer}) );
//searchLayer is a L.LayerGroup contains searched markers

控件中有搜索数据的代码。它考虑了 geoJson 数据结构。

为了激活搜索代码，我缺少什么？

Answer 1

尽管在Leaflet Control Search README中没有明确解释，但该插件将默认使用 inmarker.options.title或 in 中的数据。feature.properties.title

您可以在实例化搜索控件时指定与title使用该选项不同的键：propertyName

var map = L.map('map').setView([41.8990, 12.4977], 14);

var poiLayers = L.geoJSON(restaurant, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.amenity + '<br><b>' + feature.properties.name + '</b>');
  }
});

L.control.search({
    layer: poiLayers,
    initial: false,
    propertyName: 'name' // Specify which property is searched into.
  })
  .addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet-search@2.3.7/dist/leaflet-search.src.css" />
<script src="https://unpkg.com/leaflet-search@2.3.7/dist/leaflet-search.src.js"></script>

<script src="http://labs.easyblog.it/maps/leaflet-search/examples/data/restaurant.geojson.js"></script>

<div id="map" style="height: 200px"></div>