Question

我正在使用SQL将标记显示在传单上，单击标记后如何将标记的数据输出到输入文本字段中。

这是我的脚本

<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让您将事件侦听器设置到标记对象。所以基本上您要做的就是

为您在html上的所有目标输入提供ID
将“ click”事件监听器设置为标记
根据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)
    });
  }
})

单击标记时如何在文本字段中显示数据

1 个答案: