Question

因此，我现在向弹出式多边形添加了一个弹出窗口，并添加了显示和隐藏onClick的功能。现在我需要的是单击并显示弹出窗口，我希望该弹出窗口甚至可以从小叶图层中拖动出来。

解决方案不必完全依赖传单，我只是在单击图层时创建可拖动弹出窗口的方法，并且我已经尝试将jQuery ui-draggable添加到传单弹出窗口中，并且似乎不起作用。 / p>

Answer 1

我有一个类似的问题，并使用了此处链接的解决方案 https://plnkr.co/edit/S1GPRm6sNwGDkD6oSCHs?p=preview&preview https://github.com/Leaflet/Leaflet/issues/5982

不过，它不允许您将弹出窗口拖出地图。

function makeDraggable(popup){
      var pos = map.latLngToLayerPoint(popup.getLatLng());
      L.DomUtil.setPosition(popup._wrapper.parentNode, pos);
      var draggable = new L.Draggable(popup._container, popup._wrapper);
      draggable.enable();
      
      draggable.on('dragend', function() {
        var pos = map.layerPointToLatLng(this._newPos);
        popup.setLatLng(pos);
      });
    }

map.on('click', function(event) {
         var popup = L.popup()
        .setLatLng(event.latlng)
        .setContent('<p>Hello world!<br />This is a nice popup.</p>')
        .openOn(map);

        makeDraggable(popup);
      });
    });

Answer 2

如果您想发布代码，可能会更容易获得帮助，但是我之前使用过L.Draggable。

    const div = L.DomUtil.create('div', 'map_legend');
    const draggable = new L.Draggable(div)
    draggable.enable()

可拖动的传单弹出窗口

2 个答案: