Mapbox上的Vue设置数据请点击

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))