我正在使用Leaflet.Draw,并且我希望允许绘制的线条在其中包含超链接,以便某人可以单击链接并打开一个新页面。

如何将链接添加到通过Leaflet.Draw创建的折线?当我将图层添加到drawItems时,如何为该图层提供另一个属性,该属性可以是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);
    });

最佳答案

单击绘制的功能时,以下内容将打开一个新页面:

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”回调是添加此功能的地方。

关于javascript - 如何将超链接添加到通过Leaflet.Draw创建的Leaflet折线中?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29357814/

10-13 04:29