序言

今天给大家分享下小程序如何获取用户的城市定位。基本每个生活服务的应用都有这种类似场景，通过用户的当前位置，就可以实现周边的路线、美食等场景，典型的例子有高德地图中的导航、饿了么的定位等。那小程序怎么实现获取用户的城市定位呢，这就得看看如何运用百度API与小程序的API来实现这一功能。

小程序的API

`wx.getLocation`

获取用户的地理位置、速度。参考api，里面的参数type来获取坐标；altitude是否获取经纬度；以及回调函数的使用等。返回值比较详细些，经度、纬度、速度以及高度等等。

`wx.openLocation `

这个API会打开微信内置地图， 选择坐标。
打开地图选择位置。通过上面那个API-wx.getLocation获取name位置名称、address详细位置、longitude经度、latitude维度来作为openLocation的参数。

`wx.chooseLocation `

利用地图选择位置，展示位置周边的场景。

百度API

然而，微信小程序的api上并没有获取国家或者城市信息，那要像微信朋友圈那样的帖子下面显示城市信息的话，还是得借助第三方的地图api，我在这里给各位老铁介绍下百度地图api的示例。

1.访问百度地图api(http://lbsyun.baidu.com/)

找到【开发文档】-【服务接口】-【web服务】-【地理解码】，可以实现通过经纬度返回城市信息；也可以通过城市信息返回经纬度。

 

2.申请token

有几个步骤分别是：【申请百度账号】-【申请开发者】-【获取服务秘钥】。这几个步骤执行完后，便继续进行秘钥的获取。

 

这里的应用类型应该输入微信小程序，而且APPID也应该是微信公众号后台的开发者ID，相当于白名单。提交之后，也就能看到自己申请的Token信息。

 

 

开发流程

第一步，我们来获取经纬度信息

getGeo(e){ 
       wx.getLocation({
          success: geo => {
             console.log(geo);
          } 
}

 

我们可以从图中获取到，经纬度、速度等具体数据。不过我们现在只需要latitude与longitude这两个作为参数去获取城市信息。

 

第二步，获取城市信息

将从百度API这边得到的token赋给一个变量ak定义好。接着从【全球逆地理编码】-【服务文档】中，找到我们需要的接口http://api.map.baidu.com/geocoder/v2/

getGeo(){ 
      let ak='微信小程序的APPID';
      let url='百度提供的地理编码接口  ';
       wx.getLocation({
          type: 'wgs84',
          success: geo => {
             wx.request({
              url,
              data:{
                 ak,
                 output:'json',
                 location:`${geo.latitude},${geo.longitude}`
              },
              success:(res)=>{console.log(res)
                 if (res.data.status === 0) {
                  this.location = res.data.result.addressComponent.city
                } else {
                  this.location = '未知地点' 
                }
              }
             })
          }

在进行编码过程中，ak与url的获取是唯一且固定的；通过参考百度API的接口调用方式，可以对功能接口进行调用。

 

通过小程序的API -wx.chooseLocation与第三方地图API的结合，可以获取到当前的城市信息，包括位置名称、详细地址等。

 

另一方面，通过chooseLocation可以打开地图并选择周边的位置。

 

结语

通过对小程序地图API与百度地图API的掌握，可以很轻松地实现地图定位功能，结合这篇文章我们也可以拓展实现类似微信朋友圈的地理信息定位等功能。当然这里会遇到几个坑位：

1. 百度地图API创建应用时需要注意白名单的APPID，得与自己打开项目的注册APPID匹配；
2. 由于本地开发是会遇到跨域问题无法调用http://api.map.baidu.com/,因此我们需要在开发者工具上点击右上角的【详情】，将【不校验域名、…】这个栏目勾上，这样就能够进行API调用了。

推荐文章

想高效开发小程序，mpvue了解下（一）
想高效开发小程序，mpvue了解下（二）
用mpvue实现一个简单的demo
初探Mpvue的组件、样式机制
用mpvue实现一个简单的爬虫

---