Vue.js 使用 Geolocation API 获取地理位置并进行逆地理编码

<template>
  <div>
    <button @click="getLocation">获取地理位置</button>
    <p v-if="latitude && longitude">经度：{{ longitude }}，纬度：{{ latitude }}</p>
    <p v-if="address">地理位置：{{ address }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      latitude: null,
      longitude: null,
      address: null
    };
  },
  methods: {
    getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(this.showPosition);
      } else {
        alert("Geolocation is not supported by this browser.");
      }
    },
    showPosition(position) {
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
      this.getAddress();
    },
    getAddress() {
      const geocoder = new google.maps.Geocoder();
      const latlng = new google.maps.LatLng(this.latitude, this.longitude);
      geocoder.geocode({ latLng: latlng }, (results, status) => {
        if (status === google.maps.GeocoderStatus.OK) {
          if (results[0]) {
            this.address = results[0].formatted_address;
          } else {
            this.address = "No results found";
          }
        } else {
          this.address = "Geocoder failed due to: " + status;
        }
      });
    }
  }
};
</script>
<p>在这个示例中，点击“获取地理位置”按钮会调用<code>getLocation</code>方法来获取经纬度信息。然后，通过<code>showPosition</code>方法将经纬度保存到Vue实例的<code>latitude</code>和<code>longitude</code>属性中，并调用<code>getAddress</code>方法来获取地理位置信息。<code>getAddress</code>方法通过Google Maps Geocoding API进行逆地理编码，并将结果保存到<code>address</code>属性中。最后，在Vue模板中使用<code>{{ }}</code>语法来显示经纬度和地理位置信息。</p>
<p>请注意，使用Geolocation API和Google Maps Geocoding API需要在页面中引入相关的JavaScript库，例如：</p>
<pre><code class="language-html">&lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;libraries=places&quot;&gt;&lt;/script&gt;
</code></pre>
<p>在上面的代码中，将<code>YOUR_API_KEY</code>替换为你自己的Google Maps API密钥。</p>
<p>此外，还需要在浏览器中允许获取地理位置的权限。</p>