效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置:

具体步骤:

1. 使用微信jssdk提供的getLocation API拿到经纬度;

2. 调用高德地图的api使用经纬度去换取地址的文字描述。


wx.ready(() => { wx.getLocation({ type: "gcj02", success: function(res) { var location = "&location=" + res.longitude + "," + res.latitude; ReservationService.getGeocode(location).then(response => { if ( response.data.status === "1" && response.data.info === "OK" ) { self.country = response.data.regeocode.addressComponent.country; self.city = response.data.regeocode.addressComponent.city; var express = "/" + self.country + "|" + response.data.regeocode.addressComponent.province + "|" + self.city + "|" + response.data.regeocode.addressComponent.district + "|" + response.data.regeocode.addressComponent.township + "/g"; self.address = response.data.regeocode.formatted_address.replace( eval(express), "" ); } else { // get location error, plz input address alert("无法获取地址信息,请稍后再试"); } }); } });

ReservationService.getGeocode的实现:

getGeocode(location) {

const key = '此处填入您高德地图app的key';

return axios.post('https://restapi.amap.com/v3/geocode/regeo?key=' + key + location);

}

看下面一个使用高德地图API将经纬度转换成文字描述的地址的例子,使用postman发送请求:

API响应:


{ "status": "1", "regeocode": { "addressComponent": { "city": [], "province": "北京市", "adcode": "110101", "district": "东城区", "towncode": "110101001000", "streetNumber": { "number": "44号", "location": "116.39795,39.9097239", "direction": "东北", "distance": "117.874", "street": "广场东侧路" }, "country": "中国", "township": "东华门街道", "businessAreas": [ { "location": "116.3998109423077,39.90717459615385", "name": "天安门", "id": "110101" }, { "location": "116.39981058278138,39.92383706953642", "name": "景山", "id": "110101" }, { "location": "116.4118112683418,39.91461494422115", "name": "王府井", "id": "110101" } ], "building": { "name": "天安门", "type": "风景名胜;风景名胜相关;旅游景点" }, "neighborhood": { "name": [], "type": [] }, "citycode": "010" }, "formatted_address": "北京市东城区东华门街道天安门" }, "info": "OK", "infocode": "10000" }

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

在微信小程序里自动获得当前手机所在的经纬度并转换成地址的更多相关文章

  1. 微信小程序里使用 Redux 状态管理

    微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...

  2. 微信小程序里如何用阿里云上传视频,图片。。

    纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...

  3. 在微信小程序里使用 watch 和 computed

    在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData(),那么如何给小 ...

  4. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  5. 微信小程序里碰到的坑和小知识

    本文作者:dongtao   来自:授权地址 本人低级程序员,以下bug不能确保在其它地方可以以相同的原因复现.同时, 出现很多bug的原因是小程序的基本知识还有编码的基本功不到位造成 路还很长,共勉 ...

  6. 微信小程序里的bug---video 的play()

    微信小程序hidden转换后执行play()用真机测试不会播放.在调试器里可以. 解决方法,把hidden换成wx:if. 我刚开始以为网速问题,其实不是, 具体我也不知道为什,换上wxif解决了.

  7. 微信小程序里使用阿里巴巴矢量图标

    登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ...

  8. 记录微信小程序里自带 时间格式 工具

    微信小程序里面自己给了一个时间工具,是用来记录log日志,感觉可以记录下来,所以拿来自己用,以此记录: 直接传入 日期对象 进入 formatTime //得到下面格式的时间格式2017/07/22 ...

  9. 微信小程序里多出来的奇怪宽度

    最近在看微信小程序相关的东西,写页面的时候,因为一直以Iphone6作为标准调试(微信官方建议以Iphone6调试),下面以实际的案例讲解以rpx会引发的问题 wxml: <view class ...

随机推荐

  1. Educational Codeforces Round 7 B

    Description You are given the current time in 24-hour format hh:mm. Find and print the time after a  ...

  2. JS匿名函数以及arguments.callee的调用

    var res = (function (n) {    if( n>1 ) {        return n + arguments.callee( n-1 );    } else {   ...

  3. linux虚拟机管理

    1.虚拟机管理命令virsh-manager        ##开启虚拟机管理器 virsh list          ##显示正在运行的虚拟机virsh list  --all     ##查看所 ...

  4. dynamic:动态类型简单用法,写法

    class 动态创建数据 { //动态类型:本质感觉跟object的用法差不多,只是在执行的时候才知道数据类型 public dynamic Dynamic() { //定义一个动态类型,作为返回值 ...

  5. python 矢量化的字符串

  6. [一点一滴.NET]前台线程和后台线程

    前台线程和后台线程就是通过线程实例的属性IsBackground=true or false来区分的. 新建一个线程是默认是后台线程. 前台线程全部执行完之后,才退出进程. 进程退出,所有的后台线程全 ...

  7. Clouder Manager安装时出现please remove the following file: /etc/cloudera-scm-server/db.properties问题解决(图文详解)

    问题详情 bigdata@ubuntucmbigdata1:/opt/softwares/cm-$ sudo ./cloudera-manager-installer.bin This install ...

  8. CSS选择器笔记,element element和element > element 的区别

    看官方解释 element element  例子: div p 官方解释:div内部所有的p元素 就是说 只要p在div内部.如果 p在span内部,span在div内部,p也算在div内部 < ...

  9. 基础7 面向对象进阶与socket编程

    1.静态方法(用得少)(解除某个函数跟类的关联,加了静态方法后,类便不能将类的参数传给静态方法函数了) class Dog(object): def __init__(self,name): @sta ...

  10. CentOS7 安装oracle 客户端

    参考 http://www.oracle.com/technetwork/topics/linuxx86-64soft-092277.html   下载 oracle-instantclient11. ...