微信小程序ibeacon三点定位详解


Posted in Javascript onOctober 31, 2018

空余时间简单写了一个微信小程序ibeacon三点定位。

事先淘宝买了七八个ibeacon小设备,放置在办公司角落。分别设置三个ibeacon的位置坐标点,根据每一个ibeacon到已经开启蓝牙的目标物距离,计算出目标物在当前区域内坐标位置。适用于区域内购物指示。当然,进入该区域事先要打开手机蓝牙。

下面代码:

var app = getApp() 
Page({
 data: {
  motto: 'Hello World',
  openBLE:'打开蓝牙设备',
  startBLEDiscovery:'初始化蓝牙设备',
  startBLEDevices:'目标定位',
  reStartSearchBLE:'重置蓝牙',
  startSearchBLE:'默认空',
  userInfo: {},
  deviceId: '',
  searchFlag:true,
  deviceRSSI:'',
  deviceName:'',
  deviceId:[],
  advertisServiceUUIDs: [],
  advertisData:[],
  canvasPointX:'',
  canvasPointY:'',
  avatarUrl:'../index/bg-image.jpg',
  showPosition:'' 
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../logs/logs'
  })
 },
 onLoad: function () { 
  var that = this
  //调用应用实例的方法获取全局数据 
  //that.setData({ deviceId: opt.deviceId }) 
  app.getUserInfo(function(userInfo){
   //更新数据 
   that.setData({
    userInfo:userInfo
   })
   //判断兼容性
   if (wx.openBluetoothAdapter) { 
   //打开蓝牙适配器,如果没有打开 showtoast
   wx.openBluetoothAdapter({
    success: function(res){
     // success
     //获取本机的蓝牙适配器状态
     wx.getBluetoothAdapterState({
      success: function(res){
       // success
       that.setData({
        searchFlag:true
       }) 
      },
      fail: function(res) {
       // fail 
       that.setData({
        searchFlag:false
       })
      },
      complete: function(res) {
       // complete
      }
     })
    },
    fail: function(res) {
     // fail 本机是否已经打开蓝牙设备
      wx.showToast({title:'请打开本机蓝牙设备,重新扫码', duration:10000 })
    },
    complete: function(res) {
     // complete
    }
   })
   } else {
     // 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
     wx.showModal({
      title: '提示',
      content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
     })
    } 
    
  })
  }, 
 
  startBLEDevices: function(){
    var that = this 
     wx.startBluetoothDevicesDiscovery({
      services: [],
      success: function(res){ 
       //获取本机蓝牙设备状态  
         // success 
       that.setData({
        showPosition:setInterval(that.devicesFunc,1000)
       })  
      },
      fail: function(res) {
      // fail 
     },
     complete: function(res) {
      // complete 
     }
    })
  },
 // startBLEDevices: function(){
 //  var that = this
 //  that.setData({
 //   showPosition:setInterval(that.devicesFunc,1000)
 //  }) 
 // },
  devicesFunc: function(){
    var that = this 
    
    wx.getBluetoothDevices({
     success: function(res){
      // console.log(res); 
      var arrayRSSI = new Array();
      var arraydeviceName = new Array();
      var arraydeviceId = new Array();
      // var arrayUUIDs = new Array();
      var arrayadvertisData = new Array(); 
      var pointADistance = '';
      var pointBDistance = '';
      var pointCDistance = ''; 
      for(var i = 0; i<res.devices.length;i++){ 
        //console.log(res.devices[i].name); 
       if(res.devices[i].name.indexOf('craft')==0){ 
        //console.log(res.devices[i]);
        arrayRSSI.push(res.devices[i].RSSI);
        arraydeviceName.push(res.devices[i].name); 
        arraydeviceId[i]= res.devices[i].deviceId;
        arrayUUIDs[i]= res.devices[i].advertisServiceUUIDs[i];
        arrayadvertisData[i]= res.devices[i].advertisData  ;
        调用计算rssi对应距离的函数
        var iRssi = Math.abs(arrayRSSI[i]); 
        var power = (iRssi-59)/(10*2.0); 
        var mm = Math.pow(10, power); 
        console.log(arraydeviceName[i]+"距离的位置是"+mm+"米");  
        取01,02,03分别为,(2,0),(2,2),(0,2)固定坐标点,做定位
        
        if(res.devices[i].name.indexOf('craft01')==0){
         
        var pointARSSi = res.devices[i].RSSI ;
        var iRssi = Math.abs(pointARSSi); 
        var power = (iRssi-55)/(10*2.0); 
        var pointADistance = Math.pow(10, power); 
        console.log("a"+pointADistance); 
        console.log(pointARSSi); 
       
        }
        if(res.devices[i].name.indexOf('craft02')==0){
         
        var pointBRSSi = res.devices[i].RSSI;
        var iRssi = Math.abs(pointBRSSi); 
        var power = (iRssi-55)/(10*2.0); 
        var pointBDistance = Math.pow(10, power); 
        console.log("b"+pointBDistance);
        console.log(pointBRSSi); 
        
        }
        if(res.devices[i].name.indexOf('craft03')==0){
        
        var pointCRSSi = res.devices[i].RSSI;
        var iRssi = Math.abs(pointCRSSi); 
        var power = (iRssi-57)/(10*2.0);  
        var pointCDistance = Math.pow(10, power); 
        console.log("c"+pointCDistance); 
        console.log(pointCRSSi); 
        } 
       } 
      } 
      // 从 arrayRSSI 取三个距离定位点最近的ibeacon参与定位
      if(arrayRSSI.length > 3){
        //根据arrayRSSI进行信号强弱排序.距离越远rssi值越小
        for(var i = 0 ; i < arrayRSSI.length ; i ++){
         for(var j = i+1 ; j< arrayRSSI.length ; j++){
          if(arrayRSSI[i]<arrayRSSI[j]){
           var select = arrayRSSI[i];
           arrayRSSI[i] = arrayRSSI[j];
           arrayRSSI[j] = select;
          }
         } 
        }
        //获取最近的三个距离
        for(var i = 0 ; i < 3; i++){
          if(i==0){ 
           var pointARSSi = res.devices[i].RSSI ;
           var iRssi = Math.abs(pointARSSi); 
           var power = (iRssi-55)/(10*2.0); 
           var pointADistance = Math.pow(10, power); 
           console.log("a"+pointADistance); 
           console.log(pointARSSi); 
          }
          if(i==1){
           
           var pointBRSSi = res.devices[i].RSSI;
           var iRssi = Math.abs(pointBRSSi); 
           var power = (iRssi-55)/(10*2.0); 
           var pointBDistance = Math.pow(10, power); 
           console.log("b"+pointBDistance);
           console.log(pointBRSSi); 
          }
          if(i==2){ 
           var pointCRSSi = res.devices[i].RSSI;
           var iRssi = Math.abs(pointCRSSi); 
           var power = (iRssi-57)/(10*2.0);  
           var pointCDistance = Math.pow(10, power); 
           console.log("c"+pointCDistance); 
           console.log(pointCRSSi); 
          }  
        } 
      } 
        //获取定位点的x和y
        if(!pointADistance==''&&!pointBDistance==''&&!pointCDistance==''){
        var pointDX='';var pointDY = '';
        var p = Math.pow(pointADistance,2)/10-Math.pow(pointBDistance,2)/10;
        pointDX = 2.5 - p; 
 
        var m = Math.pow(pointADistance,2)/10-Math.pow(pointCDistance,2)/10;
        pointDY = 2.5 - m; 
 
        console.log('目标所在位置X是'+pointDX);
        console.log('目标所在位置Y是'+pointDY);
         if(pointDX > 0 && pointDY > 0){ 
         wx.showToast({title:'欢迎进入25楼craft', duration:4000 }); 
         }
        that.setData({
          canvasPointX:pointDX,
          canvasPointY:pointDY
         })
        
        //创建画布 
        //计算坐标点在规定canvas上的位置显示
        var context = wx.createCanvasContext(); 
        context.setStrokeStyle("#00ff00");
        //a,b,c,d,e,f  a,b起始坐标,c半径,d,e起始和终止角度 
        context.arc(that.data.canvasPointX*30,that.data.canvasPointY*30,5,0,2*Math.PI);
        context.fill();
        wx.drawCanvas({
         canvasId: 'firstCanvas',
         actions: context.getActions() // 获取绘图动作数组
        }) 
 
        wx.showModal({title:'X轴:'+pointDX+'Y轴:'+pointDY, duration:5000 }); 
         //开始网络请求
         wx.request({
          url: 'http://craftww.cn/weixinIbeacon/index.php',
          data: {},
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 设置请求的 header
          success: function(res){
           // success
          },
          fail: function(res) {
           // fail
          },
          complete: function(res) {
           // complete
          }
         })
 
        }else{
        wx.showToast({title:'正在搜索...', duration:1000 })
         开始网络请求
         wx.request({
          url: 'http://craftww.cn/weixinIbeacon/index.php',
          data: {},
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 设置请求的 header
          success: function(res){
           // success
          },
          fail: function(res) {
           // fail
          },
          complete: function(res) {
           // complete
          }
         })
        } 
 
     },
     fail: function(res) {
      // fail
     },
     complete: function(res) {
      // complete
     }
    }) 
  } ,
  //动态显示
  createList: function(thisName){
   var that = this 
     that.setData({
      array:[{deviceDistance:"1"},{deviceDistance:"1"},{deviceDistance:"1"},{deviceDistance:"1"},{deviceDistance:"1"}]
     }) 
  },
  reStartSearchBLE: function(){ 
   var that = this
  //清除本地数据缓存
  wx.stopBluetoothDevicesDiscovery({
   success: function(res){
    // success
   },
   fail: function(res) {
    // fail
   },
   complete: function(res) {
    // complete
   }
  })
   wx.clearStorageSync();
   clearInterval(that.data.showPosition); 
   console.log(that.data.showPosition);
  // that.context.clearRect(0,0,canvas.width,canvas.height);
   //断开蓝牙
   var that = this
   wx.closeBluetoothAdapter({
    success: function(res){
     // success
     console.log('重置成功');
     //打开蓝牙适配器,如果没有打开 showtoast
   wx.openBluetoothAdapter({
    success: function(res){
     // success
     //获取本机的蓝牙适配器状态
     wx.getBluetoothAdapterState({
      success: function(res){
       // success 
     
      },
      fail: function(res) {
       // fail 
      },
      complete: function(res) {
       // complete
      }
     })
    },
    fail: function(res) {
        },
    complete: function(res) {
     // complete
    }
   })
    },
    fail: function(res) {
     // fail
    },
    complete: function(res) {
     // complete
    }
   })
  }
  //zheli
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery遍历json中多个map的方法
Feb 12 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 #Javascript
详解js删除数组中的指定元素
Oct 31 #Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 #Javascript
Vue项目History模式404问题解决方法
Oct 31 #Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 #Javascript
vue组件中的样式属性scoped实例详解
Oct 30 #Javascript
node上的redis调用优化示例详解
Oct 30 #Javascript
You might like
xajax写的留言本
2006/11/25 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
解析php中的escape函数
2013/06/29 PHP
PHP可变函数学习小结
2015/11/29 PHP
分享php多功能图片处理类
2016/05/15 PHP
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
C++面试题目
2013/06/25 面试题
制作部班长职位说明书
2014/02/26 职场文书
2014年教师节活动总结
2014/08/29 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
话题作文之学会尊重
2019/12/16 职场文书
导游词之任弼时故居
2020/01/07 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
压缩Redis里的字符串大对象操作
2021/06/23 Redis
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers