如何将超链接添加到通过 Leaflet.Draw 创建的 Leaflet 折线？

Question

我正在使用 Leaflet.Draw，并且我想让我绘制的线条中包含 hyperlink，以便有人可以单击 link 并打开一个新的页面。

如何将 link 添加到通过 Leaflet.Draw 创建的折线？当我将 addLayer 添加到 drawnItems 时，如何为该层提供另一个可以是 URL?

的属性

var map = L.map('map').setView([-41.2858, 174.78682], 14);
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
        }).addTo(map);

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var drawControl = new L.Control.Draw({
        edit: {
            featureGroup: drawnItems
        }
    });
    map.addControl(drawControl);

    map.on('draw:created', function (e) {
        var type = e.layerType,
            layer = e.layer;
        drawnItems.addLayer(layer);
    });

Answer 1

点击绘制的要素后会打开一个新页面：

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    layer.on('click', function(){
       window.open('http://www.example.com','_blank');
    });  

    drawnItems.addLayer(layer);
});

这将绑定一个带有 url:

的弹出窗口

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    layer.bindPopup('<a href="http://www.example.com">example</a>');

    drawnItems.addLayer(layer);
});

但不确定您到底在寻找什么；您可能想向问题添加更多信息。通常，'draw:created' 回调是您要添加此功能的地方。

如何将超链接添加到通过 Leaflet.Draw 创建的 Leaflet 折线？

How do you add hyperlinks to Leaflet polylines created via Leaflet.Draw?

javascript

openstreetmap

leaflet