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;
});
}
});
}
上記の私のコードは完全に機能しますが、1つの質問があります。これにより、データベースからマップにマーカーが自動的に生成されます。生成されたマーカーをクリックすると、2つの異なるテキストボックスに緯度/経度のマーカーが表示される関数を追加したいと思います。どうすればこれを達成できますか？
<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>
あなたはリーフレットのイベントを探しています：
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
});
}
});
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加