700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 小程序 获取当前所在地理位置 城市 信息

小程序 获取当前所在地理位置 城市 信息

时间:2021-01-07 00:34:05

相关推荐

小程序 获取当前所在地理位置 城市 信息

需求:在小程序首页需要显示用户所在城市

解决方案:使用wx.getLocation获取经纬度坐标,再使用微信小程序JavaScript SDK的地址逆解析方法reverseGeocoder,就可以完美搞定。

微信小程序JavaScript SDK官方地址 /qqmap_wx_jssdk/index.html

我的实现:

1、首先申请腾讯地图密钥key,特别要注意域名白名单的填写。

2、安装qqmap-wx-jssdk

大家可以从官网直接下载使用,我是使用npm包的方式安装

yarn add qqmap-wx-jssdk

3、核心代码

const QQMapWX = require('qqmap-wx-jssdk');export default {data() {return {qqmapsdk: null,}},methods:{// 获取当前位置经纬度async getCurrentPosition() {const self = this// 获取经纬度const {latitude, longitude } = await new Promise((resolve, reject) => {wx.getLocation({type: 'gcj02',success(res) {resolve(res)}})})// 获取地址信息this.qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {const {result } = resconst {address } = result// 打印看看吧console.log(result);},fail: function (res) {console.log(res)}})}},onLoad() {this.qqmapsdk = new QQMapWX({key: 'PW2BZ-3WDWD-4X44T-PDRF2-D6Z3Q-I4FA5' })this.getCurrentPosition()}}

4、最后记得,要配置一下合法域名

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。