vue 实现Web端的定位功能 获取经纬度

下面是“Vue实现Web端的定位功能，获取经纬度”的完整攻略：

准备工作

1. 引入 Vue.js 库和 Vue-Geolocation 库。
2. 创建一个 Vue 实例对象。
3. 在实例对象中编写定位方法。

第一个示例

下面是一个简单的示例，演示如何获取用户当前的经度和纬度：

<template>
  <div>
    <button @click="getLocation()">获取位置</button>
    <p>当前位置: {{position}}</p>
  </div>
</template>

<script>
import Geolocation from 'vue-geolocation';

export default {
  components: {
    Geolocation
  },
  data() {
    return {
      position: {}
    }
  },
  methods: {
    getLocation() {
      this.$geolocation.getCurrentPosition().then(position => {
        this.position = position.coords;
      })
    }
  }
}
</script>

在上面的示例中，我们使用了 vue-geolocation 的 getCurrentPosition 方法来获取用户的经纬度信息。位置信息保存在 position 变量中，使用双花括号语法 {{position}} 渲染出来。

第二个示例

在下面这个示例中，我们演示如何获取用户距离一个固定位置的距离。在这个示例中，我们将固定位置设置为深圳市腾讯大厦的经纬度。

<template>
  <div>
    <button @click="getLocation()">获取位置</button>
    <p v-if="position.latitude && position.longitude">当前经度: {{position.latitude}}，当前纬度: {{position.longitude}}</p>
    <p v-if="distance">距离腾讯大厦: {{distance}} 千米</p>
  </div>
</template>

<script>
import Geolocation from 'vue-geolocation';

export default {
  components: {
    Geolocation
  },
  data() {
    return {
      position: {},
      distance: null
    }
  },
  methods: {
    getLocation() {
      this.$geolocation.getCurrentPosition().then(position => {
        this.position = position.coords;
        this.getDistance();
      })
    },
    getDistance() {
      const lat1 = this.position.latitude;
      const lng1 = this.position.longitude;
      const lat2 = 22.539176;
      const lng2 = 113.926837;
      const radLat1 = lat1 * Math.PI / 180.0;
      const radLat2 = lat2 * Math.PI / 180.0;
      const a = radLat1 - radLat2;
      const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
      let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
      Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      this.distance = s;
    }
  }
}
</script>

在这个示例中，我们定义了一个 getDistance 方法，用来计算当前位置到深圳市腾讯大厦的距离。我们手动设置了腾讯大厦的经纬度，并使用 haversine formula 计算距离。距离保存在 distance 变量中，使用双花括号语法 {{distance}} 渲染出来。

以上就是“Vue实现Web端的定位功能，获取经纬度”的完整攻略了，希望可以帮助你实现相关的功能。