uniapp微信小程序实现地图导航

利用点击事件 调用handleMapLocation()这个方法时获取了自己的定位,考虑到用户拒绝获取自己的定位所以当用户再次点击后会唤起设置让用户打开定位

	handleMapLocation() {
				console.log('进入导航')
				//  经纬度暂时写死,后面介入数据
				let latitude = Number(30.xxxx);
				let longitude = Number(114.xxxx);
				let address='武汉xxx'
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度===>')
						if (res.errMsg == "getLocation:ok") {
							console.log(latitude)
							console.log(longitude)
							uni.openLocation({
								// 传入你要去的纬度
								latitude: latitude,
								// 传入你要去的经度
								longitude: longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 18,
								success: function() {
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限,是否去设置打开?',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},

记得勾选微信小程序配置这个地方

uniapp微信小程序实现地图导航_第1张图片

uniapp微信小程序实现地图导航_第2张图片

效果如下:

uniapp微信小程序实现地图导航_第3张图片

你可能感兴趣的:(小程序,小程序,vue,js)