请用代码写出 vue 获取当前地理定位

以下是使用 Vue.js 获取当前地理定位的示例代码：

<template>
  <div>
    <p v-if="loading">正在获取位置信息...</p>
    <p v-if="error">{{ error }}</p>
    <p v-if="location">{{ location }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      error: null,
      location: null
    }
  },

  mounted() {
    this.getLocation()
  },

  methods: {
    getLocation() {
      this.loading = true

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          position => {
            this.loading = false
            this.location = `您的位置是：(${position.coords.latitude},${position.coords.longitude})`
          },
          error => {
            this.loading = false
            this.error = `获取位置信息失败：${error.message}`
          }
        )
      } else {
        this.loading = false
        this.error = '浏览器不支持地理定位'
      }
    }
  }
}
</script>

在上述代码中，我们使用了 navigator.geolocation API 来获取当前地理位置。如果浏览器支持该 API，我们调用 getCurrentPosition 方法来获取当前地理位置。该方法接受两个参数：一个成功回调函数和一个失败回调函数。成功回调函数会传入位置信息对象，失败回调函数会传入一个错误对象。我们可以根据这些信息来更新组件的状态，例如显示位置信息或错误信息。如果浏览器不支持地理定位，则显示一个错误提示