如何在 vuejs 中使用传单拖动处理程序？答案

【问题标题】：How to use leaflet draghandler in vuejs?如何在 vuejs 中使用传单拖动处理程序？
【发布时间】：2019-04-16 09:57:25
【问题描述】：

我正在使用 Leafletjs 在我的网站上显示地图。我现在开始在其中使用 Vuejs，但我遇到了错误，因为突然 this 引用了 Vuejs 实例。

考虑以下在 Vuejs 之外运行良好的函数（取自 here）：

var marker_a = new L.Marker(a, {draggable: true}).addTo(map);

marker_a.on('dragstart', dragStartHandler);

function dragStartHandler (e) {
    var latlngs = polyline.getLatLngs(),
    var latlng = this.getLatLng();
    for (var i = 0; i < latlngs.length; i++) {
        if (latlng.equals(latlngs[i])) {
            this.polylineLatlng = i;
        }
    }
}

但是当我在 Vuejs 中使用它时：

methods: {
    dragStartHandler: function (e) {
        var latlngs = this.polyline.getLatLngs();
        var latlng = this.getLatLng();latlng
        for (var i = 0; i < latlngs.length; i++) {
            if (latlng.equals(latlngs[i])) {
                this.polylineLatlng = i;
            }
        }
    }
}

您可以看到，我现在使用 this.polyline.getLatLngs() 而不是 polyline.getLatLngs()，因为我现在从 Vuejs 上下文加载 polyline。这很好用。不幸的是this.getLatLng() 给了我一个错误说this.getLatLng is not a function。这是有道理的，因为我从未在 Vuejs 中定义过getLatLng()。不过，我不确定如何将其指向 Leaflet 上下文。

谁能指出我正确的方向？

【问题讨论】：

在你的vue.js代码之外，这var latlng = this.getLatLng();这行代码是做什么的，请你详细说明一下。
如果你想摆脱所有这些混乱，我建议你使用这个Library。我已经将它用于我的项目。它是传单的最佳包装。

标签： javascript vue.js leaflet this

【解决方案1】：

您可以检查 Leaflet 传递给您的 dragStartHandler 侦听器的事件参数（您的 e 参数）：它应该有一个 target 成员引用调度事件的 Leaflet 层，在您的情况下为 marker_a .

methods: {
  dragStartHandler: function (e) {
    var latlng = e.target.getLatLng();
  }
}

【讨论】：