山东大学项目实训——地图圈系统——微信小程序（18）

最新推荐文章于 2022-05-07 02:44:25 发布

SDUer～

最新推荐文章于 2022-05-07 02:44:25 发布

阅读量416

点赞数

本文链接：https://blog.csdn.net/weixin_44181723/article/details/117454786

版权

项目实训专栏收录该内容

26 篇文章 6 订阅

订阅专栏

地图圈系统——微信小程序（18）

一、轨迹记录功能

轨迹记录功能的实现思路相对简单，设置一个定时器，每隔1s获取一下当前位置，将当前的经纬度坐标加入到数组中。然后起点终点根据数组第一个元素和最后一个元素的经纬度坐标，经过腾讯位置服务的逆地址解析功能获得即可。

另外wx.getLocation方法可以获得当前的速度，在这也可以进行显示。

轨迹记录有暂停、继续、终止、重新记录等按钮，还可以查看轨迹，并进行保存，保存后可以在相应位置查看轨迹，即轨迹回放功能。

二、项目代码

<!--pages/guiji/guiji.wxml-->
<navBar 
    title-text="足迹记录" 
    back-icon="../../src/images/back@3x.png"

    background="#f2f2f2"
    bindback="back"/>
    

<view class="mapcontainer">
<map id="map" style="width: 100%; height: 100vh;" id="mymap"longitude="{{longitude}}" latitude="{{latitude}}" scale="18" polyline="{{polyline}}" show-location
  >
  <cover-view wx:if="{{ifshowstar}}"  class="map-prompt3" bindtap="start">开始记录</cover-view>
  <cover-view wx:if="{{ifshowgui}}"  class="map-prompt3" bindtap="save_guiji">查看轨迹</cover-view>
  <cover-view wx:if="{{ifshowgui}}"  class="map-prompt4" bindtap="re_guiji">重新记录</cover-view>
  <cover-view wx:if="{{!ifshowstar&&!ifshowgui}}" class="map-prompt" bindtap="end">暂停记录</cover-view>
  <!-- <cover-view wx:if="{{!ifshowstar}}" class="map-prompt2" bindtap="save">停止记录</cover-view> -->
  <cover-view wx:if="{{!ifshowstar&&ifshowzan&&!ifshowgui}}" class="map-prompt" bindtap="start">继续记录</cover-view>
  <cover-view wx:if="{{!ifshowstar&&!ifshowgui}}" class="map-prompt2" bindtap="save">停止记录</cover-view>

  <cover-view class="time"> \n\n耗时：{{hours}}:{{minute}}:{{second}}</cover-view>
  <cover-view class="speed"> \n\n速度：{{speed}} m/s</cover-view>

</map>
</view>

/* pages/guiji/guiji.wxss */

/* .contain{
  margin-top: 140rpx; 
} */
.map{
  margin-top: 148rpx;
}
.map-prompt {
  width: 220rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  background: rgb(154, 155, 240);
  border-radius: 40rpx;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 190rpx;
  left: 100rpx;
  /* transform: translate(-50%,0); */
}
.map-prompt2 {
  width: 220rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  background: rgb(154, 155, 240);
  border-radius: 40rpx;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 190rpx;
  right: 100rpx;
  /* transform: translate(-50%,0); */
}
.map-prompt3 {
  width: 220rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  background: rgb(154, 155, 240);
  border-radius: 40rpx;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 300rpx;
  right: 270rpx;
  /* transform: translate(-50%,0); */
}
.map-prompt4 {
  width: 220rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  background: rgb(154, 155, 240);
  border-radius: 40rpx;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 200rpx;
  right: 270rpx;
  /* transform: translate(-50%,0); */
}


.mapView{
  width: 100%;
  height: 1210rpx;
  /* align-items: center; */
}

.mile{
  background-color: #909399;
  color: #fff;
  font-size: 40rpx;
  border-radius: 40rpx;
  width: 50%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 30rpx;
  left: 50%;
  transform: translate(-50%);
}

.time{
  background-color: #909399;
  font-size: 40rpx;
  padding-left: 90rpx;
  padding-top: 20rpx;
  color: #fff;
  border-radius: 40rpx;
  width: 50%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50rpx;
  left: 50%;
  transform: translate(-50%);
}
.speed{
  background-color: #909399;
  font-size: 40rpx;
  padding-left: 90rpx;
  padding-top: 20rpx;
  color: #fff;
  border-radius: 40rpx;
  width: 50%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 170rpx;
  left: 50%;
  transform: translate(-50%);
}

var point = [];
var that2;

var point2 = [{"latitude":36.66900,"longitude":117.13755},{"latitude":36.66900,"longitude":117.13755},{"latitude":36.66893,"longitude":117.13795},{"latitude":36.66711,"longitude":117.13935},{"latitude":36.66658,"longitude":117.13976},{"latitude":36.66692,"longitude":117.14051},{"latitude":36.66672,"longitude":117.14133},{"latitude":36.66675,"longitude":117.14169},{"latitude":36.66690,"longitude":117.14226},{"latitude":36.66703,"longitude":117.14252}]
var countTooGetLocation = 0;
var total_micro_second = 0;
var starRun = 0;
var totalSecond = 0;
var oriMeters = 0.0;
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js');
var util = require('../../utils/util.js');
var qqmapsdk;
var qqmapsdk1;

