как отображать данные в текстовое поле при нажатии на маркер

Question

Я использую SQL, чтобы отобразить маркер в буклете и Как вывести данные маркера в поле ввода текста при щелчке маркера.

(https://milzon.site/web/home.php)

это мой сценарий

<div id="map">
            <script>
                var mapOptions = {
                    center: [-7.54071750000000000, 110.44572410000000000],
                    zoom: 7
                }
                $(document).ready(function() {
                    getUsers();
                    getInfo();
                });
                var map = new L.map('map', mapOptions);
                var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
                map.addLayer(layer);
                function getUsers() {
                    $.getJSON("getData.php", function (data) {
                        for (var i = 0; i < data.length; i++) {
                            var location = new L.LatLng(data[i].lat, data[i].lng);
                            var name = data[i].nama_lokasi;
                            var longitude = data[i].longitude;
                            var latitude = data[i].latitude;
                            var marker = L.marker([data[i].lat, data[i].lng]).addTo(map);
                            marker.bindPopup(name);
                        }
                    })


                }

            </script>
        </div>
    </div>
    <div class="footer"  >
    <label style="padding-right: 1em; float: left; text-align: right; width: 15%;">Nama Lokasi : </label><input type="text" style="width: 800px; overflow:  ; " readonly value= "" /><br>
    <label style="padding-right: 1em; float: left; text-align: right; width: 15%">Alamat : </label><input type="text" style="width: 800px; overflow:  ; " readonly/><br>
    <label style="padding-right: 1em; float: left; text-align: right; width: 15%">Longitude : </label><input type="text" style="width: 800px; overflow:  ; " readonly/><br>
    <label style="padding-right: 1em; float: left; text-align: right; width: 15%">Latitude : </label><input type="text" style="width: 800px; overflow:  ; " readonly/><br>
    <label style="padding-right: 1em; float: left; text-align: right; width: 15%">Core Info : </label><input type="text" style="width: 800px; overflow:  ; " readonly/><br>
    <label style="padding-right: 1em; float: left; text-align: right; width: 15%">Route Info : </label><input type="text" style="width: 800px; overflow:  ; " readonly/>
    </div>

Answer 1

Hello Fellow индонезийский

надеюсь, я могу помочь вам в некоторых отношениях

, насколько я знаю leaflet.js позволяет вам установить прослушиватель событий для объекта маркера. так что в основном все, что вам нужно сделать, это

1. дать идентификатор для всех ваших целевых входных данных в html
2. установить прослушиватель события "click" для маркера
3. обновитьцелевой ввод на основе идентификатора

проверьте мой фрагмент ..

хорошего дня

HTML

<label style="padding-right: 1em; float: left; text-align: right; width: 15%;">Nama Lokasi : </label>

<!-- give an id  -->
<input id="nama" type="text" style="width: 800px; overflow:  ; " readonly value="" /><br>

<label style="padding-right: 1em; float: left; text-align: right; width: 15%">Longitude : </label>

<!-- give an id  -->
<input id="longitude" type="text" style="width: 800px; overflow:  ; " readonly/><br>

<label style="padding-right: 1em; float: left; text-align: right; width: 15%">Latitude : </label>

<!-- give an id  -->
<input id="latitude" type="text" style="width: 800px; overflow:  ; " readonly/><br>

JS

$.getJSON("getData.php", function(data) {
  for (var i = 0; i < data.length; i++) {
    var location = new L.LatLng(data[i].lat, data[i].lng);
    var name = data[i].nama_lokasi;
    var longitude = data[i].longitude;
    var latitude = data[i].latitude;
    var marker = L.marker([data[i].lat, data[i].lng]).addTo(map);
    marker.bindPopup(name);

    // add event onclick to the markers
    marker.on('click', function(name, longitude, latitude) {
      $("#name").val(name)
      $("#longitude").val(longitude)
      $("#latitude").val(latitude)
    });
  }
})