用HTML生成的外部链接打开弹出窗口

Question

I have created (via html) a list of links with IDs generated from a database via PHP,

These links are the same data that is generated in the geoJson that is drawn on the map.

var geojson = L.geoJson(geojsonSample, {

            pointToLayer: function(feature, latlng) {
                var smallIcon = new L.Icon({
                     iconSize: [50, 50],
                     iconAnchor: [13, 27],
                     popupAnchor:  [1, -24],
                     autoPanPadding: [30,30],

                     iconUrl: feature.properties.icon.iconUrl


                     });
                return L.marker(latlng, {icon: smallIcon });
            },

        onEachFeature: function(feature, layer) {
            layer._leaflet_id = feature.properties.control;
            var popupText = feature.properties.description 
                layer.bindPopup(popupText)
                layer.bindTooltip(feature.properties.title).openTooltip(); 
                }
                }).addTo(map);


    //  markers.addLayer(geojsonAux);


        var markers = L.markerClusterGroup();
        markers.addLayer(geojson).addTo(map);
                map.fitBounds(geojson.getBounds().pad(Math.sqrt(2) /4));

/// geojson example

var geojsonSample = {

    "type": "FeatureCollection",
    "features": [{"type":"Feature","geometry":{
    "type": "Point",
    "coordinates": [
        -72,
        4
    ]
},"properties":{
    "title": "Espacio Akana",
    "category": "Chile",
    "icon": {
        "iconUrl": "https:\/\/tupale.co\/milfs\/images\/secure\/?file=300\/82afc44d9c358234ebb411f848481ea4.png",
        "iconSize": [
            60
        ]
    },
      "localizacion": "-72 4 15 ",
    "control": "69c90579b5cbccc80b09df24057ff82b",
    "description": "primera descripcion "
}},{"type":"Feature","geometry":{
    "type": "Point",
    "coordinates": [
        -70.3976891,
        -23.64939325
    ]
},"properties":{
    "title": "Teatro Pedro de la Barra",
    "category": "Chile",
    "icon": {
        "iconUrl": "https:\/\/tupale.co\/milfs\/images\/secure\/?file=300\/82afc44d9c358234ebb411f848481ea4.png",
        "iconSize": [
            60
        ]
    },
    "localizacion": "-70.3976891 -23.64939325 16 ",
    "control": "7850c035cc53ee5719aa8677fb805ea7",
    "description": "segunda descripcion "
}} ]};

/// external html link example

<ul class="list-group ">
    <li class="list-group-item"><a id="7850c035cc53ee5719aa8677fb805ea7" href="#" >   Teatro Pedro de la Barra</a> </li>
    <li class="list-group-item"><a id="69c90579b5cbccc80b09df24057ff82b" href="#" >   Espacio Akana</a> </li>   
</ul>

How can I make the popup open by calling it from the onclik event of each link? demo in https://jsfiddle.net/humano/s56fz1u9/53/

Answer 1

If I'm right you want to open the marker popup based on the id of the clicked <a> tag's id. You could achieve this either by adding a class to all of your <a> tags and bindind the below function there or by binding the function dynamicaly to each <a> tag when you create them. I've done this and it worked perfect but please note that I haven't tested the below code and some adjustments may be needed.

function openMarkerPopup(e){
    const markerID = e.id;
    const marker = markers.getLayer(markerID);
    marker.openPopup();
}