前端vuevant 如何获取当前设备的经纬度信息

可以使用原生的HTML5 Geolocation API来获取当前设备的经纬度信息。以下是一个基于Vue和Vant的示例代码：

在Vue组件中引入Geolocation API：

export default {
  name: 'MyComponent',
  data() {
    return {
      latitude: null,
      longitude: null,
    }
  },
  methods: {
    getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          this.showPosition,
          this.showError
        )
      } else {
        alert('Geolocation is not supported by this browser.')
      }
    },
    showPosition(position) {
      this.latitude = position.coords.latitude
      this.longitude = position.coords.longitude
    },
    showError(error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          alert('User denied the request for Geolocation.')
          break
        case error.POSITION_UNAVAILABLE:
          alert('Location information is unavailable.')
          break
        case error.TIMEOUT:
          alert('The request to get user location timed out.')
          break
        case error.UNKNOWN_ERROR:
          alert('An unknown error occurred.')
          break
      }
    },
  },
}

在Vant组件中添加一个按钮并绑定事件：

<van-button type="primary" @click="getLocation">Get Location</van-button>

当用户点击按钮时，调用getLocation方法来获取当前设备的经纬度信息。如果获取成功，会调用showPosition方法来更新Vue组件的数据。如果获取失败，会调用showError方法来显示错误信息。

注意：在使用Geolocation API时，需要用户授权才能获取设备的位置信息。如果用户拒绝了授权请求，Geolocation API将无法获取位置信息。因此，我们需要在showError方法中处理各种错误情况