LeafletJS：地图外的搜索框？

Question

目前我有这张leaflet.js地图

<div id="myMap" style="width: 100%; height:300px;"></div>

<script>
// This setup the leafmap object by linking the map() method to the map id (in <div> html element)
var map = L.map('myMap', {
center: [14.599512, 120.984222],
zoom: 13,
// minZoom: 1.5,
//  maxZoom: 1.5
});

// Start adding controls as follow... L.controlName().addTo(map);

// Control 1: This add the OpenStreetMap background tile
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


// Control 2: This add a scale to the map
L.control.scale().addTo(map);

// Control 3: This add a Search bar
var searchControl = new L.esri.Controls.Geosearch().addTo(map);


var results = new L.LayerGroup().addTo(map);

searchControl.on('results', function(data){
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
    results.addLayer(L.marker(data.results[i].latlng));
    }
});

这是此代码的当前输出。

到目前为止，这工作正常。但我想做的是在leaflet map. 当用户在地图外的搜索框中输入一些地点时，地图会自动查找搜索框的值。

这是我目前的mdb html code我不知道如何做到这一点。

  <!--Grid row-->
   <div class="row">
     <div class="col-md-12">
        <div class="md-form mb-0">
            <input type="text" id="proj_loc" name="proj_loc" class="form-control">
            <label for="proj_loc" class="">Location</label>
         </div>
       </div>
   </div>
   <!--Grid row-->

Answer 1

请检查Leaflet Control Search Plugin 以添加搜索控件。

map.addControl( new L.Control.Search({
    container: 'findbox',
    layer: markersLayer,
    initial: false,
    collapsed: false
}) );

例如，请检查此 您将在此处获得完整代码

希望这会帮助你。