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

简介: 开发框架: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


相关文章
|
7月前
【微信公众平台对接】有关【创建发票卡券模板】调用示例
【微信公众平台对接】有关【创建发票卡券模板】调用示例
108 0
|
7月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
171 0
|
7月前
|
Web App开发 监控 JavaScript
1号防红网:什么是微信防红不死短链接?微信防红不死短链接代码示例
1号防红网:什么是微信防红不死短链接?微信防红不死短链接代码示例
158 0
|
7月前
【微信公众平台对接】有关【创建发票卡券模板】调用示例
【微信公众平台对接】有关【创建发票卡券模板】调用示例
93 0
|
7月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
124 0
|
小程序 API 开发者
【小程序全面解析】生命周期、常用组件,代码示例和使用场景
该文章全面介绍了小程序的生命周期、常用基础组件以及使用场景,并提供了相应的代码示例。读者可以了解小程序的生命周期函数及其执行时机,以及学习如何使用常用基础组件构建小程序页面。此外,文章还列举了各种使用场景,帮助读者更好地理解如何应用小程序开发。如果您是小程序开发的初学者或需要了解小程序的基础知识,该文章将为您提供全面的帮助和指导。
378 0
【小程序全面解析】生命周期、常用组件,代码示例和使用场景
|
7月前
|
JavaScript 小程序
微信小程序的双向数据绑定和vue的哪里不一样?下拉刷新的方式代码示例
微信小程序的双向数据绑定和vue的哪里不一样?下拉刷新的方式代码示例
|
7月前
|
小程序 定位技术 Android开发
小程序质量提升丨定位问题解决方案(错误码11)
小程序质量提升丨定位问题解决方案(错误码11)
116 6
|
XML 移动开发 小程序
微信公众号开发(七)微信h5跳转小程序及小游戏示例
最近公司做活动,需要从h5页面跳转至微信小游戏。 当时接到这个需求的时候,就在想,这玩意能相互跳转么? 后来百度了一下,还真行。
286 1
|
小程序 PHP
微信公众号开发(六)微信支付(发红包、企业支付到零钱)需要证书请求示例
这里最主要的就是curlpost请求的时候需要带上证书。否则请求会失败。
132 0