专栏首页Web项目聚集地小程序不能定位城市怎么办?

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

序言

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

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

第二步,获取城市信息

将从百度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 = '未知地点' 
                }
              }
             })
          }

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

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

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

结语

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

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

本文分享自微信公众号 - Web项目聚集地(web_resource)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java程序员转型大数据可靠吗?附资源

    如今大数据发展的越来越成熟。各大企业纷纷成立大数据部门。尤其BAT等一线互联网公司每天处理的数据量都是TB级别。大数据部门已成为这些企业的核心部门,数据已成为企...

    用户1093975
  • 为什么一定要前后端分离?

    孤独烟,中国平安研发工程师,目前负责云平台架构设计以及需求研发工作。毕业后一直从事Java开发工作,在Web开发、架构设计上有多年的实战经验。在MySQL性能优...

    用户1093975
  • IDEA入门级教程(文末常用快捷键)

    IDEA相对于eclipse来说最大的优点就是它比eclipse聪明。聪明到什么程度呢?我们先来看几个简单的例子。

    用户1093975
  • 频繁与交通部门合作,百度地图正深挖大数据金矿

    昨天,百度地图与成都交警、成都交投签署合作协议,建立战略合作伙伴关系,成都交警将向百度开放公共交通大数据,让百度地图给用户提供更加便利的地图服务,如实时路况;而...

    罗超频道
  • 这个2000人团队做的业务不赚钱,却是李彦宏的战略部队

    这几天去三亚参加百度地图的采集训练营,详细了解了地图数据采集作业流程,感触颇深。地图给我们的生活带来很大的便捷,看上去很简单的App背后却有庞大的团队在支持。数...

    罗超频道
  • 阿里面试:Mybatis中方法和SQL是怎么关联起来的呢?

    已经分享了三篇Mybatis源码分析文章,从 Mybatis的配置文件解析 到 获取SqlSession,再到 获取UserMapper接口的代理对象。

    田维常
  • 一个完整的机器学习项目在Python中的演练(一)

    磐创AI
  • 减少该死的 if else 嵌套

    我并没夸大其词,我是真的遇到过了!嵌套6、7层,一个函数几百行,简!直!看!死!人!

    程序猿DD
  • 百度闪电算法的功能及解读

    在10月初的时候,百度上线了“闪电算法”,见字知意,闪电算法只针对一个参数那就是网站访问速度。更细化一点的是百度本次提出的是针对移动端的访问速度。

    世纪访客
  • 概念理解:通俗的“过拟合与欠拟合”直观解释

    【导读】前几天,应用数据科学研究者William Koehrsen发布一篇关于“过度拟合和拟合不足”的博文,作者解释了在模型训练中过拟合与欠拟合的概念与原因,并...

    WZEARW

扫码关注云+社区

领取腾讯云代金券