小程序获取用户所在城市(使用云函数)

这次超人鸭要讲的是,如何在小程序中获取用户所在的位置,得到城市名。
在小程序中,有个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,大家都可以去试一下。
到这里就实现了获取用户的所在城市,而且采用的是云函数调用的方式。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容