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

Question

我的代码 "connected" 中有一些 div 到我的地图标记。我的 div 具有唯一 ID，我的标记具有与属性（标题和 marker-id）相同的 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

这种为标记分配 ID 并在 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();
      }
    });
    });        
});

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

Mapbox: Open a marker's popup by clicking outside the map

javascript

leaflet

mapbox

mapbox-gl-js