Question

基本上，我的Leaflet地图上有几个标记。我正在使用jQuery。目前，如果我想用AJAX填充标记的弹出窗口，我必须使用此代码：

var marker = L.marker([51.5, -0.09]).addTo(map);
var marker2 = L.marker([51.49, -0.09]).addTo(map);

marker.on("click", function ()
{
    $.ajax({
        type: "GET",
        url: "Home/transactionForm",
        dataType: "html",
        success: function(ajaxresult)
        {
            marker.setPopupContent(ajaxresult);
        },
        error: function (ajaxresult) {
            alert("Filling the popup failed!");
        }
    });
});

marker2.on("click", function ()
{
    $.ajax({
        type: "GET",
        url: "Home/transactionForm",
        dataType: "html",
        success: function(ajaxresult)
        {
            marker2.setPopupContent(ajaxresult);
        },
        error: function (ajaxresult) {
            alert("Filling the popup failed!");
        }
    });
});

显然，这远非理想。在jQuery中，这很简单：

$("#map").on("click", "#marker", function() {
    $.ajax({
    type: "GET",
    url: "Home/transactionForm",
    dataType: "html",
    success: function(ajaxresult)
    {
        $(this).setPopupContent(ajaxresult);
    },
    error: function (ajaxresult) {
        alert("Filling the popup failed!");
    }
});

我该怎么做？我知道我的地图ID，但无法确定ID Leaflet分配给它的标记，弹出窗口和其他元素。

Answer 1

Leaflet不会为每个标记/弹出窗口添加不同的ID。它只是为每个元素添加适当的类。所以这些元素不是用jQuery选择器访问的。

如果你想用带有相同网址的ajax设置弹出内容（正如你在这里所做的那样），为什么不将所有标记添加到列表中，遍历它，然后为每个标记设置事件处理程序名单。像这样：

var markersArray = [];
markersArray.push(marker1);
markersArray.push(marker2);
for (var marker in markersArray) {
marker.on("click", function () {
    $.ajax({
        type: "GET",
        url: "Home/transactionForm",
        dataType: "html",
        success: function(ajaxresult)
        {
            marker.setPopupContent(ajaxresult);
        },
        error: function (ajaxresult) {
            alert("Filling the popup failed!");
        }
    });
});
}

宣传单：如何影响地图上的所有标记？

1 个答案: