从地图外的链接打开传单标记弹出窗口？

Question

希望有更多经验的人可以帮助我。我有以下地图

var map = L.map( 'map', {
  center: [48.865633, 2.321236],
  minZoom: 2,
  zoom: 13
});

L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 subdomains: ['a','b','c']
}).addTo( map );

L.control.zoom({
    position: 'bottomright'
}).addTo(map);

var myURL = jQuery( 'script[src$="leaflet_openstreetmap_func.js"]' ).attr( 'src' ).replace( 'leaflet_openstreetmap_func.js', '' );

var myIcon = L.icon({
  iconUrl: myURL + '../img/pins/Marker.png',
  iconRetinaUrl: myURL + '../img/pins/Marker.png',
  iconSize: [30, 42],
  iconAnchor: [9, 21],
  popupAnchor: [7, -15]
});

var markerClusters = L.markerClusterGroup({
    polygonOptions: {
      opacity: 0,
      fillOpacity: 0
    }
});

for ( var i = 0; i < markers.length; ++i )
{
  var popup =
        '<span>'+ 
          '<em>'+ markers[i].type_point +'</em>' +
          '<h3>'+ markers[i].name_point +'</h3>' +
        '<form action="http://maps.google.com/maps" method="get" target="_blank"><input name="saddr" value="'+ markers[i].get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ markers[i].location_latitude +',' + markers[i].location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Get directions</button></form>';


  var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude], {icon: myIcon} )
                  .bindPopup( popup );



  markerClusters.addLayer( m );
}

map.addLayer( markerClusters );

每个标记的数据来自另一个js，如下所示

var markers = [
  {
    "name_point":"Name point",
    "type_point":"Type point",
    "location_latitude":48.870587,
    "location_longitude":2.318943
  }
];

我想从外部链接打开每个弹出窗口，例如通过 id 或名称

<a href="#0" id="marker_1">click</a>

有人可以帮帮我吗？

Answer 1

为您的数据添加一个 id 参数：

  var markers = [
  {
    "id":1,
    "name_point":"Name point",
    "type_point":"Type point",
    "location_latitude":51.509,
    "location_longitude":-0.08
  },

您可以从 url 获取 id。

//www.xyz.com?markerid=3
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    const regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var POPUP_MARKER_ID = getParameterByName('markerid');

然后将标记添加到图层后，您可以打开弹出窗口，如果它是相同的id：

  var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude],{icon: myIcon})
                  .bindPopup( popup );
   markerClusters.addLayer( m );

    if(POPUP_MARKER_ID === markers[i].id){
       m.openPopup();
    }

或

如果您想从同一站点上的链接字段打开弹出窗口，您可以遍历各个层。

使用所有 html 元素：

<a class="openpopuplink" data-id="1" href="#">Marker 1</a>
<span class="openpopuplink" data-id="2">Marker 2</span>

//Link on the same page
var classname = document.getElementsByClassName("openpopuplink");

var openMarkerPopup = function() {
    var id = this.getAttribute("data-id");    
    markerClusters.eachLayer(function(layer){
        if(layer.options.id && layer.options.id == id){
        layer.openPopup();
      }
    });    
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', openMarkerPopup, false);
}

在创建标记时，您必须添加选项 id：var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude],{id: markers[i].id,icon: myIcon}).bindPopup( popup );

示例：https://jsfiddle.net/falkedesign/2uofevbq/

更新

要在 MarkerclusterGroup 中显示 Popup，蜘蛛化组然后显示弹出窗口；

if(layer.options.id && layer.options.id == id){
        if(!layer._icon) layer.__parent.spiderfy();
        layer.openPopup();
      }

if(POPUP_MARKER_ID === markers[i].id){
       m.__parent.spiderfy();
    }