Question

我正在使用Laravel和Vue JS构建一个Web应用程序。此应用程序的想法是使用该应用程序的用户必须执行挑战和培训练习。我需要创建一个部分，使用户可以实时看到他走路的距离。

我正在使用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

应该可行。研究这个self.navigationItem.titleView组件是一个好的开始。从UI的角度来看，您可以自定义marker's icon（带有一些头像图标）。而且，当您具有距离计算逻辑时，“动画化”标记应该只是随着用户进行训练和/或练习而更新position属性的问题。

参考：

Answer 2

这绝对是可行的，您只需要设置一个间隔就可以每N秒对您的位置进行地理位置定位，然后按一下点并绘制标记您的路径的折线即可。然后，您可能必须保存所有积分服务器端以保留您的培训历史记录，并且如果您想实时向他们显示自己的位置，还可以使用套接字向所有连接的客户端发送更新

如何使用laravel和vue js实现google map，以实时观察用户行走的距离？

2 个答案: