Estoy realizando un mapa en donde pinto 2 marcadores, pero necesito que se actualicen(ubicación) cada cierto tiempo por lo cual uso setInterval().
Muestro un ejemplo de código
<template>
<div id="mapContainer" class="basemap"></div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
import dataJson from '../api/data'
export default {
name: 'BaseMap',
data() {
return {
accessToken:
'key',
map: '',
}
},
mounted() {
this.map = new mapboxgl.Map({
container: 'mapContainer',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-89.223522, 13.714624],
zoom: 10
})
},
created() {
this.interval = setInterval(() => this.updateLocation(), 60000)
},
methods: {
updateLocation() {
// data api
dataJson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div')
el.className = 'marker'
el.style.backgroundImage = marker.properties.iconUrl
let url = marker.properties.iconUrl
el.style.width = marker.properties.iconSize[0] + 'px'
el.style.height = marker.properties.iconSize[1] + 'px'
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(this.map)
})
}
}
}
</script>
<style lang="scss" scoped>
.basemap {
height: 65vh;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
</style>
El mapa se dibuja pero los marcadores no, en la consola me muestra el siguiente error Cannot read property 'map' of undefined en esta linea new mapboxgl.Marker(el)
A la espera de su valiosa ayuda.
Gracias