Как реализовать google карты с laravel и vue js, чтобы в реальном времени наблюдать за расстоянием, которое проходит пользователь?

Question

Я создаю веб-приложение с помощью Laravel и Vue JS. Идея этого приложения заключается в том, что пользователь, который использует приложение, должен выполнять задачи и обучающие упражнения. Мне нужно создать раздел, где пользователь может видеть расстояние, которое он проходит в режиме реального времени.

Я использую vue2-google-maps , и в настоящее время у меня есть следующий код.

<template>
  <div>
    <div>
      <h2>Search and add a pin</h2>
      <label>
        <gmap-autocomplete
          @place_changed="setPlace">
        </gmap-autocomplete>
        <button @click="addMarker">Add</button>
      </label>
      <br/>

    </div>
    <br>
    <gmap-map
      :center="center"
      :zoom="12"
      style="width:100%;  height: 400px;"
    >
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>



<script>
export default {
  name: "GoogleMap",
  data() {
    return {
      // default to Montreal to keep it simple
      // change this to whatever makes sense
      center: { lat: 45.508, lng: -73.587 },
      markers: [],
      places: [],
      currentPlace: null
    };
  },

  mounted() {
    this.geolocate();
  },

  methods: {
    // receives a place object via the autocomplete component
    setPlace(place) {
      this.currentPlace = place;
    },
    addMarker() {
      if (this.currentPlace) {
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng()
        };
        this.markers.push({ position: marker });
        this.places.push(this.currentPlace);
        this.center = marker;
        this.currentPlace = null;
      }
    },
    geolocate: function() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    }
  }
};
</script>

Но я не уверен, что с помощью vue2-google-maps я смогу добиться того, что пытаюсь сделать. Мне нужна помощь и предложения, пожалуйста.

Answer 1

это определенно выполнимо, вам просто нужно установить интервал для геолокации вашего местоположения каждые N секунд, а затем нажимать точки и рисовать ломаную линию, обозначающую ваш путь. Тогда вам, вероятно, придется сохранить все серверные точки, чтобы вести историю ваших тренировок, и вы также можете использовать сокеты для отправки обновлений всем подключенным клиентам, если вы хотите показать им свою позицию в реальном времени

Answer 2

Это должно быть выполнимо.Просмотр этого <GmapMarker /> компонента - хорошее начало.С точки зрения пользовательского интерфейса вы можете настроить icon 1004 * маркера (скажем, с некоторым значком аватара).И когда у вас есть логика расчета расстояния, «анимирование» маркера должно быть просто вопросом обновления свойства position по мере того, как пользователь продвигается в обучении и / или упражнениях.

Ссылки :

• Документация по API vue2-google-maps
• Настройка маркера карты Google ,или, альтернативно, vue2-gmap-custom-marker .