阳光晨跑.md

阳光晨跑

1.学习目标：

1. 学习定位api和地图的使用
2. 学习坐标运算和地图标注使用。

format-lacation.js

function formatLocation(longitude, latitude){
  longithde = longitude.toFixed(2)
  latitude = latitude.toFixed(2)
  return{
    longitude: longitude.toString().split('.'),
    latitude: latitude.toString().split('.')
  }
}
module.exports = formatLocation

run.js

var countTooGetLocation = 0;
var total_micro_second = 0;
var startRun = 0;
var oriMeters = 0.0;
// 毫秒级倒计时
function count_down(that){
  if(startRun == 0){
    return;
  }
  if(countTooGetLocation >= 100){
    var time = date_format(total_micro_second);
    that.updateTime(time);
  }
  if(countTooGetLocation >= 5000){
    that.getLocation();
    countTooGetLocation = 0;
  }
  setTimeout
  setTimeout(function(){
   countTooGetLocation += 10;
   total_micro_second += 10;
   count_down(that);
  },10)
}
//时间格式化输出，如02:20:10 每10ms都会调用一次
function date_format(micro_second){
  // 秒数
  var second = Math.floor(micro_second / 1000);
  // 小时位
  var hr = Math.floot(second / 3600);
  // 分钟位
  var min = fill_zero_prefix(Math.floor((second-hr*3600)/60));
  // 秒位
  var sec = fill_zero_prefix((second-hr*3600-min*60));
  return hr + ":" + min + ":" + sec + " ";
}

function getDistance(lat1, lng1, lat2, lng2){
  var dis = 0;
  var radLat1 = toRadians(lat1);
  var radLat2 = toRadians(lat2);
  var deltaLat = radLat1 - radLat2;
  var deltaLng = toRadians(lng1) - toRadians(lng2);
  var dis = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat/2),2)+Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(deltaLng/2),2)));
  return dis*6378137;
  function toRadians(d){
    return d*Math.PI/180;
  }
}
function fill_zero_prefix(num){
  return num<10?"0"+num:num
}


Page({
  data: {
    clock: '',
    isLocation: false,
    latitude: 0,
    longtitude: 0,
    markers: [],
    meters: 0.00,
    time: "0:00:00"
  },
  onLoad:function(options){
    this.getLocation()
    console.log("onLoad")
    count_down(this);
  },
  stratRun:function(){
    if(startRun == 1){
      return;
    }
    startRun = 1;
    count_down(this);
    this.getLocation();
  },
  stopRun:function(){
    startRun = 0;
    count_down(this);
  },
  clearRun: function () {
    starRun = 0;
    total_micro_second = 0;
    oriMeters = 0.0;
    this.setData({
      markers: [],
      meters: 0.00,
      time: "0:00:00"
    })
  },
  updateTime: function (time) {
    var data = this.data;
    data.time = time;
    this.data = data;
    this.setData({
      time: time,
    })
  },
  getLocation: function () {
    var that = this
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        var newMarker = {
          latitude: res.latitude,
          longitude: res.longitude,
          iconPath: 'redPoint.png',
        };
        var oriMarkers = that.data.markers;
        var len = oriMarkers.length;
        var lastMarker;
        if (len == 0) {
          oriMarkers.push(newMarker);
        }
        len = oriMarkers.length;
        var lastCover = oriMarkers[len - 1];
        var newMeters = getDistance(lastCover.latitude, lastCover.longitude, res.latitude, res.longitude)/1000;
        if (newMeters < 0.0015) {
          newMeters = 0.0;
        }
        oriMeters = oriMeters + newMeters;
        var meters = new Number(oriMeters);
        var showMeters = meters.toFixed(2);
        oriMarkers.push(newMarker);
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          markers: oriMarkers,
          meters: showMeters,
        });
      },
    })
  },
  openLocation: function () {
    wx.getLocation({
      type: "gcj12",
      success: function (res) {
        wx.openLocation({
          latitude: res.latitude,
          longitudeß: res.longitude,
          scale: 16,
        })
      },
    })
  }
})

run.json

{}

run.wxml

<view class='head'>
  <button class='btn' type='primary' bindtap='startRun'>开始跑步</button>
  <button class='btn' type='primary' bindtap='stopRun'>暂停跑步</button>
  <button class='btn' type='primary' bindtap='clearRun'>清除数据</button>
</view>

<view class='content'>
  <text space='nbsp'>里程数：{{meters}}km 时间：{{time}}</text>
</view>

<map class='mapView' latitude='{{latitude}}' longitude='{{longitude}}' markers='{{markers}}' />

run.wxss

.head {
  display: flex;
  flex-flow: row;
  margin: 0rpx 0rpx 0rpx 0rpx;
  padding: 0rpx 0rpx 0rpx 0rpx;
}

.content {
  text-align: center;
}

.mapView {
  width: 100%;
  height: 90vh;
}

效果