LeafletJS: окно поиска вне карты? - PullRequest
Новая
       23

LeafletJS: окно поиска вне карты?

0 голосов
/ 11 октября 2019

В настоящее время у меня есть 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));
    }
});

это текущий вывод этого кода.

enter image description here

На данный момент все работает нормально. Но я пытаюсь создать окно поиска за пределами 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-->

enter image description here

1 Ответ

2 голосов
/ 11 октября 2019

Пожалуйста, проверьте Leaflet Control Search Плагин для добавления элемента управления поиском. 

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

Например, пожалуйста, проверьте this Вы получите полныйкод здесь

Надеюсь, это поможет вам.

...