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