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 -