uniapp拍照离线定位，获取图片信息，经纬度解析地址

✅作者简介：

            我是痴心阿文，你们的学友哥，今天给大家分享uniapp拍照离线定位，获取图片信息，经纬度解析地址

  📃个人主页:痴心阿文的博客_CSDN博客-Vue.js,数组方法,前端领域博主

🔥本文前言：需求，手机拍照定位，获取经纬度并上传图片，当手机无网络的时候也可以离线拍照通过定位上传图片，用到的有地图定位api，设备信息api，相机api等。

目录

 🍉🍉🍉首先，获取当前是否有网

 🍉🍉🍉uni.getSystemInfo 获取设备信息定位权限

 🍉🍉🍉获取图片信息。 

 🍉🍉🍉获取经纬度

🍉🍉🍉值得看: 

---

 🍉🍉🍉首先，获取当前是否有网

有网时正常走有网的操作，这里主要是介绍没网的操作。 

	uni.getNetworkType({
			success: res =>{
				console.log(res.networkType);//网络类型 wifi、2g、3g、4g、ethernet、unknown、none
				if(res.networkType === "none"){
					console.log("当前无网络");
					this.getSystemInfo()
				}else{
                    //有网时的操作...
				}
			}
		});

 🍉🍉🍉uni.getSystemInfo 获取设备信息定位权限

getSystemInfo(){
			uni.getSystemInfo({
				success:res=>{
					var platform = res.platform;
					if(platform === 'android'){
						console.log("android");
						var context = plus.android.importClass("android.content.Context"); 
						var locationManager = plus.android.importClass("android.location.LocationManager");
						var main = plus.android.runtimeMainActivity();
						var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
						if(!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)){
							uni.showModal({
								title:"提示",
								content:"请打开定位服务功能",
								showCancel:false,
								success(){
									if(!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)){
										var Intent = plus.android.importClass("android.content.Intent");
										var Settings = plus.android.importClass("android.provider.Settings");
										var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGDS);
										main.startActivity(intent);
									}else{
										console.log('GPS已经开启');
										this.getunLatlng()
									}
								}
							})
						}else{
							console.log('GPS已经开启');
							this.getunLatlng()
						}
					} else if (system.platform === 'ios') {
						console.log("苹果");
						var cllocationManger = plus.ios.import("CLLocationManager");
						var enable = cllocationManger.locationServicesEnabled();
						var status = cllocationManger.authorizationStatus();
						plus.ios.deleteObject(cllocationManger);
						if (enable && status != 2) {
							 plus.geolocation.getCurrentPosition((position)=> {
							 	this.latitude = position.coords.latitude;
							 	this.longitude = position.coords.longitude;
							 	console.log("Latitude: " + this.latitude + ", Longitude: " + this.longitude);
							 }); 
						//	this.getunLatlng()
						} else {
							uni.showModal({
								title: '提示',
								content: '请打开定位服务功能',
								showCancel: false, // 不显示取消按钮
								confirmText: "去打开", // 确认按钮文字 
								confirmColor:'#09c499',//删除字体的颜色
								success() {
									var UIApplication = plus.ios.import("UIApplication");
									var application2 = UIApplication.sharedApplication();
									var NSURL2 = plus.ios.import("NSURL");
									var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION");
									application2.openURL(setting2);
									plus.ios.deleteObject(setting2);
									plus.ios.deleteObject(NSURL2);
									plus.ios.deleteObject(application2);
								}
							});
						}
			    	}
				}
			})
		},

