Question

   function getInfo() { 
    $.getJSON("get_info.php", function (data) { 
      for (var i = 0; i < data.length; i++) { 
        var location = new L.LatLng(data[i].lat, data[i].lng); 
        var marker = new L.Marker(location,{icon:Icon1}); 
           marker.bindPopup(
              data[i].name + "<br>" + 
              data[i].user_date + "<br>" + 
              data[i].user_time + "<br>" + 
              data[i].address + "<br>"
           ).addTo(map);
           marker.on('click', function(e) { // HERE YOU GO
                var ll = marker.getLatLng();
document.querySelector('#userLat').value = ll.lat;
document.querySelector('#userLng').value = ll.lng;
           });
         } 
    }); 
  }

上面的代码完美无缺，但我有一个问题。这将自动从数据库生成地图中的标记。我只是想添加一个函数，如果单击生成的标记，它将在两个diff文本框中显示lat / long标记。我怎么能做到这一点？

<text>Marker Latitude:<text>
<input id="userLat" type="text" name="userlat"  />
<text>Marker Longhitude:<text><br>
<input id="userLng" type="text" name="userlng"  /><br><br>

Answer 1

您正在寻找Leaflet’s events：

marker.on('click', function(e) {
    alert('Event is printed out to console');
    console.log(e);
});

因此，您的代码将被修改为：

function getInfo() { 
    $.getJSON("get_info.php", function (data) { 
      for (var i = 0; i < data.length; i++) { 
        var location = new L.LatLng(data[i].lat, data[i].lng); 
        var marker = new L.Marker(location,{icon:Icon1}); 
           marker.bindPopup(
              data[i].name + "<br>" + 
              data[i].user_date + "<br>" + 
              data[i].user_time + "<br>" + 
              data[i].address + "<br>"
           ).addTo(map);
           marker.on('click', function(e) { // HERE YOU GO
             alert('Event is printed out to console'); // THIS CODE IS TO BE CHANGED
             console.log(e);                           // TO UPDATE WHATEVER YOU WANT
           });
         } 
    }); 
  }

如果已单击，如何在文本框中显示标记的纬度/长度

1 个答案: