首页 > 小程序教程 > 微信小程序车位区位位置演示图样式设计制作开发教程

微信小程序车位区位位置演示图样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序车位区位位置演示图样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/parkinglotMap/parkinglotMap.wxml-->

<view class="float-info">您的车辆位于{{mapData.area}}区{{mapData.carPositionNum}}车位</view>
<!--<button bindtap="searchBluetooth">搜索蓝牙</button>
<block wx:for="{{bluetoothDevice}}">
<block wx:if="{{item.name=='AprilBeacon'}}">
<view class="info-list-container">
    <view class="classname">RSSI:{{item.RSSI}}</view>
    <view class="classname">设备Id:{{item.deviceId}}</view>
    <view class="classname">名称:{{item.name}}</view>
    <view class="classname" style="color:blue">距离:{{item.distance}}</view>
  </view>
  </block>
</block>-->
<canvas canvas-id="parking-map" style="position:absolute;height:{{height}};width:{{width}}" bindtouchstart="start" bindtouchmove="move" bindtouchend="end" />
<canvas canvas-id="parking-map-bluetooth" style="position:absolute;height:{{height}};width:{{width}}" bindtouchstart="start" bindtouchmove="move" bindtouchend="end" />
  <canvas canvas-id="direction" style="position:absolute;height:{{height}};width:{{width}}" bindtouchstart="start" bindtouchmove="move" bindtouchend="end" />
 
二、wxss样式文件代码如下:
/* pages/parkinglotMap/parkinglotMap.wxss */

page{
    width: 100%;
    height: 100%;
    /*background-color: #f5f3f0;*/
    
}

.float-info{
  position:fixed;
  right:15rpx;
  top:15rpx;
  font-size:15px;
  background-color:dodgerblue;
  border-radius: 10px;
  padding: 10rpx;
  color: white;
  
}
三、js页面代码如下:
// pages/parkinglotMap/parkinglotMap.js
var app = getApp()
var util = require('../../utils/util.js')
const pMap = wx.createCanvasContext('parking-map')
const directionCanvas = wx.createCanvasContext('direction')
const pMapBeacons = wx.createCanvasContext("parking-map-bluetooth")
const _STARTX = 0
const _STARTY = 0
//页边距
const _PADDING = 50

//车位上下间距
const _SPACING = 40
//车位宽度
const _WIDTH = 40
//车位高度
const _HEIGHT = 55
//过道宽度
const _AISLE = 35
//车库文字偏移量
const _TEXT_OFFSET = 15
//车辆图标偏移量
const _CAR_ICON_OFFSET = 18

