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

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

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

微信小程序JavaScript SDK官方地址 https://lbs.qq.com/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、最后记得，要配置一下合法域名。

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

微信小程序获取当前所在城市（地区定位与切换）
小程序地区定位与切换添加链接描述添加链接描述添加链接描述 <text class="chengshi">{{citynames}}</text>< ...
微信小程序获取当前位置和城市名
这篇文章主要介绍了微信小程序获取当前位置和城市名的思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下目录一.授权并获取经纬度腾讯地图API **简介** Hello world! 一. ...
（详细版）java实现小程序获取微信登录，用户信息，手机号，头像
ps:springboot结合mybatisPlus.mysql实现,简单易懂,一件粘贴使用,详细往下看↓ 步骤: 1.注册微信开发平台账号,并创建小程序,获取小程序的AppID和AppSecret. ...
小程序获取城市经纬度_微信小程序获取当前所在城市的方法
现在很多企业商家为了提供更准确的服务,基本都要获取用户当前所在的地理位置,城市是其中最基本的.而微信小程序官方提供的API只能获取当前地理位置的经纬度,需要经过第三方转换才可以得到我所需的城市名,经过 ...
小程序获取用户所在城市完整代码
小程序目录结构插入提示: 1. 申请开发者密钥(key): 申请密钥 2. 下载微信小程序JavaScriptSDK,下载地址下载完成后放入utils文件夹下引用即可 3. 安 ...
小程序获取用户所在城市完整代码详解（附源码）
小程序目录结构插入提示: 1. 申请开发者密钥(key): 申请密钥 2. 下载微信小程序JavaScriptSDK,下载地址下载完成后放入utils文件夹下引用即可 3. 安 ...
[微信小程序]获取用户当前的城市
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: // 获取用户当前位置的名称和城市 util.jsfu ...
小程序获取不到微信用户信息
在2022年19月28日用户信息进行了调整导致获取不到用户的头像和昵称可以登录小程序管理后台,进入「设置 - 基本设置 - 基础库最低版本设置」进行配置. 根据使用的接口来配置版本即可.
支付宝小程序定位用户所在的城市
使用小程序自带的api my.getLocation 如果你用的模拟器的话提起需要定义一个位置 my.getLocation({type:1, // 传入type 没有type 或者type=0的 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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