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

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


相关文章
|
2月前
【微信公众平台对接】有关【创建发票卡券模板】调用示例
【微信公众平台对接】有关【创建发票卡券模板】调用示例
17 0
|
2月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
51 0
|
3月前
|
Web App开发 监控 JavaScript
1号防红网:什么是微信防红不死短链接?微信防红不死短链接代码示例
1号防红网:什么是微信防红不死短链接?微信防红不死短链接代码示例
56 0
|
5月前
【微信公众平台对接】有关【创建发票卡券模板】调用示例
【微信公众平台对接】有关【创建发票卡券模板】调用示例
37 0
|
5月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
67 0
|
3月前
|
小程序 定位技术 Android开发
小程序质量提升丨定位问题解决方案(错误码11)
小程序质量提升丨定位问题解决方案(错误码11)
30 0
|
10月前
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
139 1
|
10月前
|
Python
微信虚拟聊天对话生成器示例
python实现对话生成器代码示例
|
5月前
|
XML 移动开发 小程序
微信公众号开发(七)微信h5跳转小程序及小游戏示例
最近公司做活动,需要从h5页面跳转至微信小游戏。 当时接到这个需求的时候,就在想,这玩意能相互跳转么? 后来百度了一下,还真行。
117 1
|
5月前
|
小程序 PHP
微信公众号开发(六)微信支付(发红包、企业支付到零钱)需要证书请求示例
这里最主要的就是curlpost请求的时候需要带上证书。否则请求会失败。
71 0

热门文章

最新文章