获取到手机设备是否开启定位权限之后，我们就要进行拍照上传的步骤，拍照这里也要再判断下是否有网，有网时正常走有网定位操作，没网时走离线模式。

		chooseImage: async function() {
			uni.getNetworkType({
                success: res => {
                    console.log(res.networkType);//网络类型 wifi、2g、3g、4g、ethernet、unknown、none
                    if(res.networkType === "none"){
						this.getunLatlng()
                        console.log("当前无网络");
                    }else{
                        console.log("有网络");
                        this.getLocation()
                    }
                }
            })
			let self = this, ajaxNum=0;
			uni.chooseImage({
				count: this.num-this.pictureArr.length,
				sizeType:['compressed'],
				sourceType:this.sourceType,
				success: (res) => {
					ajaxNum=res.tempFilePaths.length;
					uni.showLoading({
						title: '正在上传...',
						mask: true
					});
					let tempFilePaths=res.tempFilePaths;
					// #ifdef H5
					tempFilePaths=res.tempFiles.map(item=>{
						console.log(item.path)
						return item.path;
					})
					// #endif
					uni.hideLoading()
					tempFilePaths.forEach(item=>{
						console.log(item,'===上传的本地图片')
						// #ifdef APP-PLUS
							var p = plus.io.convertLocalFileSystemURL(item); 
							let url =  'file://'+  p  
							self.getimginfo(url)
						// #endif
						// #ifdef H5
							self.getimginfo(item)
						// #endif
					})
				}
			})
		},

 🍉🍉🍉获取图片信息。 

	//获取图片信息
		getimginfo(filePath) {
			uni.getImageInfo({
				src: filePath,
				success: (image) => {
					console.log('image.width', image.width);
					console.log('image.height', image.height);
					this.canvasWidth1 = image.width
					this.canvasHeight1 = image.height
					this.draw(filePath)
                    //这里可以进行一些操作。
				}
			});
		},

这里可以进行一些操作，比如说，绘制图片，把经纬度信息绘制到图片里，类似小米手机的拍照打卡， 

 🍉🍉🍉获取经纬度

 通过plus APP的API获取GPS定位的经纬度，然后有网的时候可以解析地址

//获取经纬度	
getunLatlng(){
			let _this = this
			console.log('gps')
			// #ifdef APP-PLUS
			let wid = null;
			wid = plus.geolocation.watchPosition(function(p) {
				console.log(p,'p==')
				 _this.longitude = p.coords.longitude;
				 _this.latitude = p.coords.latitude;
				//let wgs84togcj02Data = _this.utils.wgs84togcj02obj({longitude:p.coords.longitude,latitude:p.coords.latitude});
				//let res = _this.utils.gd2bd({longitude:wgs84togcj02Data.longitude,latitude:wgs84togcj02Data.latitude})
			//	console.log('res：' + res.longitude,res.latitude);
			//	_this.longitude = res.longitude.toFixed(6);
			//	_this.latitude = res.latitude.toFixed(6);
			}, function(e){
				console.log(e,'e==失败')
			}, {geocode: true,enableHighAccuracy:true,accuracy:100})
			setTimeout(()=>{
				plus.geolocation.clearWatch(wid);
				wid = null;
			},3000)
			// #endif
			// #ifdef APP-PLUS
			plus.geolocation.getCurrentPosition(function (p){
				console.log(p,'position==')
				if(!(p.coords.lat_lng > 0 && p.coords.longitude >0)){
					// setTimeout(()=>{
					// 	_this.getunLatlng()
					// },5000)
				}else{
					_this.latitude = p.coords.latitude;
					_this.longitude = p.coords.longitude;
					console.log("Latitude: " + _this.latitude + ", Longitude: " + _this.longitude);
					
					//根据坐标获取位置
					var point = new plus.maps.Point(_this.longitude, _this.latitude);
					plus.maps.Map.reverseGeocode(
						point,
						{},
						function(event) {
							var address = event.address; // 转换后的地理位置
							var point = event.coord; // 转换后的坐标信息
							var coordType = event.coordType; // 转换后的坐标系类型
							console.log(address, 'address');
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							console.log(address.match(reg));
							let addressList=address.match(reg).toString().split(",");
							console.log(addressList[0]);
							console.log(addressList[1]);
							console.log(addressList[2]);
							
						},
						function(e) {}
					);
					//根据坐标获取位置	
				}
			}, function(e){
				console.log(e,'e==失败')
			}, {geocode: true})
			// {provider:'baidu',coordsType:'bd09ll',geocode: true}
			// #endif
		},

🍉🍉🍉值得看: 

HTML5+ API Reference   HTML5+获取定位的详细API

 

🍓结束语🏆

       🍉 还有一些不如的地方大家可以指正，欢迎评论留言。