Mapbox: Открыть всплывающее окно маркера, щелкнув за пределами карты

Question

У меня есть некоторые div в моем «подключенном» коде к моим маркерам карт. Мои div имеют уникальные идентификаторы, а мои маркеры имеют тот же идентификатор, что и атрибуты (title и marker-id). Есть ли способ открыть всплывающее окно маркеров при нажатии на div? Вот мой код:

$('#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

Этот метод присвоение идентификатора маркера и вызова его в DOM не будет надежно: если маркер находится за пределами текущего просматриваемой области карты, она не будет присутствующих в DOM. Правильный метод будет

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(); 
     } 
    }); 
    });   
});