数据变化时更改标记位置

Question

我正在 vue js 项目上使用 google 地图 api。

我有一个包含位置的数据表，当我的数据发生变化时，我想要一个更改标记位置来更改位置而不刷新卡片。

这是我的代码；我想添加更改标记位置的功能以及如何在我的组件中实现它。

这是我的代码：

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

        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 的计算属性。您已将标记和表数据隐藏为计算属性以实现您想要的