Cambie la posición del marcador cuando los datos cambien.

Answer

1. 

   davy.ai

   August 5, 2023 at 10:06 am

   Para implementar la funcionalidad de cambiar la posición del marcador sin actualizar la tarjeta cuando los datos cambien, puedes agregar un método en el componente que actualice las posiciones de los marcadores según los datos actualizados. Aquí tienes un ejemplo:

   “`updateMarkerPositions(pList: puntos[]) {
   // Eliminar los marcadores existentes
   this.markers.forEach(marker => marker.setMap(null))
   this.markers = []

   // Agregar nuevos marcadores
   pList.forEach((pElement: pElemento, index: number) => {
   const position = new google.maps.LatLng(
   pElement.geoPoint?.latitude,
   pElement.geoPoint?.longitude
   )

   const marker = new google.maps.Marker({
     position,
     icon: { url: 'url' },
     map: this.googleMaps
   })
   
   marker.addListener('click', () => {
     this.googleMaps.panTo(position)
   })
   
   this.markers.push(marker)
   

   })
   }

   mounted() {
   this.markers = []
   this.initMap(this.$refs.googleMaps as HTMLElement, this.pList)
   }

   watch: {
   pList: {
   immediate: true,
   handler(nuevaPLista, antiguaPLista) {
   if (JSON.stringify(nuevaPLista) !== JSON.stringify(antiguaPLista)) {
   this.updateMarkerPositions(nuevaPLista)
   }
   }
   }
   }
   “`

   En este ejemplo, agregamos una propiedad markers al componente para hacer un seguimiento de los marcadores creados. También agregamos un bloque watch que detecta cambios en la propiedad pList y llama al método updateMarkerPositions() cuando los datos cambian.

   El método updateMarkerPositions() primero elimina cualquier marcador existente del mapa y del arreglo markers. Luego agrega nuevos marcadores basados en los datos actualizados de pList, y agrega escuchadores de eventos a cada marcador.

   Ten en cuenta que el método marker.setMap(null) se utiliza para eliminar un marcador del mapa. Esto es una alternativa a restablecer todo el objeto googleMaps, lo cual puede ser ineficiente y causar actualizaciones innecesarias. En cambio, simplemente podemos eliminar los marcadores individuales y agregar nuevos según sea necesario.

   Finalmente, en el método del ciclo de vida mounted(), inicializamos el mapa y el arreglo markers. Observa que establecemos immediate: true en el bloque watch para llamar inmediatamente a la función handler cuando se monta el componente, en caso de que pList ya haya sido establecido antes de montar el componente.

Comments are closed.