最近在看微信小程序,遇到地理定位显示城市名称的问题。本文就是记录这一过程。

  • 解决方案                                                                                                                                              

    小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名(本文使用的是百度地图)。

  • 过程                                                                                                                                                     
  1. 代 码:

  1.1 代码详解:

  wx.getLocation(object):获取当前的地理位置、速度。注意:需要用户授权地理定位权限。

    详细参数说明请查看小程序API:https://developers.weixin.qq.com/miniprogram/dev/api/location.html#wxgetlocationobject

 让我们看看wx.getLocation()成功后获得到的数据:

  

 从获得到的数据我们可以看到并没有我们想要的地名,因此就需要我们把经纬度转换成相应的地名,本文使用的是百度地图相应功能转换出相应地名。

  1.2  百度地图的准备工作

    1.在使用百度地图API之前,首先要获得百度地图的密钥ak,ak由百度地图方生成;

    2.打开百度地图开放平台,导航栏处选择 “开发文档” > “微信小程序JavaScript API”,在“入门指南”处有详细介绍怎么生成密钥ak,本文不再介绍。

      参考文档:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

    3.复制生成好的ak,把ak粘贴到小程序中。其实,百度地图有提供小程序使用的地图api的压缩包,但是出于小程序发布时对大小的限制,我选择了使用链接。

      百度地图线上转换链接地址:https://api.map.baidu.com/geocoder/v2/?ak=获得的AK&location=' + latitude + ',' + longitude + '&output=json'

    4.使用小程序的账号登录微信公众平台(https://mp.weixin.qq.com/),在“设置” 中选择 “开发设置”,把百度地图api的url添加到request合法域名中。

     注意:百度地图提供的有关于小程序API的下载包,不想使用链接地址的可以使用下载包,出于小程序发布时对大小的限制,本文使用的是链接地址未使用下载包。

    

    

    5.此时准备工作完成,便可以直接在小程序中根据经纬度转换出相应的地名了,代码如下图。

        

    让我们看看success里的参数输出:

    获取的参数中肯定有一款适合你~~~

   OK,本文仅供参考,转载本文请注明出处,本文到这就结束了,谢谢。~~~

附完整代码:

  wxml中进行数据绑定。

微信小程序:获取地理定位和显示相应的城市名称。的更多相关文章

  1. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  2. (八)微信小程序---获取定位信息chooseLocation

    微信小程序---获取定位信息  chooseLocation wxml <view bindtap="getlocalPath">{{localPath}}</v ...

  3. 微信小程序-获取当前城市位置及再次授权地理位置

    微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...

  4. C# 微信小程序获取openid sessionkey

    项目介绍 1.微信小程序获取openid和session_key 2.后台使用C#开发 项目流程 准备工作 1 获取appid 1.1 下载微信web开发工具 https://developers.w ...

  5. 图解微信小程序---获取电影列表

    图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console  Log的方式获取我们电影的相关数据字段,后 ...

  6. 微信小程序-获取当前位置和城市名

    微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...

  7. 微信小程序获取地理位置授权

    微信小程序获取地理位置授权,首先需要在app.json中添加配置: "permission": { "scope.userLocation": { " ...

  8. 微信小程序-获取经纬度

    微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...

  9. 微信小程序获取Access_token和页面URL生成小程序码或二维码

    1.微信小程序获取Access_token: access_token具体时效看官方文档. using System; using System.Collections.Generic; using ...

随机推荐

  1. HDU - 4074 - Sum

    先上题目: Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  2. Atomic operations on the x86 processors

    On the Intel type of x86 processors including AMD, increasingly there are more CPU cores or processo ...

  3. CF D. Beautiful numbers (数位dp)

    http://codeforces.com/problemset/problem/55/D Beautiful Numbers : 这个数能整除它的全部位上非零整数.问[l,r]之间的Beautifu ...

  4. CSU 1506 Problem D: Double Shortest Paths(最小费用最大流)

    题意:2个人从1走到n,假设一条路第一次走则是价值di,假设第二次还走这条路则须要价值di+ai,要你输出2个人到达终点的最小价值! 太水了!一条边建2次就OK了.第一次价值为di,第二次为ai+di ...

  5. ASP.NET MVC2 Web项目中公用类库的问题

    ASP.NET WEB窗体 网站中,加入公用类文件的话,系统会很自动并殷勤的问你,说要不要把它存放在文件夹 App_Code 里.一旦加入,全站都可以很方便地加以使用,一点问题没有. 这种习以为常的方 ...

  6. 错误: su: 无法设置组: 不允许的操作

    到 /bin目录下,用ls -l 看下su文件的权限是不是rwxr-xr-x或者-rwxrwxrwx 执行这条命令chmod ug+s su

  7. linux for LVM 创建笔记

    LVM: 1.创建pv(物理卷) [root@localhost dev]# pvcreate /dev/sdd /dev/sde /dev/sdf Writing physical volume d ...

  8. Linux下用ImageMagick玩图像魔术【转】

    本文转载自:http://www.linuxdiyf.com/linux/11680.html 不管你知不知道,现在是一个用ImageMagick的好机会,至少,如果你是一个Linux用户的话.这是一 ...

  9. Linux - xshell 链接CentOS 设置高亮

    默认是黑白的! 用了vim 指令还是黑白的. 两种途径设置,一种是通过Alt+P. 一种是选择配色方案来设置.

  10. 国内物联网平台初探(八):中移物联网开放平台OneNet

    平台定位 OneNET是中移物联网有限公司搭建的开放.共赢设备云平台,为各种跨平台物联网应用.行业解决方案,提供简便的云端接入.存储.计算和展现,快速打造物联网产品应用,降低开发成本. IoT Paa ...