Leaflet在GeoJSON图层上单击标记时打开一个弹出窗口

时间:2018-04-20 10:56:12

标签: javascript leaflet

我制作了一张传单地图。 使用 GeoJSON 加载数据 在 onEachFeature 事件中,我使用从该功能的某些属性中获取的动态内容文本绑定了该弹出窗口。

问题在于,我编写的代码弹出窗口仅在第一次点击时显示,然后我再次点击它未显示的同一个标记。

这是代码:

function showMarkets() {
    $.ajax({
        url: '/API/GetMarketsWithStatus',
        dataType: 'json',
        async: true,
    }).done(function (geoData) {
        mapLayers.markets = L.geoJSON(geoData, {
            onEachFeature: onEachMarketFeature
        }).addTo(map);
    });
}
function onEachMarketFeature(feature, layer) {
    layer.on('click', function (e) {
        layer.bindPopup('<a href="http://some-url-to-call?mktid=' + feature.properties.code + '">' + feature.properties.name + '</a>');
        this.openPopup();
    });
}

1 个答案:

答案 0 :(得分:1)

在创建功能时绑定弹出窗口,而不是在用户单击它时绑定,Leaflet将为您处理点击事件:

function onEachMarketFeature(feature, layer) {
    layer.bindPopup('<a href="http://some-url-to-call?mktid=' + feature.properties.code + '">' + feature.properties.name + '</a>');
}