function count_down(that) {

    if (starRun == 0) {
      return;
    }
  
    if (countTooGetLocation >= 100) {
      var time = date_format(total_micro_second);
      that.updateTime(time);
    }
  
    if (countTooGetLocation >= 5000) { //1000为1s
      
      countTooGetLocation = 0;
    }
  
  
    setTimeout
    setTimeout(function () {
      countTooGetLocation += 10;
      total_micro_second += 10;
      count_down(that);
    }
      , 10
    )
  }

  
  // 时间格式化输出，如03:25:19 86。每10ms都会调用一次
  function date_format(micro_second) {
    // 秒数
    var second = Math.floor(micro_second / 1000);
    // 小时位
    var hr = Math.floor(second / 3600);
    // 分钟位
    var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
    // 秒位
    var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
  
  
    return hr + ":" + min + ":" + sec + " ";
  }
  function fill_zero_prefix(num) {
    return num < 10 ? "0" + num : num
  }
function drawline() {
    that2.setData({
       polyline : [{
          points : point,
          //  color : '#99FF00',
          color : '#1E90FF',
           width : 8,
           dottedLine : false
       }]
    });
}
 
//获取经纬度
function getlocation(that) {
    var lat, lng,speed;
    wx.getLocation({
       type : 'gcj02',
        success : function (res) {
            console.log(res)
            lat = res.latitude;
            lng = res.longitude;
            speed = JSON.stringify(res.speed)
            
            that.setData({
              speed:JSON.stringify(res.speed).substring(0, 4)
            
            })
            point.push({latitude: lat, longitude : lng});
            console.log(point);
        }
    });
}
 
