uniapp开发中遇到的Location相关应用

uniapp开发微信小程序和app里用到过的Location相关的应用

1.首先要获取位置uni.getLocation

getlocation(){
    uni.getLocation({
	    type: 'gcj02',
	    success: function (res) {
		    console.log('当前位置的经度:' + res.longitude);
		    console.log('当前位置的纬度:' + res.latitude);
	    }
    });
},


 默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于 uni.openLocation 和 map 组件坐标,App 和 H5 需配置定位 SDK 信息才可支持 gcj02。

2.用经纬度,实现相关应用

        1>查看位置,在内置地图的显示 uni.openLocation

dotLocation(){//坐标点位置
	uni.openLocation({
		latitude: Number(34.605),
		longitude: Number(113.1),
		scale: 12,
		complete:function(res){
			console.log(res)
		}
	})
},

 我直接填了个经纬度,用的时候可以换成变量

uniapp开发中遇到的Location相关应用_第1张图片 

 打开是这样,可以点右下角,去选择app导航

        2>打开内置地图查询位置uni.chooseLocation

chooselocation(){
    uni.chooseLocation({
	    success: function (res) {
		    console.log('位置名称:' + res.name);
		    console.log('详细地址:' + res.address);
		    console.log('纬度:' + res.latitude);
		    console.log('经度:' + res.longitude);
	    }
    });

}

uniapp开发中遇到的Location相关应用_第2张图片 

样式和功能不能改变,如有别的需求可用map组件

3>map地图组件

这里是一个需求:1.类似uni.chooseLocation 2.电子围栏3.保留上次选的位置





这里面样式写的很不规范,大体功能可用,慎用,需自己申请腾讯地图key

注意

用户使用前必须授权定位

小程序使用以上接口需申请接口

 4>授权定位权限

首先要检查授权状态,已授权的就可继续定位等功能,未授权则APP提示或小程序跳转设置

getauthorize(){
// #ifdef MP-WEIXIN
	console.log('请求授权状态')
	const that=this
	uni.authorize({
		scope:'scope.userLocation',
		success() {
			console.log('成功授权')
			that.getlocation();
		},
		fail() {
			console.log('未授权')
			that.getopenconfirm()
		}
	})		
// #endif
	
// #ifdef APP-PLUS
	plus.geolocation.getCurrentPosition(function(p){
		that.resrLocation(p.coords.latitude,p.coords.longitude)
	}, function(e){
		if(e.message=='get location fail.'){
			uni.showToast({
				icon:'none',
				title:'请打开GPS定位服务'
			})
		}
		else{
			uni.showToast({
				icon:'none',
				title:e.message
			})
		}
	})
// #endif
},
//获取当前地理位置
getlocation(){
	uni.getLocation({
		type:'gcj02',
		altitude:true,
		success: (res) => {
			console.log('请求当前位置',res)
			//this.resrLocation(res.latitude,res.longitude)
		}
	})
},
//授权弹出
getopenconfirm(){
	uni.showModal({
		title:'请求授权当前位置',
		content:'需要获取您的地理位置提供服务,请确认授权',
		success: (res) => {
			if(res.confirm){
				uni.openSetting({})
			}
			else if(res.cancel){
				uni.showToast({
					title:'您拒绝了授权,无法获得定位信息,为您提供默认地址信息',
						icon:'none',
						duration:1000
				})
			}
		}
	})
},

你可能感兴趣的:(前端小记,javascript,前端,vue.js)