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、效果展示。