Leaflet - UTFGrid - 添加弹出窗口

Question

我知道这是一个初学者问题，可能很容易，但我无法让它发挥作用。我有一张带有 2 个 utfgrid 的地图，其中显示了有关自行车和远足路线的信息。它基于这个例子：

http://bl.ocks.org/milkbread/6449317

它工作正常，但我想以这种方式改变它。悬停时应该显示现有信息框，但是当单击路线时，弹出窗口应显示在我单击的位置（与显示在信息框中的信息相同）。 我尝试了不同的方法来应用它，但总是出错。这是我的工作网站的链接和负责信息框窗口的部分代码。

http://wojtas82.zrujnowane.pl/utf2.html#15/54.5027/18.4886/osm-rowerowe-piesze

还有代码：

    utfGrid2.on('mouseover', function(e){ info.update(e);}).on('mouseout', function(e){ info.update();})

    utfGrid1.on('mouseover', function(e){ info.update(e);}).on('mouseout', function(e){ info.update();})

    var info = L.control();
    info.options.position = 'bottomleft';
    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
        this.update();
        return this._div;
    };


    info.update = function (props) {
        this._div.innerHTML = (props ?
        '<img src="img/' + props.data.route +'_'+ props.data.osmc_color +'_'+ props.data.osmc_background +'_'+ props.data.osmc_foreground + '.png" ><br /> ' + "<b>" + props.data.name + "</b><br />" + 'Długość: ' + (props.data.distance ? props.data.distance : '') + ' km'  + "<br />" + 'Opis szlaku: ' + (props.data.description ? props.data.description : '')   : '');
    };

我将非常乐意提供帮助。 非常感谢。

Answer 1

您是否尝试过使用 L.popup 为您的弹出窗口？像

utfGrid1.on('click', function(e) {
    if (e.data) {
        L.popup()
            .setLatLng(e.latlng)
            .setContent(e ? '<img src="img/' + e.data.route + '_' + e.data.osmc_color + '_' + e.data.osmc_background + '_' + e.data.osmc_foreground + '.png" ><br /> ' + "<b>" + e.data.name + "</b><br />" + 'Długość: ' + (e.data.distance ? e.data.distance : '') + ' km' + "<br />" + 'Opis szlaku: ' + (e.data.description ? e.data.description : '')).openOn(map);
    }
});