Mapbox：通过在地图外部单击来打开标记的弹出窗口

Question

I have some divs in my code "connected" to my maps markers. My divs have unique ID's and my markers have the same ID set as attributes (title and marker-id). Is there any way to open the markers popup when clicking on the div? Here's my code:

$('#alldealers .dealer').each(function(){
    t = $(this).find('h2').text();
    lat = $(this).find('.lat');
    lng = $(this).find('.lng');  
    userLng = parseFloat($(lng).text());
    userLat = parseFloat($(lat).text());   
    subUniqueNum = $(this).attr('data-link');

    L.mapbox.featureLayer({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [userLng, userLat]
        },
        properties: {
            title: subUniqueNum,
            'marker-id': subUniqueNum,
            'marker-size': 'small',
            'marker-color': '#f85649',
        }
    }).bindPopup('<button class="giveMeDetails" data-attr-scroll="'+subUniqueNum+'">'+t+'</button>').addTo(map);   
});

$('.mapicon_wrapper').click(function(e){    
    tot_p = $(this).parent().parent().parent().attr('id');//parent wrapper id:same as marker's ID
    $root.animate({
        scrollTop: $('html').offset().top
    }, 500, function () {

        // This is where I need to open the markers popup with the same title as $this parent ID (tot_p)

    });        
});

Answer 1

This method of assigning an ID to a marker and calling it in the DOM won't be reliable: if the marker is outside of the currently-viewed map area, it won't be present in the DOM. A correct method would be

var markerLayer = L.mapbox.featureLayer().addTo(map);
var markers = [];
$('#alldealers .dealer').each(function(){
    t = $(this).find('h2').text();
    lat = $(this).find('.lat');
    lng = $(this).find('.lng');  
    userLng = parseFloat($(lng).text());
    userLat = parseFloat($(lat).text());   
    subUniqueNum = $(this).attr('data-link');

    markers.push({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [userLng, userLat]
        },
        properties: {
            title: subUniqueNum,
            id: subUniqueNum,
            t: t,
            'marker-size': 'small',
            'marker-color': '#f85649',
        }
    })
});

markerLayer.setGeoJSON(markers);

markerLayer.eachLayer(function (layer) {
  layer.bindPopup('<button class="giveMeDetails" data-attr-scroll="'+layer.feature.properties.title+'">'+layer.feature.properties.t+'</button>');   
});

$('.mapicon_wrapper').click(function(e){    
    var tot_p = $(this).parent().parent().parent().attr('id');//parent wrapper id:same as marker's ID
    $root.animate({
        scrollTop: $('html').offset().top
    }, 500, function () {

        // This is where I need to open the markers popup with the same title as $this parent ID (tot_p)
    markers.eachLayer(function (layer) {
      if (layer.feature.properties.id === tot_p) {
        layer.openPopup();
      }
    });
    });        
});