Как отобразить мою текущую позицию с помощью Vue Google Maps - PullRequest
0 голосов
/ 20 апреля 2020

Когда я запускаю свой код, карта отображается с координатами 0, 0, где я ее инициализирую, но местоположение не обновляется до моего текущего местоположения, как должно, когда я устанавливаю lat равным position. координаты широты и lng в position.coords.longitude. Есть идеи, что может быть не так?

<template>
        <GmapMap
            :center="{lat: center.lat, lng: center.lng}"
            ...
          />
</template>


<script>
export default {
data () {
  return {
    center : { 
      lat : 0, 
      lng : 0 
    }
  }
},
methods: {
  getCurrentPosition() {
    Geolocation.getCurrentPosition().then(position => {
      console.log('Current', position)
      this.position = position
      this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        }
    })
  },
	mounted () {
    this.getCurrentPosition(
    this.geoId = Geolocation.watchPosition({enableHighAccuracy: true}, (position, err) => {
      this.position = position
    })
  },
}
</script>

1 Ответ

0 голосов
/ 20 апреля 2020

Вы действительно должны дать больше информации о зависимостях, которые вы используете, и дать правильный пример кода (тот, который вы дали нам сначала, не скомпилируется).


Из того, что я могу Посмотрите на код, это может показаться проблемой реактивности.

Если вы хотите, чтобы Vue регистрировал изменения при обновлении объекта , обязательно используйте Vue .set .

Вместо

this.center = {
  lat: position.coords.latitude,
  lng: position.coords.longitude
}

используйте:

Vue.set(this, 'center', {
  lat: position.coords.latitude,
  lng: position.coords.longitude
})

В качестве альтернативы вы можете использовать этот трюк:

this.center = Object.assign({}, this.center, {
  lat: position.coords.latitude,
  lng: position.coords.longitude
})

Vue. js Реактивность в глубине

...