小程序不能定位城市怎么办？

港控/mmm° 2021-07-31 11:57 487阅读 0赞

#### 序言 ####

> 今天给大家分享下小程序如何获取用户的城市定位。基本每个生活服务的应用都有这种类似场景，通过用户的当前位置，就可以实现周边的路线、美食等场景，典型的例子有高德地图中的导航、饿了么的定位等。那小程序怎么实现获取用户的城市定位呢，这就得看看如何运用百度`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`服务】-【地理解码】，可以实现通过经纬度返回城市信息；也可以通过城市信息返回经纬度。

![640?wx\_fmt=png][640_wx_fmt_png]

##### 2.申请token #####

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

![640?wx\_fmt=png][640_wx_fmt_png 1]

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

![640?wx\_fmt=png][640_wx_fmt_png 2]

#### 开发流程 ####

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

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

![640?wx\_fmt=png][640_wx_fmt_png 3]

我们可以从图中获取到，经纬度、速度等具体数据。不过我们现在只需要`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`的接口调用方式，可以对功能接口进行调用。

![640?wx\_fmt=png][640_wx_fmt_png 4]

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

![640?wx\_fmt=png][640_wx_fmt_png 5]

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

#### 结语 ####

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

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

如何置顶、标星公众号？

![640?][640]

![640][640 1]

文章首发于才华与信仰 ，有兴趣的可以点击下方链接关注他哦 。

[640_wx_fmt_png]: /images/20210731/f2b830731f8f471cbc21fb6332fc26db.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210731/857b4854b7034c1a85e0ad7ff09591ff.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210731/0b751fd3d3f94cfeaf30db1d155f807e.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210731/f85050db0c274a7a9dc1ba8df12aa950.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210731/cb50bcea32904bf68c80501dad9da35a.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210731/aeee8d1761a64d939eab67872601a21e.png?wx_fmt=png
[640]: /images/20210731/b314ce1b75fd446caabf42fe2349a0cf.png?
[640 1]: /images/20210731/18ac5f1501bc41fca2ddf84e7f94ad8b.png