Flugblatt-Seitenleiste (Anzeige von Daten in der Seitenleiste, wenn eine Marke angeklickt wird)

Question

Ich bin neu im Flugblatt und habe Probleme, wie ich die Daten eines Markers in die Seitenleiste ausgeben kann, wenn der Marker angeklickt wird.

Dies ist die Javascript

<script> 

$(document).ready(function() { 
    getUsers(); 
}); 

//map settings 

var map = L.map('map').setView([10.3157, 123.8854], 12); 
    mapLink = 
     '<a href="http://openstreetmap.org">OpenStreetMap</a>'; 
    L.tileLayer(
     'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiamhvbmFsYmVydG1lZGlkYSIsImEiOiJjaXdhdzFlaXAwMHF2MnRrMmF6czZ6dGltIn0.kzH7HqjnyXsVBxbMdzqlXg', { 
     attribution: '&copy; ' + mapLink + ' Contributors', 
     maxZoom: 18, 
     minZoom: 12, 
     zoomControl: true 
    }).addTo(map); 
    map.zoomControl.setPosition('bottomright'); 

    var sidebar = L.control.sidebar('sidebar', { 
      closeButton: true, 
      position: 'left' 
     }); 
     map.addControl(sidebar); 

     map.on('click', function() { 
      sidebar.hide(); 
     }) 




// Get Data 
function getUsers() { 
    $.getJSON("<?php echo site_url('json/convert');?>", function (data) { //get json data from json.php 

     var markerClusters = L.markerClusterGroup(); //create a cluster group 

     for (var i = 0; i < data.length; i++) { 
      var location = new L.LatLng(data[i].lat, data[i].lng); 

      var rid = data[i].report_id; //information in the table reports 
      var rclass = data[i].report_classification; 
      var rstatus = data[i].report_status; 
      var pdate = data[i].date_posted; 
      var barangay = data[i].barangay; 
      var river = data[i].river; 
      var bridge = data[i].bridge; 
      var cdetails = data[i].complaint_details; 

      var redMarker = L.AwesomeMarkers.icon({ //leaflet markers 
       icon: 'exclamation-circle', 
       markerColor: 'red', 
       prefix: 'fa' 
       }); 
      var greenMarker = L.AwesomeMarkers.icon({ 
       icon: 'check-circle', 
       markerColor: 'green', 
       prefix: 'fa' 
       }); 
      var orangeMarker = L.AwesomeMarkers.icon({ 
       icon: 'spinner', 
       markerColor: 'orange', 
       prefix: 'fa', 
       spin: true 
       }); 

      var myIcon; //condition for markers 
       switch(rstatus) 
       { 
        case "2": 
        myIcon = redMarker; 
        break; 
        case "3": 
        myIcon = orangeMarker; 
        break; 
        case "4": 
        myIcon = greenMarker; 
        break; 
       default: 
        myIcon = redMarker; 
       } 


      var marker = L.marker([data[i].lat, data[i].lng], { icon: myIcon }); 
      marker.bindPopup("<h4><center >"+barangay+ " - " + bridge + "</h4><br>" + pdate + " : " +cdetails); 
      //marker.on('mouseover', marker.openPopup.bind(marker)); 
      //marker.on('mouseout', marker.closePopup.bind(marker)); 

      marker.on("click", function (e) { 
      //var clickedMarker = event.layer; 
      var visible = sidebar.isVisible(); 
      sidebar.setContent(""+barangay); 


      if (!visible){ 
       sidebar.toggle(); 

      } 

      }); 

      if(rstatus==0 || rclass==0 || rclass==1){ 

      map.removeLayer(marker); 

      } 
      else{ 

      markerClusters.addLayer(marker); 
      map.addLayer(markerClusters); 

      } 

     } 


    }) 
} 
</script> 

Die einzige Ausgabe, die ich in der Seitenleiste sehen kann, ist die letzten Daten, die in die Datenbank eingegeben wird, aber wenn ich auf den anderen Markierungen, die Daten in der Seitenleiste geklickt hat nicht ändern. Wie kann ich das verbessern?

Answer 1

In jedem Marker zusätzliche Attribute Bezug auf Daten oder Daten selbst zu speichern:

var marker = L.marker([36,5], {myCustomId: "abc123"}); 

diese zusätzlichen Attribute verwenden Detail für spezifische Marker auf gewünschte Ereignis zu erhalten:

marker.on("click", function (e) { 
     sidebar.setContent(""+this.options.myCustomId); 

S2