LeafletJS - Penanganan Acara
Program Leaflet JavaScript dapat menanggapi berbagai kejadian yang dibuat oleh pengguna. Di bab ini, kami akan memberikan beberapa contoh yang mendemonstrasikan cara melakukan penanganan acara saat bekerja dengan Leaflet.
Penanganan Acara
Ikuti langkah-langkah yang diberikan di bawah ini untuk menambahkan acara ke peta.
Step 1 - Buat Mapobjek dengan melewatkan elemen < div > (String atau objek) dan opsi peta (opsional).
Step 2 - Buat Layer objek dengan meneruskan URL ubin yang diinginkan.
Step 3 - Tambahkan objek lapisan ke peta menggunakan addLayer() metode dari Map kelas.
Step 4 - Tambahkan handler ke peta, seperti yang ditunjukkan di bawah ini.
map.on("click", function(e){
new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})Contoh
Kode berikut menunjukkan bahkan penanganan menggunakan Leaflet. Saat dijalankan, jika Anda mengklik peta, penanda akan dibuat di lokasi tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygons</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script>
// Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
map.on("click", function(e){
new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})
</script>
</body>
</html>Ini menghasilkan output berikut -
