在老外的网站找到了这个，自己修改了下，顺便记录下来，方便以后使用，这个用法在之前记录的leaflet基础上添加

首先我们引入歪果仁写的js和css

<link rel="stylesheet" href="{{ url_for('static',filename='leaflet/leaflet-search.css') }}"/>
<script src="{{ url_for('static', filename='leaflet/leaflet-search.js') }}"></script>

我们在构造器上添加一个新的图层

var markersLayer = new L.LayerGroup();
map.addLayer(markersLayer);
var controlSearch = new L.Control.Search({
    position:'topleft',
    layer: markersLayer,
    initial: false,
    zoom: 12,
    marker: false
});
map.addControl( controlSearch );

然后之前的标注点需要修改，主要是绑定标注点的名字到标注点上，主要改成这样

for(var p in json.data){
    marker = L.marker(json.data[p]["loc"], {"title": json.data[p]["title"]});
    marker.bindPopup(json.data[p]["title"]);
    markersLayer.addLayer(marker);
}

然后最后提供下js和css,这两文件我都根据我实际场景进行了修修改过

leaflet-search.zip