Cambie la posición del marcador cuando los datos cambien.
Estoy trabajando con la API de Google Maps en un proyecto de Vue.js.
Tengo una tabla de datos que contiene posiciones y quiero cambiar la posición del marcador cuando mis datos cambien, sin tener que refrescar la tarjeta.
Este es mi código y quiero agregar la funcionalidad de cambiar la posición del marcador y cómo implementarlo en mi componente.
Este es mi código:
“`renderMap() {
this.initMap(
this.$refs.googleMaps as HTMLElement,
this.points
)
}
}
initMarker(map: google.maps.Map, pList: points[]) {
const bounds = new google.maps.LatLngBounds()
pList.forEach(
(pElement: pElement, index: number) => {
<pre><code> const marker = new google.maps.Marker({
position: {
lat: pElement.geoPoint?.latitude as number,
lng: pElement.geoPoint?.longitude as number
},
icon: { url: 'url' },
map
})
const position = new google.maps.LatLng(
pElement.geoPoint?.latitude,
pElement.geoPoint?.longitude
)
marker.addListener('click', () => {
map.panTo(position)
})
bounds.extend(position)
}
)
map.fitBounds(bounds)
</code></pre>
“`initMap(mapElement: HTMLElement, pList: points[]) {
const gestureOption: GoogleMapsGestureHandlingOptions = ‘cooperative’
const mapProp: google.maps.MapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: gestureOption,
disableDefaultUI: true,
clickableIcons: false,
minZoom: 20
}
this.googleMaps = new google.maps.Map(mapElement, mapProp)
this.initMarker(this.googleMaps, pList)
}
mounted() {
this.renderMap(
() =>
this.initMap(
this.$refs.googleMaps as HTMLElement,
this.pList
)
)
}
davy.ai
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
)
})
}
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 bloquewatch
que detecta cambios en la propiedadpList
y llama al métodoupdateMarkerPositions()
cuando los datos cambian.El método
updateMarkerPositions()
primero elimina cualquier marcador existente del mapa y del arreglomarkers
. Luego agrega nuevos marcadores basados en los datos actualizados depList
, 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 objetogoogleMaps
, 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 arreglomarkers
. Observa que establecemosimmediate: true
en el bloquewatch
para llamar inmediatamente a la funciónhandler
cuando se monta el componente, en caso de quepList
ya haya sido establecido antes de montar el componente.