전단지 검색 방법 실제로 검색

전단지 검색 구현 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 데이터 구조를 고려합니다.

검색 코드를 활성화하려면 무엇이 누락 되었습니까?

출처

2017-11-22 MrFox

리플릿에는 GIS 웹 API가 없습니다. 자신의 API 또는 Google 또는 Bing 등의 타사 API를 사용해야합니다. https://github.com/smeijer/leaflet-geosearch에 도움이되는 프로젝트가 있습니다. – Dmitry

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/[email protected]/dist/leaflet.css" /> 
 
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script> 
 

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

출처

2017-11-22 12:35:35 ghybs

답변

관련 문제