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

序言

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏区块链

密码管理的最佳实践

通密之所以不应该被过分指责,是因为有其存在的道理,没有哪种方案的管理成本比它更低,它不需要购买昂贵的1password,不需要担心临时用的时候突然想不起来,而且...

2357
来自专栏编程

我是如何用Python获取整个学校女生电话和QQ?技术撩妹

前言: 这个没什么技术难度,懂爬虫的人和程序员都可以用学的语言写出来 只是很多安全问题的存在,的确影响着我们的生活, 希望大家可以认识到一些网站的后台密码的规则...

2797
来自专栏pangguoming

unity htc vive使用

本文介绍如何在Unity中使用HTC vive设备,当前VR作为市场比较火热的热点,HTC VIVE设备作为三大供应商之一,许多人购买了该设备,却不知道如何使用...

3746
来自专栏智能计算时代

「大数据系列」Apache NIFI:大数据处理和分发系统

简单地说,NiFi就是为了实现系统间数据流的自动化而构建的。虽然术语“数据流”用于各种上下文,但我们在此处使用它来表示系统之间的自动和管理信息流。这个问题空间一...

2723
来自专栏Ceph对象存储方案

对象存储服务-构架设计

对象存储服务构架设计 基本构架组成 ? 1.网关服务(Gateway): 客户端发送请求(Request)到网关服务(Gateway)再由网关服务实现将客户端请...

6034
来自专栏哲学驱动设计

OEA框架 2.9 Pre-Alpha 源码公布

    OEA框架 从 2009 年发布“第一个版本”之后,历时三年,现在终于又公开向大家开放最新的源代码。三年来,许多朋友都关心 OEA 是否还在开发,是否还...

2067
来自专栏小白课代表

小白课代表的使用说明(必读)

2242
来自专栏Python中文社区

Amas:基于大数据平台技术开发的统一监控平台

目前Amas的代码已经通过DockerHub实现自动构建,推荐使用docker来快速体验:

2573
来自专栏腾讯DevOps

Git Code Review设置与使用

自从转到git上之后,已经一年多没有code review了(哈哈,捂住无辜的小脸)。但是坦白来说,code review绝对是利大于弊的。不仅可以让自己把控代...

1K4
来自专栏Albert陈凯

2018-11-23 一个公司的图数据的选型

因为我之前都要使用博客记录的习惯 所以下面很多链接都链接向我自己写的博客上的 所以导致下面看起来内容不多 其实下面内容还是有的

2874

扫码关注云+社区

领取腾讯云代金券