uni-app开发微信小程使用腾讯位置服务获取用户的位置信息

一、开通腾讯位置服务
二、编码实现
- (一）获取定位坐标
- (二)、在项目中使用

一、开通腾讯位置服务

在这里我们先要登录腾讯我i之服务的官网开通位置服务腾讯位置服务官网

点击进入控制台，创建应用并创建key，并将填写微信小程序ID

进入微信公众平台将请求域名设为合法域名

下载微信小程序 JavaScript SDK 并在项目中创建lib目录，将SDK文件放入该目录

二、编码实现

(一）获取定位坐标

微信小程序提供定位接口，我们只需要调用方法即可。uni-app框架的uni对象里面也封装了定位的方法
1.uni.getLocation(Object)
Object参数说明

参数名	类型	必填	说明	平台差异说明
type	String	否	默认为wgs84返回gps坐标
altitude	Boolean	否	传入true会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度	App和字节跳动
geocode	Boolean	否	默认false，是否解析地址信息	仅App平台支持
success	Function	是	接口调用成功的回调函授，返回内容详见参数返回说明
fail	Function	否	接口调用失败的回调函数，返回内容详见返回参数
complete	Function	否	接口调用结束的回调函数（调用成功，失败都会执行）

success返回参数说明

参数	说明
latitude	纬度，浮点数，范围为-90-90,负数表示南纬
longitude	经度，浮点数，范围为-180-180，负数表示西经
speed	速度，浮点数，单位m/s
accutracy	位置的精确度
altitude	高度，单位m
verticalAccuracy	垂直精度，单位 m(Android无法获取，返回 0)
horizontalAccuracy	水平精度，单位m
address	地址信息(仅App端支持，需配置geocode为true)

address地址信息说明

属性	类型	描述
country	String	国家
province	String	省份名称
city	String	城市名称
district	String	区(县)名称
street	String	街道信息
streetNum	String	街道门牌号
poiName	String	POI信息
postalCode	String	邮政编码
cityCode	String	城市代码

示例：

uni.getLocation({type: 'wgs84',success: function (res) {console.log('当前位置的经度：' + res.longitude);console.log('当前位置的纬度：' + res.latitude);}
});

(二)、在项目中使用

1. 先要开启位置权限，我使用的HBuilder X 2.9.8版本
如不开启就获取不到经纬度

2. 首先要获取用户签到时的地理位置(经度、纬度)

uni.showLoading({title: '签到中请稍后'
});setTimeout(function() {uni.hideLoading();
}, 30000);//获取地理定位
uni.getLocation({type: 'wgs84',success: function(resp) {let latitude = resp.latitude; let longitude = resp.longitude;}
})

3. 根据定位坐标，换算成真实的地址，先引用腾讯位置的SDK文件

var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
var qqmapsdk;

4.使用onLoad生命周期函数，对qqmapsdk对象进行初始化

onLoad: function() {qqmapsdk = new QQMapWX({key: '这里填写你生成的key'});
},

如下图：

请求接口进行置换

qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function(resp) {// console.log(resp.result);let address = resp.result.address;let addressComponent = resp.result.address_component;let nation = addressComponent.nation;let province = addressComponent.province;let city = addressComponent.city;let district = addressComponent.district;}
})

uni-app开发微信小程使用腾讯位置服务获取用户的位置信息相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
微信小程序结合腾讯位置服务获取用户所在城市信息
背景实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
微信小程序接入腾讯地图sdk地图用户自选位置。踩坑+代码实现
采坑记录: 1.微信小程序对腾讯地图的支持好.拓展强,不建议使用其他地图 2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系 3.使用微信小程序的内置方法的经纬度存在偏差.解决方案看下文 ...
微信小程序之腾讯地图SDK获取当前城市位置信息
例如:小程序首页要显示用户地区需求:用户打开页面自动获取当前位置的定位,小程序wx.openLocation只能获取到经纬度,所以需要用腾讯地图SDK.. 1.引入当前页面js文件中. //qqma ...
微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息
uni-app开发微信小程序使用腾讯地图选点和城市选择器插件
文章目录前言效果图第一步.登录腾讯地图申请属于自己小程序的key 第二步.登录微信公众平台添加插件第三步.引入插件包,配置定位允许授权第四步.通过点击事件使用插件第五步.拿到插件接口返回的 ...
Java微信公众号开发微信网页授权之前端传递code方式获取用户信息
本片博客讲解的网页授权分为两步,前端先传递backUrl(回调地址)到后台网页授权接口,该接口拿到回调地址后组装授权连接,重定向到前端页面,前端页面截取Code,传入后端获取用户信息方法,获取用户信息 ...
（微信公众号开发《一》OAuth2.0网页授权认证获取用户的详细信息，实现自动登陆）http://blog.csdn.net/liaohaojian/article/details/70175835
从接触公众号到现在,通过不断积累学习,对如何调用微信提供接口有了一定的见解.当然在开发过程中遇到很多问题,现在把部分模块功能在这备案一下,做个总结也希望能给其他人帮助工欲善其事,必先利其器,先看看开 ...

uni-app开发微信小程使用腾讯位置服务获取用户的位置信息

uni-app开发微信小程使用腾讯位置服务获取用户的位置信息

一、开通腾讯位置服务

二、编码实现

(一）获取定位坐标

(二)、在项目中使用

uni-app开发微信小程使用腾讯位置服务获取用户的位置信息相关推荐

最新文章

热门文章