Vue.js 获取经纬度地理位置信息 - 使用 Geolocation API 和 Mapbox

你可以使用 Geolocation API 来根据经纬度获取地理位置。以下是一个使用 Vue.js 和 Geolocation API 的示例代码：

<template>
  <div>
    <h2>地理位置信息</h2>
    <p v-if="loading">正在获取位置信息...</p>
    <p v-else-if="error">获取位置信息失败: {{ error }}</p>
    <p v-else>当前位置: {{ location }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      error: null,
      location: null
    };
  },
  mounted() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        this.getLocationSuccess,
        this.getLocationError
      );
    } else {
      this.error = '浏览器不支持地理位置功能';
      this.loading = false;
    }
  },
  methods: {
    getLocationSuccess(position) {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;

      // 使用经纬度调用地理位置API获取地理位置信息
      fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${longitude},${latitude}.json?access_token=YOUR_ACCESS_TOKEN`)
        .then(response => response.json())
        .then(data => {
          this.location = data.features[0].place_name;
          this.loading = false;
        })
        .catch(error => {
          this.error = '获取地理位置信息失败';
          this.loading = false;
        });
    },
    getLocationError(error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          this.error = '用户拒绝了地理位置请求';
          break;
        case error.POSITION_UNAVAILABLE:
          this.error = '无法获取当前位置';
          break;
        case error.TIMEOUT:
          this.error = '获取地理位置超时';
          break;
        default:
          this.error = '获取地理位置失败';
          break;
      }

      this.loading = false;
    }
  }
};
</script>

请记得将YOUR_ACCESS_TOKEN替换为你自己的 Mapbox 访问令牌。这个示例代码使用 Mapbox 的地理位置 API 来获取地理位置信息，你可以根据自己的需要选择其他地理位置 API。