出了趟差，回来的机票路过南京禄口机场转机，结果遇到疫情，被隔离了。刚好趁这个机会把最近搞的一个小项目记录一下，用到微信小程序需要获取当前用户位置的省市区等信息，虽然只有几行代码，但当时查阅了很多大佬的资料，搞了一天才搞好，在此记录一下，以方便以后查看

要查看位置信息首先需要获取到经纬度信息，为此先查了微信小程序的获取位置信息接口：

wx.getLocation(Object object)

以 Promise 风格调用：支持

用户授权：需要 scope.userLocation

小程序插件：支持，需要小程序基础库版本不低于 1.9.6

获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。高频率调用会导致耗电，如有需要可使用持续定位接口 wx.onLocationChange。基础库 2.17.0 版本起 wx.getLocation 增加调用频率限制，相关公告。

参数

Object object

属性	类型	默认值	必填	说明	最低版本
type	string	wgs84	否	wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
altitude	string	false	否	传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度	1.6.0
isHighAccuracy	boolean	false	否	开启高精度定位	2.9.0
highAccuracyExpireTime	number		否	高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果	2.9.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明	最低版本
latitude	number	纬度，范围为 -90~90，负数表示南纬
longitude	number	经度，范围为 -180~180，负数表示西经
speed	number	速度，单位 m/s
accuracy	number	位置的精确度
altitude	number	高度，单位 m	1.2.0
verticalAccuracy	number	垂直精度，单位 m（Android 无法获取，返回 0）	1.2.0
horizontalAccuracy	number	水平精度，单位 m	1.2.0

示例代码

wx.getLocation({type: 'wgs84',success (res) {const latitude = res.latitudeconst longitude = res.longitudeconst speed = res.speedconst accuracy = res.accuracy}
})

注意

2.17.0 起wx.getLocation` 增加调用频率限制，相关公告
工具中定位模拟使用IP定位，可能会有一定误差。且工具目前仅支持 gcj02 坐标。
使用第三方服务进行逆地址解析时，请确认第三方服务默认的坐标系，正确进行坐标转换

取得位置信息是坐标信息，根据坐标信息去地图接口查询相关行政区划。

因为需要用到QQ地图的API，需要首先完成下面3个步骤：

1. 申请成为开发者获取密钥（key）：申请密钥

2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0

下载完成后解压到工程的utils文件夹下，目录结构如下：

3. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

由于获取位置信息需要得到用户授权，需要在app.json中添加如下代码：

    "permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}},

index.wxml

<view ><view ><text>当前位置：</text>    <text >[{{latitude}}] [{{longitude}}]</text></view><view ><text>所在城市：</text><text >{{province}} {{city}}</text></view>
</view>

index.js

const app = getApp();
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');//引入SDK文件
var qqmapsdk;
Page({data: {province: '',city: '',latitude: '',longitude: ''},onLoad: function () {qqmapsdk = new QQMapWX({key: 'VAFBZ-*****-FQKIH-QSULU-*****-LTBQT' //换成你自己申请的key秘钥});},onShow: function () {let vm = this;vm.getUserLocation();},getUserLocation: function () {let vm = this;wx.getSetting({success: (res) => {console.log(JSON.stringify(res))if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {//如果没有授权就提示需要授权wx.showModal({title: '请求授权当前位置',content: '需要获取您的地理位置，请确认授权',success: function (res) {if (res.cancel) {wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})//再次授权，调用wx.getLocation的APIvm.getLocation();} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//调用wx.getLocation的APIvm.getLocation();}else {//调用wx.getLocation的APIvm.getLocation();}}})},// 微信获得经纬度getLocation: function () {let vm = this;wx.getLocation({type: 'wgs84',success: function (res) {console.log(JSON.stringify(res))var latitude = res.latitudevar longitude = res.longitudevar speed = res.speedvar accuracy = res.accuracy;vm.getLocal(latitude, longitude)},fail: function (res) {console.log('fail' + JSON.stringify(res))}})},// 获取当前地理位置getLocal: function (latitude, longitude) {let vm = this;qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {// console.log(JSON.stringify(res));let province = res.result.ad_info.provincelet city = res.result.ad_info.cityvm.setData({province: province,city: city,latitude: latitude,longitude: longitude})},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});}
})

微信小程序获取当前位置的省、市、区等信息相关推荐

微信小程序获取当前位置和城市名
这篇文章主要介绍了微信小程序获取当前位置和城市名的思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下目录一.授权并获取经纬度腾讯地图API **简介** Hello world! 一. ...
微信小程序-获取用户位置（经纬度+所在城市）
微信小程序-获取用户位置(经纬度+所在城市) 文章目录微信小程序-获取用户位置(经纬度+所在城市) 一.目标二.实现思路三.实现步骤 3.1 用到的接口函数 3.2 具体步骤 3.2.1 创建界 ...
微信小程序获取当前位置及地图选点功能
标题小程序获取当前位置----逆地址解析----地图选点实现功能:小程序首页定位当前城市类似于某宝: 某团: 获取当前位置: 在小程序首页创建getLocation函数并在onLoad调用首先需 ...
uniapp微信小程序获取当前位置信息、经纬度转换、导航地图实现
1.调用接口,官网文档是这样写的 uni.getLocation({type: 'wgs84',success: function (res) {console.log('当前位置的经度:' + re ...
微信小程序获取用户位置信息并显示到地图上
1.配置地理位置用途说明在app.json中的大括号内输入 "permission": {"scope.userLocation": {"desc& ...
微信小程序获取用户位置信息
1.在 app.json 里面增加 permission 属性配置小程序配置 | 微信开放文档 "permission": {"scope.userLocation&qu ...
微信小程序获取当前位置并根据经纬度跳转地图导航
方式一 <view><map id="map" longitude="{{longitude}}" latitude="{{lati ...
微信小程序—获取用户位置信息
一.使用 wx.getLocation 获取经纬度信息 1.1 在 app.json 中加入如下配置 "permission": {"scope.userLocation ...
微信小程序自带地图_微信小程序获取当前位置并调用微信内置地图打开
图示: index.wxml 定位 index.js //index.js //获取应用实例 const app = getApp() Page({ data: { }, map:function() ...

微信小程序获取当前位置的省、市、区等信息

wx.getLocation(Object object)

参数

Object object

示例代码

注意

微信小程序获取当前位置的省、市、区等信息相关推荐

最新文章

热门文章