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

具体步骤:

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. Observable Flowable Test

    package com.test.rxjava; import java.time.Duration; import java.time.Instant; import java.util.Linke ...

  2. JS电话、手机号码验证

    function isTelephone(inpurStr) {            var partten = /^0(([1,2]\d)|([3-9]\d{2}))-\d{7,8}$/;     ...

  3. day 007 深浅拷贝

    今日内容: 1.字符串操作补充: join # 遍历列表 例: lst = ['汪峰','吴君如','章子怡'] s = '*-/@'.join(lst) prints(s) 结果为汪峰*-/@吴君如 ...

  4. 生成jvm快照文件

    原文:https://blog.csdn.net/jijianshuai/article/details/79128033  -Xmx20m -Xms5m -XX:HeapDumpOnOutofMem ...

  5. python3.7安装Scrapy

    环境:windows 7. 安装过程中遇到的问题 1.error: Unable to find vcvarsall.bat 2.1083: Cannot open include file: 'ba ...

  6. 用LaTeX画树形结构

    用LaTeX画树形结构,比如:文件目录树形图,程序中函数调用关系图等. 找到的一个不错的资源: http://www.texample.net/tikz/examples/feature/trees/ ...

  7. Tree UVA - 548(二叉树递归遍历)

    题目链接:https://vjudge.net/problem/UVA-548 题目大意:给一颗点带权(权值各不相同,都是小于10000的正整数)的二叉树的中序遍历和后序遍历,找一个叶子结点使得它到根 ...

  8. javascript 例外处理Try{}catch(e){}

    程序开发中,编程人员经常要面对的是如何编写代码来响应错误事件的发生,即例外处理(exception handlers).如果例外处理代码设计得周全,那么最终呈现给用户的就将是一个友好的界面.否则,就会 ...

  9. Django重新整理3

    Forms组件 1.在models.py中我们建立一个新的表关系: class UserInfo(models.Model): user=models.CharField(max_length=32) ...

  10. 转:POST 400 Bad Request The request sent by the client was syntactically incorrect

    最近在做Web开发的时候,使用$.post提交数据,但是回调函数却没有被触发,按F12看控制台输出是:POST *** 400 Bad Request 后台是SpringMVC的,设置了断点也不会被触 ...