四 uniapp的微信小程序位置服务（获取位置以及调用导航）

上一节tabBar组件

上一章节一起去了解了tabBar组件的含义和构造形式，本章节我们再来一些干货，想必很多人都知道最近微信小程序很火。
那么作为一个多平台开发的uniapp，肯定可以生成微信小程序端。那么问题来了，既然支持多端开发，肯定有很多接口是客户端自己的，就比如微信支付、微信授权登录，这些肯定是在微信小程序中才能使用。

获取微信位置

uni.getLocation(OBJECT)

获取当前的地理位置、速度。 在微信小程序中，当用户离开应用后，此接口无法调用，除非申请后台持续定位权限；当用户点击“显示在聊天顶部”时，此接口可继续调用。

参数名	类型	必填	说明	平台差异说明
type	String	否	默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标，app平台高德SDK仅支持返回gcj02
altitude	Boolean	否	传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度	App和字节跳动小程序不支持
geocode	Boolean	否	默认false，是否解析地址信息	仅App平台支持
success	Function	是	接口调用成功的回调函数，返回内容详见返回参数说明。
fail	Function	否	接口调用失败的回调函数
complete	Function	是	接口调用结束的回调函数（调用成功、失败都会执行）

先看效果展示

还可以调用自带APP导航到目的地。

看完了是不是觉得和你的需求很像嘞，那开始吧，so easy。
-_-

开始工作

1. 下载微信开发者工具，下载地址 稳定版即可。安装完成后需要将小程序的安装目录设置到uniapp中，供uniapp启动使用（也需要打开微信开发者工具的端口）
   打开微信小程序 设置——>通用设置——>安全，打开服务端口（如图所示）
   
   在uniapp中点击工具——>设置——>运行配置
   
2. 在uniapp本项目中打开manifest.json。选择微信小程序配置，微信小程序配置AppID，因为我们要配置小程序的权限配置，因此需要在这里打勾，然后选择申请原因。
   
3. 开始上代码。
   先上一个定位的代码，定位表示获取微信给的经度和纬度之后直接打开地图，此时使用的是自己的位置，因为是自己的位置，所以这里没法导航

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		onLoad(){
			this.myLocation();
		},
		data() {
			return {
				
			}
		},
		methods: {
			myLocation(){
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
						//this.longitude=res.longitude;
						//this.latitude=res.latitude;
						console.log(res.latitude);
						console.log(res.longitude);
				    uni.openLocation({
				     	            latitude: Number.parseFloat(res.latitude),
				     	            longitude: Number.parseFloat(res.longitude),
				     				address: location,
				     	            success: function () {
				     	               // console.log('success');
				     	            }
				     });
				    }
				})
			}
		}
	}
</script>

<style>

</style>

4.这里再看一个传入经度和纬度的，这里的经度和纬度我们应该从后台获取，这里为了省事，我直接用了一个方法。

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		onLoad(){
			this.tomap(117.26061,31.8512,'安徽省合肥市蜀山区人民政府')
		},
		data() {
			return {
				
			}
		},
		methods: {
			
			tomap(longitude,latitude,location){
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
						console.log("latitude",Number.parseFloat(latitude));
						console.log("longitude",Number.parseFloat(longitude));
				    uni.openLocation({
						
				     	            latitude: Number.parseFloat(latitude),
				     	            longitude: Number.parseFloat(longitude),
				     				address: location,
				     	            success: function () {
				     	               // console.log('success');
				     	            }
				     });
				    }
				})
			}
		}
	}
</script>

<style>

</style>

最后整合的代码如下

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		onLoad(){
		//获取当前位置的地图（不可以导航，出发点和目标点一致，因距离太短 无法导航）
			//this.myLocation();  //要么注释这个
			//获取后台位置的地图（可以导航，出发点和目标点不一致）
			this.tomap(117.26061,31.8512,'安徽省合肥市蜀山区蜀山政务中心') //要么注释这个 
		},
		data() {
			return {
				
			}
		},
		methods: {
			myLocation(){
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
						//this.longitude=res.longitude;
						//this.latitude=res.latitude;
						console.log(res.latitude);
						console.log(res.longitude);
				    uni.openLocation({
				     	            latitude: Number.parseFloat(res.latitude),
				     	            longitude: Number.parseFloat(res.longitude),
				     				address: location,
				     	            success: function () {
				     	               // console.log('success');
				     	            }
				     });
				    }
				})
			},
			tomap(longitude,latitude,location){
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
						console.log("latitude",Number.parseFloat(latitude));
						console.log("longitude",Number.parseFloat(longitude));
				    uni.openLocation({
						
				     	            latitude: Number.parseFloat(latitude),
				     	            longitude: Number.parseFloat(longitude),
				     				address: location,
				     	            success: function () {
				     	               // console.log('success');
				     	            }
				     });
				    }
				})
			}
		}
	}
</script>

<style>

</style>