Vue 获取当前地理定位 - 代码示例

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