javascript - 单击标记时如何将数据显示到文本字段

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

印度尼西亚同胞你好

希望我能在某些方面帮助你

据我所知，leaflet.js 允许您为标记对象设置事件监听器。所以基本上你需要做的就是

1. 为 html 上的所有目标输入提供 ID
2. 为标记设置“click”事件监听器
3. 根据 id 更新目标输入

检查我的代码片段..

祝你有美好的一天

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)
    });
  }
})