Как использовать буклет draghandler в vuejs? - PullRequest
Новая
       21

Как использовать буклет draghandler в vuejs?

1 голос
/ 15 апреля 2019

Я использую Leafletjs для отображения карты на моем сайте. Сейчас я начинаю использовать Vuejs, но получаю ошибки, потому что внезапно this ссылается на экземпляр Vuejs.

Рассмотрим следующую функцию, которая прекрасно работает вне Vuejs (взято из здесь ): 

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

Вы можете видеть, что вместо polyline.getLatLngs() я теперь использую this.polyline.getLatLngs(), потому что теперь я загружаю polyline из контекста Vuejs. Это прекрасно работает. К сожалению, this.getLatLng() дает мне ошибку, говоря this.getLatLng is not a function. Это имеет смысл, потому что я никогда не определял getLatLng() в Vuejs. Я не уверен, как указать это на контекст Leaflet.

Может ли кто-нибудь указать мне правильное направление?

1 Ответ

0 голосов
/ 16 апреля 2019

Вы можете проверить аргумент события, который Leaflet передает вашему слушателю dragStartHandler (ваш аргумент e): он должен иметь элемент target, который ссылается на слой Leaflet, который отправил событие,в вашем случае marker_a. 

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