0

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

14
  • dos cosas.. esa key no es real no? y otra, porque el mapa no esta en data entonces, y en el mounted lo creas....???
    – gbianchi
    el 1 dic. 2020 a las 18:28
  • es una key de prueba. trate de poner map en el data pero cuando accedo desde el mounted o created no me lo reconoce, si lo pinto en consola si me pinta el objeto pero cuando lo utilizo para agregarle el marker me da error el 1 dic. 2020 a las 19:24
  • y en el data? no lo guardas ahi?
    – gbianchi
    el 1 dic. 2020 a las 20:02
  • lo probe en el data, pero al ponerlo ahi me tira error al momento de agregar los iconos al mapa .addTo(this.map) el error me dice que mapContainer esta indefinido el 1 dic. 2020 a las 21:34
  • Y como le pasate el container una vez generado? Es por ahi por donde lo tenes que hacer funcionar
    – gbianchi
    el 1 dic. 2020 a las 21:41

1 respuesta 1

0

Puedes usar beforeMount() en vez del create() y poner hay la función de la creación del mapa

beforeMount(){
    this.map = new mapboxgl.Map({
    container: 'mapContainer',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-89.223522, 13.714624],
    zoom: 10
    })     
}, 

para luego usar en el mounted la actualización del marcador

mounted(){
    this.interval = setInterval(() => this.updateLocation(), 60000)
}

ya en la función this.updateLocation() puedes validar si se creo el mapa en la variable map

updateLocation() {
    if (this.map != null){
        // 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)
        })
    }
}

Así primero creas el mapa y luego se realizara la carga de los marcadores.

1
  • probe y me marca el siguiente error beforeMount hook: "Error: Container 'mapContainer' not found." imagino que es porque aun no se a cargado el dom entonces no encuentra el div para crear el mapa el 2 dic. 2020 a las 22:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.