Page({
   data : {
       ifshowstar:true,
       ifshowzan:false,
       ifshowgui:false,
       polyline : [],
       time: "00:00:00",
       start:'',
       end:'',
       time1:'',
       username:'',
       speed:'0',
       hours: '0' + 0,   // 时
       minute: '0' + 0,   // 分
       second: '0' + 0 ,   // 秒
       i:'', //设置计时器
       a:[]//轨迹列表
   },
   setInterval: function () {
    const that = this
    var second = that.data.second
    var minute = that.data.minute
    var hours = that.data.hours       
    var i =setInterval(function () {  // 设置定时器
        second++
        if (second >= 60) {
            second = 0  //  大于等于60秒归零
            minute++
            if (minute >= 60) {
                minute = 0  //  大于等于60分归零
                hours++
                if (hours < 10) {
                    // 少于10补零
                    that.setData({
                        hours: '0' + hours
                    })
                } else {
                    that.setData({
                        hours: hours
                    })
                }
            }
            if (minute < 10) {
                // 少于10补零
                that.setData({
                    minute: '0' + minute
                })
            } else {
                that.setData({
                    minute: minute
                })
            }
        }
        if (second < 10) {
            // 少于10补零
            that.setData({
                second: '0' + second
            })
        } else {
            that.setData({
                second: second
            })
        }
    }, 1000)
    that.setData({
      i:i
    })
},
    onLoad : function () {
        var user = wx.getStorageSync('firstuser')
        console.log(user)
        that2 = this;
        
        that2.setData({
          username:user.nickName
        })
        count_down(this);
        wx.getLocation({
           type: 'gcj02',
            success : function (res) {
                console.log(res)
                that2.setData({
                    longitude : res.longitude,
                    latitude : res.latitude,
                });
            }
        });
    },
 
    start : function () {
        var that = this
        this.timer = setInterval(repeat, 500);
        starRun = 1;
        this.setInterval()
        // count_down(that2);
        this.setData({
            ifshowstar:false,
            ifshowzan:false
        })
        // this.getLocation_start(true)
        function repeat() {
            
            // console.log('re');
            
            getlocation(that);
            drawline();
        }
    },
    end : function () {
        starRun = 0;
        console.log('end');
        clearInterval(this.data.i)
        // count_down(that2);
        clearInterval(this.timer);
        // this.getLocation_strat(false)
        console.log(this.data.time)
        this.setData({
            ifshowzan:true
        })
        console.log(JSON.stringify(point))  

    },
    save : function(){
        console.log("点击了save")
        starRun = 0;
        // var that = this
        var time1 = util.formatTime(new Date());
        clearInterval(this.data.i)
        clearInterval(this.timer);

        // this.getLocation_end()

        
        this.setData({
        time1: time1,
        ifshowgui:true,
        // ifshowstar:true
    });
        var a ={
            time:this.data.time1,
            costtime:this.data.time,
            start:this.data.start,
            end:this.data.end,
            point:point
        }
        // this.setData({
        //     a:a
        // })
        console.log(a)

        
    },
    save_guiji:function(){
      var that = this
      var a ={
        username:this.data.username,
        // time:this.data.time1,
        user_time:this.data.time,
        // use_time:"00:07:08",
        startpoint:this.data.start,
        // startpoint:"历城区伯乐路",
        endpoint:this.data.end,
        // endpoint:"历城区舜泰北路",
        router:JSON.stringify(point2)
    }
    var b = {
        username:this.data.username,
        // time:this.data.time1,
        costtime:this.data.time,
        // use_time:"00:07:08",
        start:this.data.start,
        // startpoint:"历城区伯乐路",
        end:this.data.end,
        // endpoint:"历城区舜泰北路",
        point:point2
    }
    wx.navigateTo({
      // url: '/pages/guiji_index/guiji_index?costtime='+this.data.time+ '&start=' +this.data.start+ '&end=' +this.data.end+ '&point=' +JSON.stringify(point),
      url: '/pages/guiji_index/guiji_index?costtime='+this.data.hours+":"+this.data.minute+":"+this.data.second+ '&point=' +JSON.stringify(point)+ '&username=' +this.data.username,
    })
    // this.setData({
    //     a:a
    // })
    console.log(a)
        // wx.request({
        //   url: 'http://8.140.176.167:8800/router/addRouter',
        //   method:'POST',
        //   data:a,
        //   success:function(res){
        //     wx.showToast({
        //       title: "保存成功",
        //       duration: 1000,
        //       icon: "sucess",
        //       make: true
        //     });
        //     console.log(res)
        //     point = [];
        //     that2;
        //     countTooGetLocation = 0;
        //     total_micro_second = 0;
        //     starRun = 0;
        //     totalSecond = 0;
        //     oriMeters = 0.0;
        //    that.setData({
        //        ifshowstar:true,
        //        ifshowzan:false,
        //        ifshowgui:false,
        //         polyline : [],
        //        time: "00:00:00",
        //        start:'',
        //        end:'',
        //        time1:'',
        //        a:[]//轨迹列表
        //    })

        //   }
        // })
        //  point = [];
        //  that2;
        //  countTooGetLocation = 0;
        //  total_micro_second = 0;
        //  starRun = 0;
        //  totalSecond = 0;
        //  oriMeters = 0.0;
        // this.setData({
        //     ifshowstar:true,
        //     ifshowzan:false,
        //     ifshowgui:false,
        //      polyline : [],
        //     time: "0:00:00",
        //     start:'',
        //     end:'',
        //     time1:'',
        //     a:[]//轨迹列表
        // })

    },
    re_guiji:function(){
      point = [];
      that2;
      countTooGetLocation = 0;
      total_micro_second = 0;
      starRun = 0;
      totalSecond = 0;
      oriMeters = 0.0;
     this.setData({
         ifshowstar:true,
         ifshowzan:false,
         ifshowgui:false,
          polyline : [],
         time: "0:00:00",
         start:'',
         end:'',
         time1:'',
         speed:'0',
         hours: '0' + 0,   // 时
         minute: '0' + 0,   // 分
         second: '0' + 0 ,   // 秒
         i:'', //设置计时器
         a:[]//轨迹列表
     })

 },
    updateTime: function (time) {

        var data = this.data;
        data.time = time;
        this.data = data;
        this.setData({
          time: time,
          
        })
    
      },
      getLocation_start:function(options){
        var that = this
        qqmapsdk = new QQMapWX({
            key: 'LE2BZ-ZIPKU-AWCVW-4EGZV-YAMY2-36BS4' // 必填
          });
          //1、获取当前位置坐标
          wx.getLocation({
            type: 'wgs84',
            success: function (res) {
              //2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
              qqmapsdk.reverseGeocoder({
                location: {
                  latitude: res.latitude,
                  longitude: res.longitude
                },
                success: function (addressRes) {
                  var address = addressRes.result.formatted_addresses.recommend;
                  console.log(address)
                  if(options){
                    that.setData({
                      start:address
                  })
                  }else{
                    that.setData({
                      end:address
                  })
                  }
                  
                 
                }
              })
            }
          })
    
     },
       getLocation_end:function(){
         console.log("调用了end")
        var that = this
        qqmapsdk1 = new QQMapWX({
            key: 'LE2BZ-ZIPKU-AWCVW-4EGZV-YAMY2-36BS4' // 必填
          });
          //1、获取当前位置坐标
          wx.getLocation({
            type: 'wgs84',
            success: function (res) {
              console.log("成功了1！")
              //2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
              qqmapsdk1.reverseGeocoder({
                location: {
                  latitude: res.latitude,
                  longitude: res.longitude
                },
                success: function (addressRes) {

                  var address = addressRes.result.formatted_addresses.recommend;
                  console.log(address)
                  that.setData({
                      end:address
                  })
                 
                },
                fail : function(res){
                  console.log("失败了1！")
                  console.log(res)
                }
                

              })
            },
            fail:function(res){
              console.log("失败了2！")
              console.log(res)
            }

          })
    
     },
});