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不同的密钥：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

如何使Leaflet Search实际搜索

1 个答案: