小程序获取定位完整的封装js(uniapp)
1.小程序获取定位,首先需要在微信公众平台,申请getLocation接口(开发管理->接口设置)
2.在manifest.json打开源码视图,增加代码
"mp-weixin": {
"appid": "appid","permission": {
"scope.userLocation": {
"desc": "获取您的地理位置"
},
},
"requiredPrivateInfos": ["chooseLocation","getLocation"],
},
3.在腾讯地图api中申请一个key,用于经纬度的逆转化(需要将腾讯地图的域名配置到微信公众平台request中)
4.封装获取定位js
let getLocation = function() {
return new Promise((reslove) => {
//获取设置
uni.getSetting({
success(res) {
if (res.authSetting["scope.userLocation"] || res.authSetting["scope.userLocation"] === undefined) {
//获取定位
uni.getLocation({
type: 'gcj02',
success(res) {
reslove(codeAroundCity(res.latitude, res.longitude))
},
fail(err) {
console.log(err);
}
})
} else {
uni.showModal({
title: '提示',
content: '为方便更好的服务您,需要获取您的位置信息!',
success(res) {
if (res.confirm) {
//打开设置
uni.openSetting({
success(dataAu) {
if (dataAu.authSetting['scope.userLocation'] === true) {
uni.getLocation({
type: 'gcj02',
success(res) {
reslove(codeAroundCity(res.latitude,res.longitude))
},
fail(err) {
console.log(err);
}
})
}
}
})
}
}
})
}
}
})
})
}
let codeAroundCity = function(lat, lng) {
let key = '腾讯地图申请的key'
return new Promise((reslove, reject) => {
uni.request({
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}`,
method: 'GET',
data: {
key,
},
success(res) {
let result = res.data.result.address_component //这边需要省,市,县,所以就拿这个信息,如果需要其他信息可以参照腾讯地图api
reslove(result)
}
})
})
}
export default getLocation
5.使用,引入getLocation方法
async onLoad(){
let res = await getLocation()//res就是获取到的信息
}
不足之处还请各位大佬指点!!!
设置
小程序获取定位完整的封装js(uniapp)的更多相关文章
- (八)微信小程序---获取定位信息chooseLocation
微信小程序---获取定位信息 chooseLocation wxml <view bindtap="getlocalPath">{{localPath}}</v ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 微信小程序-获取当前城市位置及再次授权地理位置
微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...
- 基于小程序请求接口 wx.request 封装的类 axios 请求
基于小程序请求接口 wx.request 封装的类 axios 请求 Introduction wx.request 的配置.axios 的调用方式 源码戳我 feature 支持 wx.reques ...
- 微信小程序-获取经纬度
微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...
- 小程序获取微信用户的openid
小程序获取微信用户的openid //index.js //获取应用实例 const app = getApp() Page({ globalData: { appid: '11121221a89e0 ...
- 小程序基础知识点讲解-WXML + WXSS + JS,生命周期
小程序基础 小程序官方地址,小程序开发者工具,点击此处下载.在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发. 微信小程序共支持5种文件,wx ...
- 微信小程序 获取用户openid
1,可以在小程序app.js入口文件中放入登录代码 wx.login({ success: res => { // 登录注册接口 if (res.code) { // 调用服务端登录接口,发送 ...
- JavaScript和微信小程序获取IP地址的方法
最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
随机推荐
- Invalid default value for prop "value": Props with type Object/Array must use a factory function to return the default value.
Invalid default value for prop "value": Props with type Object/Array must use a factory fu ...
- 『玩转Streamlit』--多页应用
Streamlit不仅让创建单页应用变得易如反掌,更通过一系列创新特性,支持构建多页面应用,极大地丰富了用户体验和数据探索的可能性. 随着我们Streamlit App的功能逐渐增多之后,单个页面展示 ...
- TrueNAS关闭5357端口
sockstat -4l 查看监听5357端口进程的ID. 用kill -9 PID 干掉进程.
- 挑战Java面试题复习第1天,坚持就是胜利
面向对象和面向过程的区别面向过程: 步骤分析:将问题分解为一系列步骤.函数实现:用函数逐步实现这些步骤.调用执行:在需要时调用这些函数.高性能:适合对性能要求高的场合,如单片机和嵌入式开发.面向对象: ...
- 拿去面试!一个基于 DDD 的高性能短链系统
众所周知,商城.RPC.秒杀.论坛.外卖.点评等项目早早就烂大街了,翻开同学的简历一看 10 个里面有 9 个是这些,翻遍全网再很难找到一个既有含金量又能看得懂的项目,针对此,我研发了这样一个可以快速 ...
- 关于C++当中全局变量的释放问题
一.由来 主要是在修改公司的一个MFC项目的时候遇到的问题,我在MFC页面的析构函数当中对一个全局图像变量进行了释放,具体如下: ai_engine_OCR::~ai_engine_OCR() { / ...
- Bulk-Crap-Uninstaller:一个高效卸载,轻松管理你的应用程序的.Net开源工具
我们在工作中,经常需要安装大量的软件,随着应用程序的不断增多,管理这些软件变得非常困难. 下面介绍一款具备高效.简洁的特点,可以帮助我们快速卸载大量不需要的应用程序,让电脑管理变得更加轻松. 01 项 ...
- 云开发实践:从 0 到 1 带你玩 AI
今天我们将深入分析云开发的 AI 能力.这次的讨论焦点不再是之前提到的云端IDE编写代码的能力,而是更为广泛和实际的内容--如何利用云平台提供的各种模块化能力,快速高效地开发.今天的主题依然围绕AI展 ...
- CommonsCollections4(基于ysoserial)
环境准备 JDK1.8(8u421)这里ysoserial没有提及JDK版本的影响,我以本地的JDK8版本为准.commons-collections4(4.0 以ysoserial给的版本为准).j ...
- 崖山数据库-监控运维平台-YCM 配置部署详解
准备工作:操作系统版本:[root@node10 ~]# uname -aLinux node10 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 ...