2020年5月20日 (三) 08:40的最新版本

wsx

<code>var filter ={
  toFix:function(value){
    return value.toFixed(2) // 保留2位小数
  }
}

module.exports={
  toFix: filter.toFix
}
</code>

js

<code>var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
  key: 'IWLBZ-CK6R4-YXDUO-DQCXK-J5H4Z-DSBCI'
});
var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    latitude: 0,
    longitude: 0,
    target_la: 0,
    target_lo: 0,
    speed: 0,
    accuracy: 0,
    meters: app.globalData.meters,
    time: app.globalData.time,
    markers: [{
      iconPath: "../../imgs/pic.jpg",
      id: 0,
      latitude: 39.9205,
      longitude: 116.4605,
      width: 30,
      height: 30
    }],
    path: [],

  },
  geoInfo() {
    var that = this
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          speed: res.speed,
          accuracy: res.accuracy,
        })
      }
    })
    console.log(this.data.latitude, this.data.longitude)
  },
  pickLocation() {
    var that = this
    wx.chooseLocation({
      success: function (res) {
        console.log(res)
        that.setData({
          target_la: res.latitude,
          target_lo: res.longitude,
          markers: [{
            iconPath: "../../imgs/pic.jpg",
            id: 0,
            latitude: 39.9205,
            longitude: 116.4605,
            width: 30,
            height: 30
          }, {
            iconPath: "../../imgs/blue.png",
            id: 1,
            latitude: res.latitude,
            longitude: res.longitude,
            width: 20,
            height: 20
          }]
        })
      },
    })
  },
  routing() {
    var that = this
    var temp_loc = this.data.target_la + ',' + this.data.target_lo
    qqmapsdk.direction({
      mode: 'walking',
      to: temp_loc,
      success: function (res) {
        console.log(res)
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log(pl)
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        that.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 4
          }]
        })
      }
    })
  },
  startRun() {
    clearInterval(app.globalData.interval)
    this.geoInfo()
    app.globalData.begin_la = this.data.latitude
    app.globalData.begin_lo = this.data.longitude
    app.globalData.interval = setInterval(() => {
      this.running()
      this.runPath()
    }, 1000)
  },
  continueRun(){
    clearInterval(app.globalData.interval)
    this.setData({
      latitude: app.globalData.latitude,
      longitude: app.globalData.longitude,
      meters: app.globalData.meters,
      time: app.globalData.time,
    })
    app.globalData.interval = setInterval(() => {
      this.running()
      this.runPath()
    }, 1000)
  },
  stopRun() {
    clearInterval(app.globalData.interval)
    this.geoInfo()
    console.log('开始位置', app.globalData.begin_la.begin_la, app.globalData.begin_la.begin_lo)
    console.log('结束位置', this.data.latitude, this.data.longitude)
  },
  clearRun(){
    console.log('数据已清除')
    app.globalData={}
  },
  running() {
    this.setData({
      latitude: this.data.latitude + 0.0002,
      longitude: this.data.longitude + 0.0002,
      meters: this.data.meters + 0.05,
      time: this.data.time + 1,
    })
    app.globalData.latitude = this.data.latitude
    app.globalData.longitude = this.data.longitude
    app.globalData.meters = this.data.meters
    app.globalData.time = this.data.time
    console.log(this.data)
  },
  runPath() {
    app.globalData.path.push({ latitude: this.data.latitude, longitude: this.data.longitude })
    this.setData({
      polyline: [{
        points: app.globalData.path,
        color: '#FF0000DD',
        width: 4
      }],
      markers: [{
        iconPath: "../../imgs/triangle.png",
        id: 3,
        latitude: app.globalData.begin_la,
        longitude: app.globalData.begin_lo,
        width: 20,
        height: 20
      }, {
        iconPath: "../../imgs/yellow.png",
        id: 4,
        latitude: this.data.latitude,
        longitude: this.data.longitude,
        width: 20,
        height: 20
      }]
    })
  },
  onReady: function () {
    var that = this
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          speed: res.speed,
          accuracy: res.accuracy,
        })

      }
    })
  },
  onLoad: function () {

  }
})
</code>

json

<code>{
  "usingComponents": {}
}
</code>

wxml

<code><wxs module='filter' src='fix.wxs'></wxs>

<view class='mainView'>
  <view>路线规划</view>
  <view class='top-buttons'>
    <button class='top-btn' bindtap='pickLocation'>选择位置</button>
    <button class='top-btn' bindtap='routing'>显示路线</button>
  </view>

  <map style="width:100%; height:350px" longitude='{{longitude}}' latitude='{{latitude}}' markers='{{markers}}' polyline="{{polyline}}">
    <cover-view class="cover">
      <cover-view>跑步距离:{{filter.toFix(meters)}} </cover-view>
      <cover-view>跑步时长:{{filter.toFix(time)}}</cover-view>
    </cover-view>
  </map>

  <view>跑步定位</view>
  <view class='bottom-buttons'>
    <button class='bottom-btn' bindtap='startRun'>跑步开始</button>
    <button class="bottom-btn" bindtap="continueRun">继续跑步</button>
    <button class="bottom-btn" bindtap="stopRun">结束跑步</button>
    <button class="bottom-btn" bindtap="clearRun">清除路线</button>
  </view>
</view>
</code>

wxss

<code>.mainView {
  background-color: #5eb2df;
  color: #fff;
  text-align: center;
}

.top-buttons {
  display: flex;
  flex-direction: row;
}

.top-btn {
  margin-top: 10rpx;
  width: 300rpx;
  margin-bottom: 10rpx;
  font-size: 30rpx;
  align-items: center;
}

.cover{
  color: blue;
  text-align: left;  
}

.bottom-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.bottom-btn {
  margin-top: 10rpx;
  width: 300rpx;
  margin-bottom: 10rpx;
  font-size: 30rpx;
  align-items: center;
}

</code>