如何定位此数组中的索引？

Question

I am trying to add rename and delete functionality to my map, but I have thus far been unable to target a single value in the markers array. I tried using markers.indexOf(marker) as seen below:

L.DomEvent.on(deleteBtn, 'click', function(ev) {
        var index =  markers.indexOf(marker);
          console.log(marker.indexOf(index));
           console.log('Delete button clicked!');
        }, this);
        });

When I do this, I get all markers on the map in console. When I use the array.find method, I get back false indicating the value doesn't exist, but each marker is an object stored in local storage.The objective is to be able to retrieve an index of a member of the markers array to grab values from local storage to change them as needed.

 // Creates the custom markers added by the user and stores them to localStorage
    var markers = [];
    var customLayer = new L.layerGroup();
    myMap.on('contextmenu', function(e) {
          var marker = L.marker(e.latlng,
          {icon : flagIcon}).addTo(customLayer).addTo(myMap);
          marker.bindTooltip("<b>Custom</b>", {permanent: true, offset: [0, 0],direction: "bottom"});
          customLayer.addTo(myMap);
          markers.push({ coords: e.latlng, name: "<b>Custom</b>" });

          marker.on('click', function(e) {

            renameDeleteChoice(e);
            L.DomEvent.on(renameBtn, 'click', function(ev) {

                console.log('Rename button clicked!');
            }, this);

            L.DomEvent.on(deleteBtn, 'click', function(ev) {
           // I have been trying code here
               console.log('Delete button clicked!');
            }, this);
            });

    // Save marker Coords to localStorage

          markers.forEach(function() {
            window.localStorage.setItem('customData', JSON.stringify(markers));

       });
    });

Did I just set this up wrong? Is my array that I push new values to supposed to have this behavior? Here's the documentation for leaflet in case anyone needs it. I'd be happy to answer any questions for clarification.

https://leafletjs.com/reference-1.3.4.html

Thanks in advance for any guidance you provide.

Answer 1

You could add a unique id to the marker variable that is also referenced in the custom object, and then find the item based off that. If the latlng value is unique you could do something like:

myMap.on('contextmenu', function(e) {
    var marker = ...;
    marker.id = e.latlng; 
    markers.push({ coords: e.latlng, name: "<b>Custom</b>" });

    marker.on('click', function(e) {
        L.DomEvent.on(deleteBtn, 'click', function(ev) {
            var markerId = marker.id;
            var markerItem = markers.find(function(m) {
                return m.coords === markerId;
            });
            // update markerItem in some way
            // alternatively, use findIndex if you really just want the index
        }, this);
    });
 });