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

具体步骤:

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. LeeCode(No2 - Add Two Numbers)

    LeeCode是一个有意思的编程网站,主要考察程序员的算法 第二题: You are given two non-empty linked lists representing two non-neg ...

  2. 阿里Java开发规约(2)

    本文是对阿里插件中规约的详细解释二,关于插件使用,请参考这里 及时清理不再使用的代码段或配置信息. 说明:对于垃圾代码或过时配置,坚决清理干净,避免程序过度臃肿,代码冗余 Positive examp ...

  3. 几种经过整理的文件上传压缩和前台js压缩的方法

    /** * 图片压缩上传 * @param $im,图片资源 * @param int $maxwidth,最大宽度,超过这个宽度则进行压缩 * @param int $maxheight,最大高度, ...

  4. Vue.js-----轻量高效的MVVM框架(七、表单控件绑定)

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. TestNG的testng.xml配置概述

    TestNG提供的annotaions用来辅助定义测试类. TestNG的testng.xml配置文件用来辅助定义执行什么样的测试,即testng.xml更像是一个测试规划. testng.xml配置 ...

  6. sort命令和对中文的处理

    使用示例:sort -k1,1nr xxxfile 需要指定起始列和结束列,否则可能排序错误   sort命令应用于中文时需要在sort前设置环境变量(以兼容C语言的标准): LC_COLLATE=C ...

  7. Murano Weekly Meeting 2015.08.25

    Meeting time: 2015.August.25th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting summ ...

  8. Kure讲HTML_如何学习HTML

    HTML即是超文本标记语言,它主要是用来构建网页的轮廓的.HTML自身包含了众多的API(应用程序接口:即HTML暴露给Web前端开发者的语言特性,当然作为开发者就应该更多的关注这个.)话不多说,直接 ...

  9. 《nginx 五》nginx实现动静分离

    Nginx+Tomcat动静分离 动态页面与静态页面区别 静态资源: 当用户多次访问这个资源,资源的源代码永远不会改变的资源. 动态资源:当用户多次访问这个资源,资源的源代码可能会发送改变. 什么是动 ...

  10. grunt项目构建

    最近想把项目里添加grunt,说白了就是前端自动化管理,具体配置如下: 用到以下几个部件: grunt-contrib-cssmin grunt-contrib-uglify grunt-contri ...