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

具体步骤:

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. 通过JS,按照原比例控制图片尺寸

    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con ...

  2. 技巧:开启ubuntu系统桌面上的右键进入terminal命令行控制台功能

    $ sudo apt-get install nautilus-open-terminal 执行上述命令,重启. 重启命令: $ sudo reboot 注意:需要联网

  3. Reactive Extensions入门

    https://www.cnblogs.com/yangecnu/archive/2012/11/03/Introducting_ReactiveExtensions.html 前面我写过7篇文章粗略 ...

  4. requirej入门(二)

    requirejs中的一些基本知识,包括API使用方式等. 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs, ...

  5. requirej入门(一)

    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...

  6. Django-2 路由层

    U RL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 2.1 简单的路由配置 from django.urls import p ...

  7. android studio NDK配置

    向您的项目添加 C 和 C++ 代码 本文内容 下载 NDK 和构建工具 创建支持 C/C++ 的新项目 构建和运行示例应用 向现有项目添加 C/C++ 代码 创建新的原生源文件 创建 CMake 构 ...

  8. django中的Ajax文件上传

    主要介绍两个 1.ajax文件上传 2.写路由器 3.创建对应的函数 4.file_put.html代码 <!DOCTYPE html> <html lang="en&qu ...

  9. Murano Weekly Meeting 2016.08.02

    Meeting time: 2016.August.02 1:00~2:00 Chairperson:  Valerii Kovalchuk, from Mirantis Meeting summar ...

  10. LeetCode 222.完全二叉树的节点个数(C++)

    给出一个完全二叉树,求出该树的节点个数. 说明: 完全二叉树的定义如下:在完全二叉树中,除了最底层节点可能没填满外,其余每层节点数都达到最大值,并且最下面一层的节点都集中在该层最左边的若干位置.若最底 ...