//缩放倍数
var zoom = 1
var mapData = {
  elements: {
    "A001": { name: "A001", classify: 1, position: { x: 30, y: 50 }, width: 40, height: 55 },
    "A002": { name: "A002", classify: 1, position: { x: 50, y: 145 }, width: 40, height: 55 },
    "A003": { name: "A003", classify: 1, position: { x: 50, y: 240 }, width: 40, height: 55 },
    "A004": { name: "A004", classify: 1, position: { x: 50, y: 335 }, width: 40, height: 55 },
    "A005": { name: "A005", classify: 1, position: { x: 50, y: 430 }, width: 40, height: 55 },

    "A006": { name: "A006", classify: 1, position: { x: 145, y: 50 }, width: 40, height: 55 },
    "A007": { name: "A007", classify: 1, position: { x: 125, y: 145 }, width: 40, height: 55 },
    "A008": { name: "A008", classify: 1, position: { x: 125, y: 240 }, width: 40, height: 55 },
    "A009": { name: "A009", classify: 1, position: { x: 125, y: 335 }, width: 40, height: 55 },
    "A010": { name: "A010", classify: 1, position: { x: 125, y: 430 }, width: 40, height: 55 },
    "A013": { name: "A013", classify: 1, position: { x: 125, y: 620 }, width: 40, height: 55 },
    "A014": { name: "A014", classify: 1, position: { x: 220, y: 240 }, width: 40, height: 55 },
    "A015": { name: "A015", classify: 1, position: { x: 220, y: 335 }, width: 40, height: 55 },
    "exit1": { name: "", classify: 2, position: { x: 250, y: 50 }, width: 40, height: 55 },
    "lift1": { name: "", classify: 3, position: { x: 250, y: 130 }, width: 40, height: 55 },
  },
  width: 550,
  height: 765,
  textOffset: {
    x: 20,
    y: 70
  },
  carIconOffset: {
    x: 5,
    y: 18
  },
  carPositionNum: "A002",
  area: "A",
  parkingLotCnName: "科高路1号停车场",
  forwardDirection: 36.23542
}
var beaconSearchInterval
var userDirection = 0
Page({
  data: {
    x: 0,
    y: 0,
    hidden: true,
    width: "0",
    height: "0",
    windowWidth: 0,
    speed: 0,
    mapData: {},
    scanCodeInfo: {
      carPosition1: [3, 5],
      carPosition2: [4, 5]
    }
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    //测试map数据
    //0:无元素 1:车位 2:安全出口 3:升降电梯

    wx.startCompass({
      success: function (res) {
        console.log("开始监听电子罗盘")
      }

    })

    this.setData({
      width: mapData.width + "px",
      height: mapData.height + "px",
      mapData: mapData
    })
    that.drawParkingMap(0)
    wx.onCompassChange(function (res) {
      that.userDirection = res.direction
      console.log("方向改变", res)
    })
  },

  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    var that = this
    wx.startBeaconDiscovery({
      uuids: ['B5B182C7-EAB1-4988-AA99-B5C1517008D9'],
      success: function (res) {
        console.log('startBeaconDiscoverysuccess', res)
        that.searchBeacons();
      },
      fail: function (res) {
        console.log('startBeaconDiscoveryfail', res)
      }
    })
  },
  onUnload: function () {
    wx.stopBeaconDiscovery({
      success: function (res) {
        console.log("停止搜索beacon设备")
        clearInterval(beaconSearchInterval)
      }
    })
    wx.stopCompass({
      success: function (res) {
        console.log("停止监听电子罗盘")
      }
    })
  },
  // 绘图相关
  drawParkingMap: function (direction) {
    var that = this;
    pMap.setFontSize(12)
    pMap.setTextAlign('center')
    pMap.setFillStyle('#62492d')
    for (let key in mapData.elements) {
      let element = mapData.elements[key]
      switch (element.classify) {
        case 1:
          pMap.drawImage("/images/parkingLot_area_yellow.png", element.position.x, element.position.y, element.width, element.height)
          pMap.fillText(element.name, element.position.x + mapData.textOffset.x, element.position.y + mapData.textOffset.y)
          break
        case 2:
          pMap.drawImage("/images/exit.png", element.position.x, element.position.y, element.width, element.height)
          break
        case 3:
          pMap.drawImage("/images/elevator.png", element.position.x, element.position.y, element.width, element.height)
          break
      }
    }

    this.drawCarPosition()
    pMap.draw()
    directionCanvas.draw()
  },

  drawDriverLocation: function (driverLocationPoint) {
    let locationX = driverLocationPoint.x
    let locationY = driverLocationPoint.y
    var w = 31
    var h = 40
    directionCanvas.translate(locationX + w / 2, locationY + h / 2)
    console.log('this.userDirection', this.userDirection)
    directionCanvas.rotate((this.userDirection - 354) * Math.PI / 180)
    directionCanvas.drawImage("/images/direction.png", -w / 2, -h / 2, w, h)
    directionCanvas.draw()
  },

  //绘制车辆
  drawCarPosition: function () {
    let parkingSpaceCoordinate = mapData.elements[mapData.carPositionNum].position
    console.log(parkingSpaceCoordinate)
    var carPositionX = parkingSpaceCoordinate.x + mapData.carIconOffset.x
    var carPositionY = parkingSpaceCoordinate.y + mapData.carIconOffset.y
    pMap.drawImage("/images/car_icon.png", carPositionX, carPositionY, 32, 25)
  },
  //绘制路线
  drawRouteToCar: function (carPosition1, carPosition2, beginPoint) {
    let carLocation = this.data.mapData.carLocation
    let driverLocation = this.getDriverLocationByCarPosition(carPosition1, carPosition2, beginPoint)
    let inflextionPoint = {}
    let endPoint = {}
    if (carPosition1[0] == carPosition2[0]) {
      console.log("==")
      inflextionPoint = this.getDriverLocationByCarPosition([
        carLocation[0] - 1,
        carPosition1[1]
      ], [
          carLocation[0] - 1,
          carPosition2[1]
        ], beginPoint)
      inflextionPoint.x += (_WIDTH + _AISLE) / 2
      endPoint = {
        x: inflextionPoint.x,
        y: beginPoint.y + (carLocation[1] - 1) * (_HEIGHT + _SPACING) + _HEIGHT / 2
      }
    } else {
      console.log("!=")
      inflextionPoint = this.getDriverLocationByCarPosition(
        [carPosition1[0],
        carLocation[1]]
        ,
        [carPosition2[0],
        carLocation[1]]
        , beginPoint)
      inflextionPoint.y += (_HEIGHT + _SPACING) / 2
      endPoint = {
        x: beginPoint.x + carLocation[0] * (_WIDTH + _AISLE) + _WIDTH / 2,
        y: inflextionPoint.y
      }
    }
    pMap.setLineWidth(10)
    pMap.setLineCap('round')
    pMap.setLineJoin('round')
    pMap.setStrokeStyle('#1593ff')
    pMap.moveTo(driverLocation.x, driverLocation.y);
    pMap.lineTo(inflextionPoint.x, inflextionPoint.y);
    console.log("endpoint", endPoint)
    pMap.lineTo(endPoint.x, endPoint.y);
    pMap.stroke();
  },
  searchBeacons: function () {

    var that = this
    beaconSearchInterval = setInterval(function () {

      // wx.startBluetoothDevicesDiscovery({
      //   services: [],
      //   success: function (res) {
      //     console.log('startBluetoothDevicesDiscovery', res)
      //     wx.getBluetoothDevices({
      //       success: function (res) {

      //         res.devices.forEach(function (device, index, array) {
      //           if(device.name=="AprilBeacon"){
      //             let mapElementId=beaconInfo[device.deviceId]
      //             let element=mapData.elements[mapElementId]
      //             pMapBeacons.setGlobalAlpha(0.5)
      //             pMapBeacons.setFillStyle('blue')
      //             pMapBeacons.fillRect(element.position.x,element.position.y,element.width,element.height)
      //             pMapBeacons.setGlobalAlpha(1)
      //             pMapBeacons.setFillStyle('red')
      //             pMapBeacons.fillText(device.RSSI,element.position.x,element.position.y)
      //           }
      //           let iRssi = Math.abs(device.RSSI)
      //           //A - 发射端和接收端相隔1米时的信号强度
      //           let A = 65
      //           //n - 环境衰减因子
      //           let n = 2.0
      //           let power = (iRssi - A) / (10 * n)
      //           device.distance = Math.pow(10, power)
      //         })
      //         console.log('getBluetoothDevices', res)
      //         that.setData({
      //           bluetoothDevice: res.devices
      //         })
      //         pMapBeacons.draw()

      //       }
      //     })
      // })

      wx.getBeacons({
        success: function (res) {
          console.log('getBeacons', res)
          let minBeacons = []
          let indexTemp
          let minDistanceBeacon = {}
          // for (let i = 0; i < 1; i++) {
          let distanceTemp = 1000
          res.beacons.forEach(function (beacon, index, array) {
            if (beacon.accuracy < distanceTemp && beacon.rssi != 0) {
              
              distanceTemp = beacon.accuracy
              minDistanceBeacon = beacon
              indexTemp = index
            }
            console.log("beacon",beacon)
            let mapElementId = beacon.minor > 9 ? "A0" + beacon.minor : "A00" + beacon.minor
            let element = mapData.elements[mapElementId]
            pMapBeacons.setGlobalAlpha(1)
            pMapBeacons.setFillStyle(' blue')
            pMapBeacons.fillText(beacon.accuracy + 'm', element.position.x, element.position.y)
          })
          // res.beacons[indexTemp].accuracy=1000
          // }
          // console.log("minBeacons",minBeacons)
          // minBeacons.forEach(function (beacon) {

          let mapElementId = minDistanceBeacon.minor > 9 ? "A0" + minDistanceBeacon.minor : "A00" + minDistanceBeacon.minor
          let element = mapData.elements[mapElementId]
          pMapBeacons.setGlobalAlpha(0.4)
          pMapBeacons.setFillStyle('green')
          pMapBeacons.fillRect(element.position.x, element.position.y, element.width, element.height)
          pMapBeacons.setGlobalAlpha(1)
          pMapBeacons.setFillStyle('red')
          pMapBeacons.fillText(minDistanceBeacon.accuracy + 'm', element.position.x, element.position.y)
          that.drawDriverLocation(element.position)
          // })
          pMapBeacons.draw()
          var end = new Date().getTime();//接受时间
        }
      })
    }, 100)
  }
})

模板简介:该模板名称为【微信小程序车位区位位置演示图样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 25,745次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-27
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
单页式简历模板 微信素材 企业网站 微信文章 微信模板 微信图片 自适应 html5 表格式简历模板 微信公众平台
您可能会喜欢的其他模板