这次超人鸭要讲的是，如何在小程序中获取用户所在的位置，得到城市名。
在小程序中，有个api可以获取到用户的地理位置:
image.png
但是这个api只能获取到当前位置的经纬度，并不能只能获取到具体的地理信息，比如城市名之类的，这时候，我们需要用到其他方法来解析经纬度，获取具体的地理信息，超人鸭用到的是百度地图的api，下面会详细介绍。
先一步一步来，调用小程序的api获取经纬度:
//在某个js里面
wx.getLocation({
type: 'wgs84', // 得到gps坐标
success:(res) => {
// 把得到的纬度经度传给下面的函数
this.getCity(res.latitude, res.longitude)
}
})
接下来是调用百度地图的api，进入百度地图开放平台，没有账户先注册一个，然后点击 “控制台”，然后点击 “创建运用”:
image.png
进入到这个页面后，选择应用类型，超人鸭本次介绍的是使用云函数调用接口，小程序的云开发的方便好用这里就不说了。使用云函数去调用接口是属于从浏览器端发送请求，所以应用类型要选择浏览器端
然后在下面的Referer白名单里，记得加上一个 * ,不然调用不了他的接口，申请完之后就有一个appkey，在调用接口的时候会用到。
然后api文档在这里：
image.png
image.png
就可以看到这个解析地理编码的接口，需要传三个参数，appkey，纬度和经度，注意是先写纬度然后经度。
准备工作做好之后开始编写云函数，使用云开发模板创建的小程序会有：
image.png
这个文件夹，在这里面创建云函数，因为要去发送http请求，超人鸭这里使用了一个叫request-promise的插件，这里使用的是npm安装，电脑没有node的伙伴要先安装node哦，小程序的云函数其实就是node.js的代码。右键新建的云函数，选择 “在终端打开”:
需要安装两个插件
npm install request --save // 安装request-promise之前需要安装这个
npm install request-promise --save
开始编写云函数:
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const rp = require('request-promise') // 引入request-promise插件
// 云函数入口函数
exports.main = async (event, context) => {
const res = await rp(`http://api.map.baidu.com/reverse_geocoding/v3/?ak=你的ak&output=json&coordtype=wgs84ll&location=${event.latitude},${event.longitude}`).then((res) => {
return res
})
return res // 将得到的结果返回给小程序端
}
这就是这个调用百度接口的云函数了，其中的event为小程序端调用云函数时传过来的参数，然后在小程序端，接上最开始的代码:
//在某个js里面
wx.getLocation({
type: 'wgs84', // 得到gps坐标
success:(res) => {
// 把得到的纬度经度传给下面的函数
this.getCity(res.latitude, res.longitude)
}
})
getCity(latitude, longitude) {
wx.cloud.callFunction({
name: '',//定义的云函数的名字
data: { // 传给云函数的参数对象，就是上面提到的event
latitude,
longitude
}
}).then((res) => { // res就是在云函数端返回的res
// 地理位置在res.result里面，请求过来是字符串，要先转成对象
console.log(JSON.parse(res.result).result)
})
}
来看一下打印出来是什么:
image.png
不仅有城市名，还有其他详细信息，百度地图的开放平台还有很多有用的api，大家都可以去试一下。
到这里就实现了获取用户的所在城市，而且采用的是云函数调用的方式。
网友评论