vue项目实现地址自动识别功能

1、安装第三方依赖

npm install address-parse

2、在需要使用的页面引入

import AddressParse from 'address-parse';

3、在页面上写入静态的html代码，可以输入地址，加上识别的输入框；

<div class="auto_address">
    <van-field class="auto_recognition" v-model="message" autosize type="textarea" placeholder="粘贴信息，自动拆分姓名、电话和地址" />
    <van-button color="#17BF6A" @click="parseAddress">
      识别
    </van-button>
</div>

4、点击识别按钮，触发地址解析的方法，把返回结果一对一赋值。

parseAddress() {
  /*判断解析的地址内容不为空*/
  if (this.message != '') {
    const result = AddressParse.parse(this.message);
    this.name = result[0].name;
    this.phone = result[0].mobile;
    this.area = `${result[0].province}-${result[0].city}-${result[0].area}`
    this.areaDetail = result[0].details;
  } else {
    this.$toast('请输入您要识别的地址')
  }
}

5、效果展示。