vue解析地址(粘贴即用)

一:需求描述

在添加收货地址时,为了方便代理下单(因为代理都是下各种不同地址的订单,输入地址的时候,是否可以直接复制粘贴 整个,智能识别,或者直接读取粘贴的内容)

二: 具体实现

GitHub上有个开源的项目(插件),实现国内地址地区智能解析,无需完整地址也能正确匹配

实现思路:
1
npm 安装 开发时依赖
npm install address-parse --save 
2在需要的组件中引入
import AddressParse from 'address-parse';
3书写地址识别框的样式
4在data中定义属性用来接收用户填入的地址信息
5methods中实现方法

	<!--智能解析框-->
	3书写地址识别框的样式
		<div class="addressBox">
			<u-input class="analysis" v-model="message" :type="type" :border="border" :height="height" :auto-height="autoHeight"placeholder="智能解析:粘贴或者输入整段文字,自动识别姓名、号码、地址,如:段佳佳13112345678浙江省杭州市西湖区某某路某某某大厦001号" />
			<div class="parseBtnbox">
				<text  class="cleanBtn"  @click="clean">清空</text>
				<button class="parseBtn"   @click="parseAddress">识别</button>
			</div>
		</div>

在这里插入图片描述

2在需要的组件中引入
import AddressParse from 'address-parse'; //引入地址解析实例
4在data中定义属性用来接收用户填入的地址信息

在这里插入图片描述
在这里插入图片描述


5methods中实现方法:

		clean() { //地址解析,清空
				this.message = ''
				console.log(this.message)
			},
			parseAddress() { //地址解析
				console.log(this.message)
				/*判断解析的地址内容不为空*/
				if (this.message != '') {
					const result = AddressParse.parse(this.message);
					this.name=result[0].name;
					this.phone=result[0].mobile;
					this.address=result[0].details;
					this.input=`${result[0].province}-${result[0].city}-${result[0].area}`
				} else {
					console.log('请输入你要解析的地址')
					this.toast('请输入您要解析的地址信息')
				}

			}
  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue解析百度地图地址,你可以使用百度地图的JavaScript API。首先,你需要在你的Vue项目中引入百度地图的API脚本。 1. 在你的index.html文件中,添加如下代码: ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script> ``` 确保替换`你的百度地图API密钥`为你的实际密钥。如果还没有百度地图API密钥,你需要前往[百度地图开放平台](https://lbsyun.baidu.com/)进行申请。 2. 在你的Vue组件中,可以使用下面的示例代码解析地址: ```javascript <template> <div> <input type="text" v-model="address" placeholder="请输入地址"> <button @click="parseAddress">解析地址</button> <p>{{ parsedAddress }}</p> </div> </template> <script> export default { data() { return { address: '', parsedAddress: '', }; }, methods: { parseAddress() { const geocoder = new BMap.Geocoder(); geocoder.getPoint(this.address, (point) => { if (point) { this.parsedAddress = `经度: ${point.lng},纬度: ${point.lat}`; } else { this.parsedAddress = '地址解析失败'; } }, '北京市'); }, }, }; </script> ``` 这个示例中,我们在Vue组件中创建了一个输入框和一个按钮,用户可以输入地址并点击按钮解析地址解析结果将显示在页面上。 当用户点击解析按钮时,`parseAddress`方法会被调用。在该方法中,我们创建了一个`BMap.Geocoder`对象,并使用`getPoint`方法来解析地址。如果解析成功,会返回一个包含经纬度信息的point对象,我们可以从中获取经度和纬度并显示在页面上。如果解析失败,我们会显示一个错误信息。 请确保在使用这段代码之前,你已经成功引入百度地图API,并替换了正确的API密钥。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值