Vue在Mapbox上设置数据点击

Question

我正在使用 Mapbox 在地图点击上放置一个标记。我成功获得了坐标，但是我无法将它们绑定到我的数据...

         map.on('click', function(e) {
            if (this.marker) { this.marker.remove() }
            this.marker = new mapboxgl.Marker()
            .setLngLat({ lng: e.lngLat.lng, lat: e.lngLat.lat})
            .addTo(map);
            map.flyTo({
                center: { lng: e.lngLat.lng, lat: e.lngLat.lat },
                zoom: 15
            });

            // This does not bind and update the data
            this.latitude = JSON.stringify(e.lngLat.lat)
            this.longitude = JSON.stringify(e.lngLat.lng)


        })

Answer 1

这是一个contextual binding 问题。这里的this 不是指您的vue 实例，而是指map。

// fat arrow solves this
map.on('click', function(e) => {

})

// aliasing solves this
const self = this
map.on('click', function(e) {

})

// binding solves this
map.on('click', function(e) => {

}.bind(this))