Question

问题是我想要存储某些数据，实际上是两个位置，并将它们放在Google地图上作为标记。

我有一个名为notlocations的数组，如果我使用这两个标记，它们将正常显示。但是，如果我使用getActiveTrackingTrips，它们不会显示，getActiveTrackingTrips只会返回与notlocations相同的数据。 /

在beforeMount中，我打印getActiveTrackingTrips，它显示为空数组，稍后在进行更改并热重装组件时解析了数据后，它将打印出来。

我在Vuex中调度动作后尝试在this.locations中打印created，它返回带点的数组，但是实际上在显示地图后在控制台中发生，因此在显示地图后仍然可以解决。

我想阻止代码进入mounted内部，直到它解析创建并获取数据。

<script>
import { mapGetters } from 'vuex'
import gmapsInit from '../.././utils/gmaps'

export default {
  name: 'Tracking',
  data: () => ({
    notlocations: [ 
          {
            position: {
              lat: 30.0444,
              lng: 31.2357
            }
          },
          {
            position: {
              lat: 30.1444,
              lng: 31.1357
            }
          }
          ],
          locations: []

  }),
  created() {

     this.$store
      .dispatch('allPoints')
      .then(() => {
        this.locations = this.$store.getters.getActiveTrackingTrips
        console.log('locations : ', this.locations)
        console.log('not locations : ',this.notlocations)
      })
      .catch(() => 
        console.log('Error fetching data ')
      )

  },
  beforeMount(){
    console.log('getActiveTrackingTrips')
    console.log(this.getActiveTrackingTrips)
  },
  mounted() {
    $('.container').bootstrapMaterialDesign()
    try {
      const google = gmapsInit()
      const geocoder = new google.maps.Geocoder()
      const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16
      })
      geocoder.geocode({ address: 'Cairo' }, (results, status) => {
        if (status !== 'OK' || !results[0]) {
          throw new Error(status)
        }
        //map.setCenter();
        map.fitBounds(results[0].geometry.viewport)


        console.log('mounted locations: ', this.locations)

        const markers = this.getActiveTrackingTrips.map(x => {
          console.log('x: ',x)
          new google.maps.Marker({
            ...x,
            map,
            icon: {
              url: 'http://maps.google.com/mapfiles/kml/shapes/cabs.png', // url
              scaledSize: new google.maps.Size(20, 20), // size
              origin: new google.maps.Point(0, 0), // origin
              anchor: new google.maps.Point(0, 0) // anchor
            }
          })
        })
      })
    } catch (error) {
      console.error('Error with calling Google maps API: ', error)
    }
  },
  computed: {
    ...mapGetters(['getActiveTrackingTrips'])
  },
  methods: {}
}
</script>

在装入装载之前从商店返回吸气剂

0 个答案: