LeafletJS - Olay Yönetimi

Leaflet JavaScript programı, kullanıcı tarafından oluşturulan çeşitli olaylara yanıt verebilir. Bu bölümde, Leaflet ile çalışırken olay işlemenin nasıl gerçekleştirileceğini gösteren birkaç örnek vereceğiz.

Olay işleme

Haritaya olay eklemek için aşağıda verilen adımları izleyin.

Step 1 - Bir Mapbir < div > öğesi (Dize veya nesne) ve harita seçenekleri (isteğe bağlı) ileterek nesne.

Step 2 - Bir Layer istenen döşemenin URL'sini ileterek nesne.

Step 3 - Katman nesnesini haritaya ekleyin. addLayer() yöntemi Map sınıf.

Step 4 - İşleyiciyi aşağıda gösterildiği gibi haritaya ekleyin.

map.on("click", function(e){
   new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})

Misal

Aşağıdaki kod, Leaflet kullanarak bile işlemeyi gösterir. Yürütüldüğünde, haritaya tıklarsanız, o belirli konumda bir işaretçi oluşturulacaktır.

<!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>

Aşağıdaki çıktıyı üretir -