uni-app获取省市区详细位置信息

效果图

在这里插入图片描述
主要是两个功能
一个是可以根据地图搜索定位获取省市区详细地址;
另外一种也可以通过picker省市区选择器来实现手动选择问题;
最后在实现功能的前提下把代码封装了一下,代码如下

/**
 * 格式化位置
 * @param {*} res chooseLocation成功后返回参数
 * 格式: {
	 address: "浙江省舟山市定海区昌国路61号"
	 errMsg: "chooseLocation:ok"
	 latitude: 30.019785
	 longitude: 122.106927
	 name: "舟山市定海区人民政府"
   }
 */
function formatLocation(res) {
	var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
	var REGION_PROVINCE = [];
	var addressBean = {
		REGION_PROVINCE: null,
		REGION_COUNTRY: null,
		REGION_CITY: null,
		ADDRESS: null
	};

	function regexAddressBean(address, addressBean) {
		// regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
		regex = /^(.*?[市]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
		var addxress = regex.exec(address);
		addressBean.REGION_CITY = addxress[1];
		addressBean.REGION_COUNTRY = addxress[2];
		addressBean.ADDRESS = addxress[3] + "(" + res.name + ")";
		// console.log(addxress);
	}
	if (!(REGION_PROVINCE = regex.exec(res.address))) {
		regex = /^(.*?(省|自治区))(.*?)$/;
		REGION_PROVINCE = regex.exec(res.address);
		addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
		regexAddressBean(REGION_PROVINCE[3], addressBean);
	} else {
		addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
		regexAddressBean(res.address, addressBean);
	}
	return addressBean
};
/**
 * 获取位置
 * @param {*} obj,要修改的对象
 * @param {*} address,详细地址
 * @param {*} name,位置名称
 */
function getLocation(obj, address, name) {
	// console.log(obj, name, address);
	uni.chooseLocation({
		success: function(res) {
			// console.log(res);
			var locationObj = formatLocation(res);
			obj[address] = locationObj.REGION_PROVINCE + " " +
				locationObj.REGION_CITY + " " +
				locationObj.REGION_COUNTRY;
			obj[name] = locationObj.ADDRESS;
			console.log(obj);
		},
		fail: function() {
			uni.getSetting({
				success: function(res) {
					var statu = res.authSetting;
					if (!statu['scope.userLocation']) {
						uni.showModal({
							title: '是否授权当前位置',
							content: '需要获取您的地理位置,请确认授权,否则地图功能将无法使用',
							success: function(tip) {
								if (tip.confirm) {
									uni.openSetting({
										success: function(data) {
											if (data.authSetting["scope.userLocation"] === true) {
												uni.showToast({
													title: '授权成功',
													icon: 'success',
													duration: 1000
												})
												//授权成功之后,再调用chooseLocation选择地方
												uni.chooseLocation({
													success: function(res) {
														var locationObj = formatLocation(res);
														obj[address] = locationObj.REGION_PROVINCE + " " +
															locationObj.REGION_CITY + " " +
															locationObj.REGION_COUNTRY;
														obj[name] = locationObj.ADDRESS
													},
												})
											} else {
												uni.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												})
											}
										}
									})
								}
							}
						})
					}
				},
				fail: function(res) {
					uni.showToast({
						title: '调用授权窗口失败',
						icon: 'none',
						duration: 1000
					})
				}
			})
		}
	})
};
module.exports = {
	getLocation
}

组件内调用
this.form: 表单对象
area_id: 省市区
address: 详细地址
在这里插入图片描述

!!!需要注意的是

uni-app中premission,一定一定一定要写在mainfest.json中!!!

发布了54 篇原创文章 · 获赞 21 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/qq_42816550/article/details/105755487