Indoor and outdoor map switching (indoor three-point positioning based on ibeacons)

The program is implemented in wechat applet
1： Generalization
Tencent maps use api：apihttps://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
The key is , Request key , Use... In applets .
2： Outdoor map
When you enter the indoor map , Remind you whether to switch to indoor map
wxml

<map
  id="map"
  longitude="{
   {longitude}}"
  latitude='{
   {latitude}}'
  scale='18'
  show-location
  markers='{
   {markers}}'
  subkey=" I applied for key"
  style="height: {
   {height}}px;">
</map>
<view class="button-position"></view>

js

Page({
  data: {
    height: 0,
    longitude: 0,
    latitude: 0,    
    markers: [],
    posTimer: null,
    timeGap: 10000
  },

  onLoad: function (options) {
    const _this = this;

    //  Get the system height , Set map size 
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          height: res.windowHeight
        })
      },
    });

    //  Get the current location 
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        _this.setData({
          longitude: res.longitude,
          latitude: res.latitude
        })
        console.log(res.longitude+"jjj"+res.latitude)
      }
    });

    //  Read the configuration file in the cache 
    wx.getStorage({
      key: 'config',
      success(res) {
        const data = res.data;

        _this.setData({
          outdoorTimeGap: Number(data.outdoorTimeGap) * 1000
        });
      },
      fail(res) {
        console.warn(' Configuration file read failed !');
      }
    });
  },

  /**
   *  Life cycle function -- Monitor page display 
   */
  onShow: function () {
    let isGoIndoor = true,
     _this = this;
    const timer = setInterval(function () {
      wx.getLocation({
        type: 'gcj02',
        success: function (res) {
          if(res.longitude>105 && res.longitude<115 && res.latitude>35 && res.latitude<45){
            wx.showModal({
              title: ' Tips ',
              content: ' It is detected that you are approaching the room , Do you want to switch to indoor map ',
              confirmText: ' Get into ',
              cancelText: ' Cancel ',
              success(resp) {
                if (resp.confirm) {
                  wx.navigateTo({
                    url: '/pages/indoor/indoor',
                  })
                }
              }
            });
          }
        },
      })
    }, _this.data.timeGap);

    this.setData({
      posTimer: timer
    });
  },

  /**
   *  Life cycle function -- Monitor page hidden 
   */
  onHide: function () {
    clearInterval(this.data.posTimer);
    this.setData({
      posTimer: null
    });
  }
})

wxcss

.main-body {
    position: relative;
  }
  .pos-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .point {
    position: absolute;
    width: 50rpx;
    height: 50rpx;
    border-radius: 25rpx;
    text-align: center;
    line-height: 50rpx;
    color: #fff;
    background-color: #f00;
  }
  
  .function-tab {
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  }
  .function-tab .tab-item {
    width: 100%;
    height: 100%;
    line-height: 120rpx;
    text-align: center;
  }
  .function-tab .tab-item image {
    position: relative;
    width: 48rpx;
    height: 48rpx;
    top: 10rpx;
    margin-right: 20rpx;
  }
  .function-tab .tab-item navigator {
    display: inline-block;
  }
  
  .mark {
    position: absolute;
    z-index: 1000;
    width: 48rpx;
    height: 64rpx;
  }

2： Indoor map use and three-point positioning
effect

  predict:function(){
    var that=this
      wx.startBeaconDiscovery({
        // Set up ibeacons Parameters of 
        uuids: ['E2C56DB5-DFFB-48D2-B060-D0F5A71096E0'],
        // Successful connection 
        success: function () {
          console.log(" Start scanning devices ")
          // monitor iBeacon Update event of the device 
          wx.onBeaconUpdate(function (res) {
              wx.getBeacons({
                success: (result) => {
                    console.log("ibacon The number of "+res.beacons.length)
                    //rssi Strength 
                    var arrayRSSI = new Array();
                    // distance 
                    var arrayaccay = new Array();
                     //major
                     var arraymajor = new Array();
                    // The distance from the three fixed points to the moving point 
                    var pointADistance = '';
                    var pointBDistance = '';
                    var pointCDistance = ''; 
                    for(var i = 0; i<res.beacons.length;i++){
                        // Put the distance and intensity into the array 
                        arrayRSSI.push(Math.abs(res.beacons[i].RSSI));
                        arrayaccay.push(res.beacons[i].accuracy)
                        arraymajor.push(res.beacons[i].major)
                        
                    }
                    // // take 2 Merge arrays into 1 individual 
                    // var activeSubjectsArr = [];
                    // for (var i = 0; i < arraymajor.length; i++) {
                    //     var activeSubjectsObject = {};
                    //     for (var j = 0; j < arrayaccay.length; j++) {
                    //      if (i == j) {
                    //       activeSubjectsObject.name = arraymajor[i];
                    //       activeSubjectsObject.value = arrayaccay[j];
                    //       activeSubjectsArr.push(activeSubjectsObject);
                    //      }
                    //     }
                    //    }
                    //    console.log(activeSubjectsArr[0].name);
                     //  from  arrayRSSI  Take three points closest to the positioning point ibeacon Participate in positioning 
                    if(arrayaccay.length > 3 || arrayaccay.length==3){
                        // according to arrayRSSI Sort the signal strength . The farther the distance rssi The smaller the value. 
                        for(var i = 0 ; i < arrayaccay.length ; i ++){
                        for(var j = i+1 ; j< arrayaccay.length ; j++){
                            if(arrayaccay[i]<arrayaccay[j]){
                            var select = arrayaccay[i];
                            arrayaccay[i] = arrayaccay[j];
                            arrayaccay[j] = select;
                            }
                        } 
                        }
                    }
                      // Get the three closest distances 
                    for(var i = 0 ; i < 3; i++){
                        if(i==0){ 
                        pointADistance=arrayaccay[i]
                        console.log("a distance ："+pointADistance); 
                        }
                        if(i==1){
                        pointBDistance=arrayaccay[i]
                        console.log("b distance ："+pointBDistance); 
                        }
                        if(i==2){ 
                        pointCDistance=arrayaccay[i]
                        console.log("c distance ："+pointCDistance); 
                        }   
                    }
                    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 left=pointDX*10+"%"  
         
                        var m = Math.pow(pointADistance,2)/10-Math.pow(pointCDistance,2)/10;
                        pointDY = 2.5 - m; 
                        var top=pointDY*10+"%"
         
                        console.log(' Target location X yes '+top);
                        console.log(' Target location Y yes '+left);
                        that.setData({
                            left:left,
                            top:top
                          })
                      
                        }
                       
                       

                },
                
              })
        
            //    console.log(" The equipment uuid yes ："+res.beacons[0].uuid)
            //    console.log(" distance ibeacons The distance is ："+res.beacons[0].accuracy)
            //    console.log(" distance ibeacons The signal strength is ："+res.beacons[0].rssi)
            //    console.log(" distance ibeacons The signal strength is ："+res.beacons[0].major)
            //    var distance=res.beacons[0].accuracy
            //    var major=res.beacons[0].major
            //    var rssi=-res.beacons[0].rssi
            
           
          })
       
        },
        fail:function(){
          wx.showToast({
            title: ' Not in the range of equipment ',
            icon: 'fail',
            duration: 500
          })
        }
      }),
      // The search timeout     Stop scanning the device 
      setTimeout(function () {
          wx.stopBeaconDiscovery({
            success: function () {
              console.log(" Stop scanning the device ！");
            }
          });
        }, 10000); 
   
  },