数据更改时更改标记位置

Question

我正在vue js项目中使用谷歌地图api。我有一个数据表，其中包含我想要的位置，当我的数据更改时，更改标记位置更改位置，而不刷新卡。这是我的代码，我想添加更改标记位置的功能以及它在我的组件中的实现方式。这是我的代码：

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) => {
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)
}
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
)
)
}

Answer 1

这里我不知道哪些数据表示表数据。但我建议您在您的案例中使用带有setter和getter的computed属性。您已经将标记和表数据都转换为计算属性，以实现您想要的