Question

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

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);
    }
});

Leaflet - UTFGrid - 添加弹出窗口

1 个答案: