Looking for a way to increase the speed of the props while my marker is moving? Currently, the speed only updates when the pause button is clicked. How can I automatically update this.speed when clicking the speed button?
I have defined the speed prop in the data section and I want to utilize it in my methods with the use of setInterval.
Here is my data:
data: () => ({
speed: 1000
});
//my methods
moveMarker () {
this.mapLoop = setInterval(() => {
if (this.index + 1 === (this.coordinates.length)) {
this.isPlay = true
clearInterval(this.mapLoop)
new mapboxgl.Popup({ offset: 25 })
.setLngLat(this.newMarker._lngLat)
.setText('You have arrived')
.addTo(this.map)
}
const el = document.createElement('div')
el.className = 'marker'
console.log(el)
this.isPlay = false
this.map.panTo(this.coordinates[this.index])
const lat = this.coordinates[this.index][0]
const lng = this.coordinates[this.index][1]
this.newMarker.setLngLat([lat, lng])
this.newMarker.addTo(this.map)
this.index++
}, this.speed)
},
//trigger button function
forward () {
this.speed -= 500
},