Javascript 使用自定义链接单击传单地图中的openPopup（）

我试图触发传单地图中的标记弹出窗口，但没有运气。我使用集群地图，它工作正常，当用户点击一个标记时打开弹出窗口。我需要扩展此功能，例如通过url传递参数，并根据页面加载时的url参数值打开特定标记。我使用以下代码进行地图聚类

        var latlng = L.latLng(-30.81881, 116.16596);
    var map = L.map('lmap', { center: latlng, zoom: 6 });
    var lcontrol = new L.control.layers();
    var eb = new L.control.layers();


    //clear map first
    clearMap();
    //resize the map
    map.invalidateSize(true);
    //load the map once all layers cleared
    loadMap();
    //reset the map size on dom ready
    map.invalidateSize(true);
function loadMap() {

        var markers_array = [];

        var roadMutant = L.gridLayer.googleMutant({
            type: 'roadmap' // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
        }).addTo(map);


        //add the control on the map

       lcontrol= L.control.layers({
            Roadmap: roadMutant

        }, {}, {
            collapsed: false
        }).addTo(map);

    var markers = L.markerClusterGroup({chunkedLoading: true, spiderfyOnMaxZoom: true, maxClusterRadius: 80, showCoverageOnHover: true });

    //clear markers and remove all layers
    markers.clearLayers();


    $.ajax({
        type: "GET",
        url: appUrl + "/Home/map", 
        data: {'atype': st},
        dataType: 'json',
        contentType: 'application/x-www-form-urlencoded',
        success: function (data) {

            $.each(data, function (i, item) {
                var img = (item.IconUrl).replace("~", "");
                var Icon = L.icon({ iconUrl: img, iconSize: [42, 42] });

                var marker = L.marker(L.latLng(item.Latitude, item.Longitude), { icon: Icon }, { title: item.Name });
                var content = "<div class='infoDiv'><h3><img src='" + appUrl + img + "' width='24' />" + item.Name + "</h3><p>" + item.Title + "</p><a href='#' data-value='" + item.AlertId + "' class='btn btn-success btn-sm alertInfo' data-toggle='modal' data-target='#alertDetails'>Details</a></div>";
                marker.bindPopup(content);
                markers.addLayer(marker);
                //add the marker to array
                markers_array.push(marker);

            });

        }

    })
   .done(function () {
       $(".loadingOverlay").hide();
       map.invalidateSize(true);
   });

    //add the markers to the map
   map.addLayer(markers);

}

var-latlng=L.latlng（-30.81881116.16596）；
var map=L.map（'lmap'，{中心：latlng，缩放：6}）；
var lcontrol=新的L.control.layers（）；
var eb=新的L.control.layers（）；
//先清除地图
clearMap（）；
//调整地图的大小
map.invalidateSize（true）；
//清除所有图层后加载地图
loadMap（）；
//在dom就绪时重置映射大小
map.invalidateSize（true）；
函数loadMap（）{
变量标记_数组=[]；
var roadMutant=L.gridLayer.google突变体({
键入：“路线图”//有效值为“路线图”、“卫星”、“地形”和“混合”
}).addTo（地图）；
//在地图上添加控件
lcontrol=L.control.layers({
路线图：道路突变体
}, {}, {
失败：错误
}).addTo（地图）；
var markers=L.markerClusterGroup（{chunkedLoading:true，spiderfyOnMaxZoom:true，maxClusterRadius:80，showCoverageOnHover:true}）；
//清除标记并删除所有图层
markers.clearLayers（）；
$.ajax({
键入：“获取”，
url:appUrl+“/Home/map”，
数据：{'atype'：st}，
数据类型：“json”，
contentType:'application/x-www-form-urlencoded'，
成功：功能（数据）{
$。每个（数据、功能（i、项）{
var img=（item.IconUrl）.replace（“~”，”）；
var Icon=L.Icon（{iconUrl:img，iconSize:[42,42]}）；
var marker=L.marker（L.latLng（item.Latitude，item.Longitude），{icon:icon}，{title:item.Name}）；
var content=“”+项目名称+“”+项目名称+“
”；
marker.bindpoop（内容）；
markers.addLayer（marker）；
//将标记添加到数组中
markers_array.push（标记器）；
});
}
})
.done（函数（）{
$（“.loadingOverlay”）.hide（）；
map.invalidateSize（true）；
});
//将标记添加到地图中
添加图层（标记）；
}

我已尝试实现以下自定义单击事件，但没有成功

function markerFunction(id) {
       alert(markers_array.length);

       for (var i = 0; i < markers.length; ++i) {
           var mid = markers_array[i]["_leaflet_id"];

           if (mid == id) {
                alert("opening " + id);
               map.markers(id).openPopup();

               }
           }
          }
    //trigger on link click
   $("a").click(function () {
       var id = $(this).attr("id");
       alert(id);
       markerFunction(id);

   });

