微信小程序-获取用户位置（经纬度+所在城市）
文章目录
微信小程序-获取用户位置（经纬度+所在城市）一、目标二、实现思路三、实现步骤3.1 用到的接口函数3.2 具体步骤3.2.1 创建界面3.2.2 获取用户位置的经纬度3.2.2.1 在app.json文件中配置permission3.2.2.2 调用wx.getLocation接口3.2.3 获取用户的所在城市3.2.3.1 小程序之外的配置3.2.3.2 调用reverseGeocoder接口参考一、目标
获取用户所在的城市
二、实现思路
1.利用微信小程序的接口函数获取用户位置的经纬度
2.将经纬度逆解析为结构化的文字地址
3.根据结构化的文字地址提取出需要的地址结构成分，如省份、城市、区县等。
三、实现步骤
3.1 用到的接口函数
微信小程序-获取用户位置的接口函数：wx.getLocation(Object object)
还需要用到小程序配置：permission
腾讯位置服务-逆地址解析（坐标位置描述）接口函数：reverseGeocoder(options:Object)
3.2 具体步骤
3.2.1 创建界面
wxml文件
<view class="view1">点击获取用户位置</view><view class="view2">用户所在位置的经度：{{latitude}}</view><view class="view2">用户所在位置的纬度：{{longitude}}</view><view class="view2">用户所在城市：{{city}}</view>
wxss文件
.view1 {background-color: yellow;width: 100%;height: 200rpx;margin-bottom: 20rpx;}.view2 {background-color: yellow;width: 100%;height: 100rpx;margin-bottom: 20rpx;}
js文件
// index.js// 获取应用实例const app = getApp()Page({data: {latitude: null,longitude: null,city: null},onLoad() {},})
界面效果
3.2.2 获取用户位置的经纬度
编写触发用户位置经纬度获取的函数getLocation，在函数中调用wx.getLocation接口，获取到经度、纬度等信息，然后绑定到前端界面。
3.2.2.1 在app.json文件中配置permission
在用户首次使用这一功能时，小程序询问用户是否授权获取用户的位置信息。之后不再询问。（清除开发者工具的缓存、重新编译小程序后会重新询问，因为之前用户的授权信息已经被清除了）
app.json文件
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json",//新增下面的代码（上面的代码是创建小程序项目后就已经有的）"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}}
3.2.2.2 调用wx.getLocation接口
wxml文件
//新增bindtap这个函数，使得用户点击这个view时就能触发获取用户位置的功能<view class="view1" bindtap="getLocation">点击获取用户位置</view>
js文件
// index.js// 获取应用实例const app = getApp()Page({data: {latitude: null,longitude: null,city: null},onLoad() {},// 新增下面这部分代码getLocation() {var that = this;wx.getLocation({type: 'wgs84',success (res) {const latitude = res.latitudeconst longitude = res.longitudeconst speed = res.speedconst accuracy = res.accuracyconsole.log(res) //将获取到的经纬度信息输出到控制台以便检查that.setData({//将获取到的经度、纬度数值分别赋值给本地变量latitude: res.latitude,longitude: res.longitude})}})}})
效果
3.2.3 获取用户的所在城市
3.2.3.1 小程序之外的配置
在腾讯位置服务申请一个key
按照腾讯位置服务-微信小程序Javascript开发指南中的【入门及使用限制】中的说明，完成下列步骤。
下载小程序JavaScriptSDK
在腾讯位置服务的网站上下载即可（二选一，我下载的是v1.2），保存到微信小程序项目目录下。
将下载的压缩包解压到当前文件夹。
安全域名设置
登录微信小程序公众平台，使用这个小程序的appid（或者自己微信账号的测试号）登录，在“服务器域名”配置request合法域名：https://apis.。
3.2.3.2 调用reverseGeocoder接口
js文件
// index.js// 获取应用实例const app = getApp()//新增// 引入SDK核心类，根据自己放的路径来写这个SDK核心类的位置var QQMapWX = require('../../qqmap-wx-jssdk.js');//新增// 实例化API核心类var qqmapsdk = new QQMapWX({key: '……' // 必填，填自己在腾讯位置服务申请的key});Page({data: {latitude: null,longitude: null,city: null},onLoad() {},getLocation() {var that = this;wx.getLocation({type: 'wgs84',success (res) {const latitude = res.latitudeconst longitude = res.longitudeconst speed = res.speedconst accuracy = res.accuracyconsole.log(res)that.setData({latitude: res.latitude,longitude: res.longitude})//新增qqmapsdk.reverseGeocoder({//位置坐标，默认获取当前位置，非必须参数 //Object格式location: {latitude: res.latitude,longitude: res.longitude},success: function(res) {//成功后的回调console.log(res.result.ad_info.city);that.setData({city: res.result.ad_info.city})},fail: function(error) {console.error(error);},complete: function(res) {console.log(res);}})}})}})
效果
参考
微信小程序获取当前位置和城市名
