10.ionic4とcapacitorでgps取得で現在地の緯度と経度を取得することができました。

次は、1分おきに緯度と経度を取得して、1分で移動した距離を計算し、総移動距離を表示したいと思います。
(localstorageなどに保存しない場合は、アプリを閉じると距離はクリアされてしまいます。)

現在地のlatitude, longitudeを求める。

import { Geolocation} from '@capacitor/core';
 
//一部省略
 
export class Tab1Page {
  latitude: number;
  longitude: number;
 
  constructor() {
    this.getLocation();
  }
 
  async getLocation() {
    const position = await Geolocation.getCurrentPosition();
    this.latitude = position.coords.latitude;
    this.longitude = position.coords.longitude;
  }
}

  lat1: number;
  lng1: number;
  lat2: number;
  lng2: number;
 
  length: number;
 
  //60秒毎にcalcDistance関数を実行する
  setInterval(calcDistance, 60000);
 
  calcDistance(){
 
    const position = Geolocation.getCurrentPosition();
    this.lat2 = position.coords.latitude;
    this.lng2 = position.coords.longitude;
 
    this.length = this.length + distance(lat1, lng1, lat2, lng2)
 
    this.lat1 = lat2
    this.lng1 = lng2
  }
 
  function distance(lat1, lng1, lat2, lng2) {
  lat1 *= Math.PI / 180;
  lng1 *= Math.PI / 180;
  lat2 *= Math.PI / 180;
  lng2 *= Math.PI / 180;
  return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2));
}
 
 
//途中

setInterval
で、1分おきに、緯度と経度を取得して、以下のように動いた距離distanceを計算
L_sum = L_sum + distance
で、今までの距離に加算する

L_sumが1の倍数になるたびに卵が1個ふか。

https://qiita.com/kawanet/items/a2e111b17b8eb5ac859a
@kawanet
2018年08月05日に投稿
緯度経度から2地点間の距離 (km) を計算する JavaScript

https://www.logical-arts.jp/archives/18
緯度経度から距離と方位を求める方法
投稿日：2009年12月14日 更新日：2016年5月11日

function distance(lat1, lng1, lat2, lng2) {
  lat1 *= Math.PI / 180;
  lng1 *= Math.PI / 180;
  lat2 *= Math.PI / 180;
  lng2 *= Math.PI / 180;
  return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2));
}

setIntervalメソッドの配下では、thisは、Vueインスタンスではなく、グローバルオブジェクト(window)に変化してしまうため、あらかじめthatなどで固定しておく必要がある。

export default {
  name: 'HelloWorld',
  data: {
  // 現在日時
    current: new Date()
  },
  // 起動時にタイマーを設定
  created: function() {
    let that = this;
    // 1000ミリ秒スパンでcurrentプロパティを更新
    this.timer = setInterval(function() {
    
    }, 1000);
  },
  // 終了時にタイマーを破棄
  beforeDestroy: {
    
  },  
  methods: {
    
  }

}

これからはじめるVue.js実践入門p37

https://cushionapp.com/journal/reactive-time-with-vuejs
Reactive Time with Vue.js
Mar 29, 2017
Written by Jonnie Hallman
@destroytoday

前：10.ionic4とcapacitorでgps取得

次：

目次：スマホ用ホームページ&スマホアプリ作成ソフトIonic4