函数标记函数（id）{
警报（标记和数组长度）；
对于（变量i=0；i

非常感谢你的帮助。提前感谢。

loadMap（）

异步获取其数据。使用该数据（或从该数据派生的任何数据）的任何操作都必须以考虑异步性的方式进行，通常是在链式

.then（）

中

目前，标记是异步创建的，但单击处理程序是独立定义和附加的。通过从

loadMap（）

返回的承诺交付

markers\u array

（和

markers

？），将允许在连接点完全填充必要的标记数据，并将其纳入单击处理程序的范围

我会这样写：

var latlng = L.latLng(-30.81881, 116.16596);
var map = L.map('lmap', { center: latlng, zoom: 6 });
var lcontrol = new L.control.layers(); // necessary?
var eb = new L.control.layers(); // necessary?

clearMap(); // why, it's only just been created?
map.invalidateSize(true);
loadMap(map).then(function(obj) {
    $(".loadingOverlay").hide();
    map.invalidateSize(true); // again?

    $("a").click(function(e) { // jQuery selector probably needs to be more specific
        e.preventDefault();
        var id = $(this).attr('id');
        for(var i=0; i<obj.markers_array.length; ++i) {
            if(obj.markers_array[i]._leaflet_id == id) {
                map.markers(id).openPopup(); // if `map.markers` is correct, maybe you don't need obj.markers?
                break; // break out of `for` loop on success.
            }
        }
    });
    return obj;
});

function loadMap(map) {
    var roadMutant = L.gridLayer.googleMutant({ type: 'roadmap' }).addTo(map);
    var lcontrol = L.control.layers({Roadmap: roadMutant}, {}, {collapsed: false}).addTo(map);

    return $.ajax({
        type: 'GET',
        url: appUrl + '/Home/map', 
        data: {'atype': st},
        dataType: 'json',
        contentType: 'application/x-www-form-urlencoded'
    }).then(function (data) {
        var markers = L.markerClusterGroup({chunkedLoading: true, spiderfyOnMaxZoom: true, maxClusterRadius: 80, showCoverageOnHover: true });
        markers.clearLayers();
        var markers_array = $.map(data, function(item) {
            var img = (item.IconUrl).replace("~", "");
            var Icon = L.icon({ iconUrl: img, iconSize: [42, 42] });
            var marker = L.marker(L.latLng(item.Latitude, item.Longitude), { icon: Icon }, { title: item.Name });
            var content = "<div class='infoDiv'><h3><img src='" + appUrl + img + "' width='24' />" + item.Name + "</h3><p>" + item.Title + "</p><a href='#' data-value='" + item.AlertId + "' class='btn btn-success btn-sm alertInfo' data-toggle='modal' data-target='#alertDetails'>Details</a></div>";
            marker.bindPopup(content);
            markers.addLayer(marker);
            return marker;
        });
        map.addLayer(markers); //add the markers to the map
        // If both 'markers_array' and 'markers' are needed later, then bundle them into an object.
        // If not, then simply return one or other of those variables.
        return {
            'markers_array': markers_array,
            'markers': markers
        };
    });
}

var-latlng=L.latlng（-30.81881116.16596）；
var map=L.map（'lmap'，{中心：latlng，缩放：6}）；
var lcontrol=new L.control.layers（）；//必要吗？
var eb=新的L.control.layers（）；//必要吗？
clearMap（）；//为什么，它只是刚刚创建的？
map.invalidateSize（true）；
loadMap（映射）。然后（函数（obj）{
$（“.loadingOverlay”）.hide（）；
map.invalidateSize（true）；//是否再次？
$（“a”）.click（函数（e）{//jQuery选择器可能需要更具体一些
e、 预防默认值（）；
var id=$（this.attr（'id'）；
对于（var i=0；i，在花了太多时间之后，我想出了一种不同的方法。通过URL传递一个参数作为散列（#）值。使用jQuery选择器获取该值并获取该记录的数据，然后在地图上打开弹出窗口。这是我的第二个代码块-


$（函数（）{
var hash=window.location.hash.substr（1）；/“90aab585-1641-43e9-9979-1B53D61118FAA”；
如果（！hash）返回false；
//显示加载
$（“.loadingOverlay”）.show（）；
$.ajax({
键入：“获取”，
url:appUrl+“/Home/GetAlert/”+哈希，
数据类型：“json”，
contentType:'application/x-www-form-urlencoded'，
成功：功能（数据）{
如果（！data.status）
{
$（'#msg'）.html（data.message）.attr（“class”，“alert-alert-warning”）；
$（“.loadingOverlay”）.hide（）；
返回false；
}
$.each（数据、消息、函数（i、项）{
var popupLoc=新的L.LatLng（项目纬度、项目经度）；
var popupContent=“”+item.Name+“”+item.Title+“
”；
//初始化弹出窗口；
var popup=新的L.popup（）；
//设置板条
popup.setLatLng（popupLoc）；
//设置内容
popup.setContent（popupContent）；
地图设置视图（新L.LatLng（项目纬度、项目经度），8）；
//显示弹出窗口
map.addLayer（弹出窗口）；
});
}