表单中的地址用地图的方式进行编辑与选址

• 看效果
• • 第一步：登录公众平台==>设置==>第三方设置
  • 第二步：登录腾讯地图申请属于自己小程序的key
  • 第三步：找到腾讯地图的插件
  • 第四步：添加插件与允许授权
  • 第五步：通过点击事件进入插件
  • 第六步：拿到接口调用的数据

看效果

第一步：登录公众平台==>设置==>第三方设置

第二步：登录腾讯地图申请属于自己小程序的key

腾讯地图官网

第三步：找到腾讯地图的插件

腾讯地图插件

在这里我们用到的是，地图选点

第四步：添加插件与允许授权

第五步：通过点击事件进入插件

//记得在manifest.json中添加plugins，不然无法使用插件
 1. 获取uni官方的获取当前位置的方法（uni.authorize）
 2. 如果获取到了当前的位置就可以直接把经纬度传给那个引用插件的方法
 3. 如果当前的input框是有地址的，那就把这个地址的经纬度传给那个goMao这就是getLocation方法中判断的意思

//这个方法是点击input之后进来的选地址的事件
	getLocation() {
				let that = this
				//这里是拿手机获取地理位置的信息
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						//若是用户同意授权，则会跳转到此函数，可以在此调用获取位置信息的api
						uni.getLocation({
							type: 'gcj02',
							success: res => {
					//这里是拿到表单中的经纬度用于回显地图的位置，然后地图根据经纬度发生变化
					//这里的判断是为了判断当前进来的时候有没有地址
					//如果有地址就显示当前的经纬度，没有就显示的是当前位置的经纬度
								if (!that.form.longitude) {
								//这个将我们现在的位置传给下面的goMap方法
									that.goMap(res.longitude, res.latitude)
								}else{
									that.goMap(that.form.longitude,that.form.latitude)
								}
							}
						});
					},
					fail(err) {
						console.log(err)
					}
				})
			},

			//地图选点方法
			goMap(lng, lat) {
				const key = ''; //使用在腾讯位置服务申请的key
				const referer = ''; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: lat,
					longitude: lng
				});
				const category = '生活服务,娱乐休闲';
				uni.navigateTo({
	url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
				})
			},

第六步：拿到接口调用的数据

不知道是啥的可以打印一下

onShow() {
			const location = chooseLocation.getLocation()
			if (location) {
				console.log('location', location)
				this.form.address = location.address
				this.form.longitude = location.longitude
				this.form.latitude = location.latitude
			}
		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			chooseLocation.setLocation(null);
		},

以上就完成啦~