开发者社区> 瓜子三百克> 正文

微信小程序实时定位的要做的那些事,你学废了吗?(附示例)

简介: 开发框架:uniapp 本片文章主要实现了微信小程序的实时定位功能的小组件实现。
+关注继续查看

1、获取小程序是否开启定位授权,会吧?

function zmStartMonitor() {
    // #ifdef MP-WEIXIN
    return new Promise((resolve, reject) => {
  wx.getSetting({
    success: (res) => {
    // 查看位置权限的状态 如果是首次授权(undefined)或者之前拒绝授权(false)            
    //!res.authSetting['scope.userLocation']
    if (res.authSetting['scope.userLocation'] == false) {
        //之前拒绝授权(false)
        zmAuthorityOpen(false)
        zmOpenConfirm()
    } else {
        //如果是首次授权则弹出授权窗口进行授权,如果之前进行了授权,则获取地理位置信息
        zmBeginLocation()
    }
    resolve(res)
    },
    fail: (err) => {
    console.log("getSetting_err:", JSON.stringify(err))
    zmAuthorityOpen(false)
    reject(err)
    }
  })
    })
    // #endif
}


2、定位授权弹窗,会吧?

function zmOpenConfirm() {
    // #ifdef MP-WEIXIN
    wx.showModal({
  content: '检测到您没打开定位权限,是否去设置打开?',
  confirmText: "确认",
  cancelText: "取消",
  success: function(res) {
    console.log(res);
    //点击“确认”时打开设置页面
    if (res.confirm) {
    console.log('用户点击确认')
    wx.openSetting({
        success: (res) => {
      zmBeginLocation()
        }
    })
    } else {
    console.log('用户点击取消')
    zmAuthorityOpen(false)
    }
  }
    });
    // #endif
}


3、开启定位监听,会吧?

function zmBeginLocation() {
    // #ifdef MP-WEIXIN
    wx.startLocationUpdate({
  type: "gcj02",
  success(res) {
    zmAuthorityOpen(true)
    console.log("startLocation_suc: " + JSON.stringify(res));
  },
  fail(err) {
    zmAuthorityOpen(false)
    console.error("startLocation_err: " + JSON.stringify(err));
  },
    })
    wx.onLocationChange(function(res) {
  zmLocationSuc(res)
    });
    wx.onLocationChangeError(function(res) {
  zmLocationErr(res)
    });
    // #endif
}


4、定位通知,会吧

/// 监控定位信息成功
function zmLocationSuc(res) {
    /* {
    "latitude":24.44579,
    "longitude":118.08243,
    "speed":-1,
    "accuracy":65,
    "verticalAccuracy":65,
    "horizontalAccuracy":65,
    "errMsg":"getLocation:ok"
    } */
    uni.$emit("iLocationSuc", res)
}
/// 监控定位信息失败
function zmLocationErr(err) {
    uni.$emit("iLocationErr", err)
}
/// 监控定位权限开关
function zmAuthorityOpen(e) {
    uni.$emit("iAuthorityOpen", e)
}


5、结束定位监控,会吧?

function zmEndMonitor() {
    // #ifdef MP-WEIXIN
    console.log("========zmEnd")
    wx.offLocationChange(function(res) {
  zmLocationSuc(res)
    });
    wx.offLocationChangeError(function(err) {
  zmLocationErr(err)
    });
    // #endif
}


6、然后来个买一送一,单次获取本地经纬度,没问题吧?

function zmLocation() {
    return new Promise((resolve, reject) => {
  uni.getSetting({
    success: (res) => {
    // 查看位置权限的状态 如果是首次授权(undefined)或者之前拒绝授权(false)            
    //!res.authSetting['scope.userLocation']
    if (res.authSetting['scope.userLocation'] == false) {
        uni.authorize({
      success(res) {
        /// 获取当前的地理位置、速度。
        uni.getLocation({
        type: 'gcj02',
        success: function(res) {
            resolve(res)
        },
        fail: function(err) {
            reject(err);
        }
        });
      },
      fail(err) {
        reject(err);
      }
        })
    } else {
        //如果是首次授权则弹出授权窗口进行授权,如果之前进行了授权,则获取地理位置信息
        /// 获取当前的地理位置、速度。
        uni.getLocation({
      type: 'gcj02',
      success: function(res) {
        resolve(res)
      },
      fail: function(err) {
        reject(err);
      }
        });
    }
    }
  })
    })
}


7、写成一个组件抛出去,会吧?

export default {
    zmStartMonitor,
    zmEndMonitor,
    zmLocation,
}

8、定位权限,会判断吧?


小程序定位权限,除了要开启小程序的定位授权,还要开启app和微信应用的定位权限,否则无法获取定位信息,获取如下:


const systemInfo = uni.getSystemInfoSync()
    // 模拟器没有这两个字段,设置默认打开
    if (systemInfo.locationEnabled != undefined &&
  systemInfo.locationAuthorized != undefined) {
  // 手机系统定位开关
  console.log("手机系统定位开关:", systemInfo.locationEnabled)
  // 微信app定位开关,如果手机系统定位关闭,那么微信app定位也会一起关闭
  console.log("微信应用定位开关:", systemInfo.locationAuthorized)
    }


最后,文件打包奉上。


源码/demo展示:

1、gitee:https://gitee.com/chenzm_186/demo-real-time-location-mini

2、csdn:https://download.csdn.net/download/weixin_38633659/85436545


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29196 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16465 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20710 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14901 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22361 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23586 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36461 0
131
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载