高德，腾讯地图 --> 逆地址解析(坐标位置描述)

• 开发密钥（Key）是假的，记得改

<style lang="scss">
</style>

<template>
    <div>
      <p>{{positionName}}</p>
      <p>{{positionDesc}}</p>
      <p>{{latitude}}</p>
      <p>{{longitude}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "map",
    props: {},
    data() {
      return {
        latitude: 30.27415,
        longitude: 120.15515,
        positionDesc: '',
        positionName: '',
      }
    },
    computed: {},
    mounted() {
      let _this = this;

      //高德地图 https://lbs.amap.com/api/webservice/guide/api/georegeo/
      $.ajax({
        url: "https://restapi.amap.com/v3/geocode/regeo",
        type: "get",
        dataType: 'jsonp',
        data: {
          location: _this.longitude + "," + _this.latitude,//位置坐标:格式：location=lng<经度>,lat<纬度>
          key: '05111706ac5203cf5967cf7de9c64723b8fa',//开发密钥（Key）
          extensions: 'base',//base，返回基本地址信息；all 时会返回基本地址信息、附近 POI 内容、道路信息以及道路交叉口信息
        },
        success: function (res) {
          console.log(res);
          _this.positionName = res.regeocode.formatted_address; //结构化地址信息
          _this.positionDesc = res.regeocode.formatted_address; //结构化地址信息
        },
        error: function (err) {
          alert("服务端错误，请刷新浏览器后重试")
        }
      });


      //腾讯地图 https://lbs.qq.com/webservice_v1/guide-gcoder.html
      $.ajax({
        url: "https://apis.map.qq.com/ws/geocoder/v1/",
        type: "get",
        dataType: 'jsonp',
        data: {
          location: _this.latitude + "," + _this.longitude,//位置坐标，格式：location=lat<纬度>,lng<经度>
          key: "GPJRYBZ-FGECF-T3IJH-JQRWV-6I5UE-Y3FPW",//开发密钥（Key）
          get_poi: 0,//是否返回周边POI列表：1.返回；0不返回(默认)
          output: "jsonp" //返回格式：支持JSON/JSONP，默认JSON
        },
        success: function (res) {
          console.log(res);
          _this.positionName = res.result.formatted_addresses.rough; //大致位置，可用于对位置的粗略描述
          _this.positionDesc = res.result.formatted_addresses.recommend; //经过腾讯地图优化过的描述方式，更具人性化特点

        },
        error: function (err) {
          alert("服务端错误，请刷新浏览器后重试")
        }
      });


    },

  }
</script>