一、背景

1、项目开发中有这么一个需求，用户刚进入页面，获取用户当前的位置，匹配最近的教师（和后端进行配合，传入经纬度就好）。
2、同时要有关联省市区级联
3、根据用户的位置，关联到省市区级联上

二、准备

• 注意： 在做uni微信小程序定位时，需要先在 manifest.json中进行提前配置scope.userLocation，如不配置微信将无法使用定位，代码如下

"permission": {
		"scope.userLocation": {
		"desc": "你的位置信息将用于小程序位置接口的效果展示" 
	}
}

配置位置–在mp-weixin中的appid同级声明就可以了：如下

三、 实现

3.1 第一个需求（获取经纬度）

• 实现通过uni的官方api可以直接获取经纬度，代码如下：
• 可以将此代码写在onLoad生命周期函数中

uni.getLocation({
	type: 'wgs84',
	success: (res) => {
		console.log(222, res) //通过打印可以看出
		this.lng = res.longitude; // 赋值给data中的数据
		this.lat = res.latitude;
	}
});

打印数据如图：

3.2 第二个需求（省市区三级联动实现）

3.2.1 省市区级联插件（uniapp lb-picker选择器的介绍）

这里使用的是uniapp lb-picker选择器
uniapp lb-picker选择器官方地址.
插件市场地址.
进入插件市场直接进行安装（详细步骤不在赘述，参考官方文档）

3.2.2 lb-picker省市区三级联动的使用

在使用省市区级联 还需要借助area-data-min.js,下载地址.来获取省市区的数据，首先是组件的使用：如下
1、首先在需要使用的页面导入lb-picker

	import LbPicker from '@/components/lb-picker'
	import areaData from '@/common/area-data-min.js'

2、在页面中是用组件

// @tap="handleTap('picker')" 定义了一个点击打开省市区级联 的选择器事件
<view style="flex: 2;line-height: 60rpx;" @tap="handleTap('picker4')">{{diqu}}</view>
// 使用省市区选择器
<lb-picker ref="picker6" v-model="value3" mode="multiSelector" :dataset="{ name: 'label3' }" :list="list1" :level="3" @confirm="handleConfirm4"> </lb-picker>

3、data中定义的数据

data() {
	return {
		diqu: '地区', // 在页面中展示的数据
		value3: [], // 存放选择的地区
		label3: '',
		list1: areaData,//导入的area-data-min.js数据
	}
},

4、methods 中定义方法

// 打开省市区级联选择器
handleTap(name) {
	this.$refs[name].show()
},
// 从后台获取数据
handleConfirm(e) {
// e.item[2].label //获取到选择的区
	console.log(e,555)// 可以获取 省市区级联选择的值
	this.diqu = e.value
	// 走接口查询数据  简单举例如下
	this.post('api/.../',{region：this.diqu}).then(res =>{
		consloe.log(res)
		略.....
	})
}

e打印结果如下：

3.3 第三个需求（根据定位将省市区，展示在选择器上）

3.3.1 根据经纬度获取详细地址名

因为微信未提供返回用户详细位置信息，需要借助第三方地图如腾讯地图或高德地图

1、配置第三方地图

这里使用的腾讯地图，如未注册，先进行注册，腾讯地图JavaScript SDK 官方文档链接如下
链接: 腾讯地图JavaScript SDK 官方文档
详细使用官方文档介绍的很清楚，这里就不在进行叙述了。按照文档步骤进行操作就可以。

本项目中使用的微信小程序JavaScriptSDK版本是JavaScriptSDK v1.2

2、在项目中导入JavaScriptSDK ,使用

在需要使用的页面中导入

import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'

3、代码实现

在onLoad生命周期函数中使用方法

uni.getLocation({
	type: 'wgs84',
	success:(res)=> {
		let qqmapsdk = new QQMapWX({
		key: '这里替换为自己注册的KEY'
		});
	qqmapsdk.reverseGeocoder({
		location: {
			latitude: res.latitude,
			longitude: res.longitude
			},
		success:(re)=> {
			console.log(5656,re);//这里定位数据
// 1、因为目前没想到获取根据城市信息获取，城市序列码，自己写了一个获取省市区编码的方法
// 2、为什么要获取省市区编码，
// 3、因为需要根据编码展示当前定位的省市区级联
			let prov_code= re.result.ad_info.city_code //省、市
			let sheng= prov_code.substring(3,5)//省
			sheng+='0000' 
			this.value3.push(sheng)
			let shi= prov_code.substring(3,9); // 市
			let qu = re.result.ad_info.adcode // 区
			this.value3.push(shi)
			this.value3.push(qu)
		},
	})
  }
});

re打印结果如下：

1、 其中用到的数据有， result.ad_info.adcode = 区的序号码，result.ad_info.city_code前三位是国家是编码序号 `之后的是区的编码序号·

2、其中返回的数据中并没有省的序列号，所以手动改变一个省的序列号。
3、省的序列号后四位都是0，所用使用result.ad_info.city_code.substring(3,5)的到前两位数字，然后在手动拼接四个0 ，得到省的序列号

到这里也就完成了功能需求，进入页面就通过定位获取详细地址信息，同时关联到lb-picker省市区级联选择器上