最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to make Leaflet Search actually search - Stack Overflow

programmeradmin4浏览0评论

Implementing the Leaflet Search example just produces a search box. Nothing happens when you open it and start typing. The leaflet search code isn't being executed. It just shows the red Location not found. The graph shows area's of interest and I need to do something with the area's that match search criteria, to identify them to the user.

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

There is code in the control to search to the data. It takes into account a geoJson data structure.

What am I missing in order to activate the search code?

Implementing the Leaflet Search example just produces a search box. Nothing happens when you open it and start typing. The leaflet search code isn't being executed. It just shows the red Location not found. The graph shows area's of interest and I need to do something with the area's that match search criteria, to identify them to the user.

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

There is code in the control to search to the data. It takes into account a geoJson data structure.

What am I missing in order to activate the search code?

Share Improve this question asked Nov 22, 2017 at 12:10 MrFoxMrFox 5,1369 gold badges46 silver badges83 bronze badges 1
  • Leaflet has no GIS web API. You need to use your own API or a 3rd party API like Google or Bing etc. Here's a project that might help you github./smeijer/leaflet-geosearch. – Dmitry Commented Nov 22, 2017 at 12:35
Add a ment  | 

1 Answer 1

Reset to default 6

Although not explicitly explained in Leaflet Control Search README, the plugin will use the data in marker.options.title or in feature.properties.title by default.

You can specify a different key than title using the propertyName option when instantiating the Search Control:

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/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap/copyright">OpenStreetMap</a>'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" />
<script src="https://unpkg./[email protected]/dist/leaflet-src.js"></script>

<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet-search.src.css" />
<script src="https://unpkg./[email protected]/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>

发布评论

评论列表(0)

  1. 暂无评论