<template>
  <div class="about">
    <h1>現在地</h1>
    <p>緯度：{{latitude}}</p>
    <p>経度：{{longitude}}</p>

    <h2>歩いた距離</h2>
    <p>1分間で歩いた距離：{{d}} km</p>
    <p>合計：{{length}} km</p>
  </div>
</template>

<sciprt>
// 一部
  lat1: number;
  lng1: number;
  lat2: number;
  lng2: number;

  d: number;
  length: number;

  //60秒毎にcalcDistance関数を実行する
  setInterval(calcDistance, 60000);

  calcDistance(){

    const position = Geolocation.getCurrentPosition();
    this.lat2 = position.coords.latitude;
    this.lng2 = position.coords.longitude;

    this.d = distance(lat1, lng1, lat2, lng2)
    this.length = this.length + this.d

    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));
}
</script>