javascript - 如何让 Leaflet Search 实际搜索

Question

实现传单搜索 example只是产生一个搜索框。打开它并开始输入时没有任何反应。传单搜索代码未被执行。它只显示红色 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中没有明确解释，插件将默认使用 marker.options.title 或 feature.properties.title 中的数据。

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

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>