Question

我是传单的新手，我在努力研究如何在点击标记时将标记数据输出到侧边栏。

这是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>

我可以在侧边栏中看到的唯一输出是输入到数据库中的最后一个数据，但是当我点击其他标记时，侧边栏中的数据不会更改。我怎样才能改善这个？

Answer 1

为每个标记添加其他属性以存储对数据或数据本身的引用：

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

使用这些附加属性获取所需事件的特定标记的详细信息：

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

S2

leaflet-sidebar（单击标记时在侧栏中显示数据）

1 个答案: