vue-amap 高德地图进行地址信息解析成经纬度

业务场景：当用户输入完位置信息或者是详细的地址，点击按钮进行地址解析；

代码如下：

<a-form-model-item label="经度" >
      <a-input placeholder="请输入经度" v-model="model.latitude" disabled style="width: 160px" />
</a-form-model-item>
<a-form-model-item  label="纬度" >
     <a-input placeholder="请输入经度" v-model="model.longitude" disabled style="width: 160px" />
</a-form-model-item>
<a style="margin-right: 5px" @click="onMapParsing">地址解析</a>

import axios from 'axios'


/**地址解析 */
    onMapParsing() {
      var key = '这里的key可以换成你们的自己的 ' 
      let judgeAddress = this.model.province + this.model.city + this.model.district
      axios
        .get(
          `https://restapi.amap.com/v3/geocode/geo?key=${key}&address=${
            this.model.detailAddress ? this.model.detailAddress : judgeAddress
          }`
        )
        .then((res) => {
          if (res.data.info == ok) {
            const location = res.data.geocodes[0].location.split(',')
            this.model.latitude = location[0]
            this.model.longitude = location[1]
          } else {
            this.$message.warning('地址解析失败！')
          }
        })
    },

高德地图提供了接口，这里我是使用了原生的axios来进行接口调用。

高德官网实例：https://lbs.amap.com/api/webservice/guide/api/georegeo