Vue 中使用高德地图API 获取地理位置+逆地理编码+正地理编码 附带高德教学

<template>
  <div id="app">
    <input type="text" v-model="address" @blur="geocoder" placeholder="请输入地址">
    <div v-if="lnglat">经纬度：{{lnglat}}</div>
    <input type="text" v-model="location" @blur="reverseGeocode" placeholder="请输入经纬度">
    <div v-if="addressDetail">地址详情：{{addressDetail}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      address: '', // 地址
      location: '', // 经纬度
      lnglat: null, // 转换后的经纬度
      addressDetail: null, // 地址详情
    };
  },
  methods: {
    // 地理编码
    geocoder() {
      const geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: 'all',
      });
      geocoder.getLocation(this.address, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.lnglat = result.geocodes[0].location;
        }
      });
    },
    // 逆地理编码
    reverseGeocode() {
      const geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: 'all',
      });
      geocoder.getAddress(this.location, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.addressDetail = result.regeocode.formattedAddress;
        }
      });
    },
  },
  mounted() {
    // 高德地图API初始化
    AMap.plugin(['AMap.Geocoder'], () => {});
  },
};
</script>

在这个代码示例中，我们首先在data函数中定义了address、location、lnglat和addressDetail这几个响应式数据，分别用于存储地址、经纬度、转换后的经纬度和地址详情。然后在methods中定义了geocoder和reverseGeocode两个方法，分别用于地理编码和逆地理编码。在mounted钩子函数中，我们初始化了高德地图API插件。在模板中，我们使用了两个输入框和两个div来分别显示地理编码和逆地理编码的结果。