サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 11. 緯度経度から歩いた距離を表示 ======

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

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


===== 2点間の距離の計算（緯度と経度） =====

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

<code javascript>
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;
  }
}
</code>


===== setInterval =====


<code javascript>
  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));
}
 

//途中


</code>





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

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


===== 緯度経度から2地点間の距離 (km) を計算 =====

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日

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

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

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

}

</code>

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

<html>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4815601828&linkId=d5c5878498f249e70aa116d944ee8c83"></iframe>
</html>

===== Javascriptのthisについて =====

https://www.sejuku.net/blog/29389
thisって何？使い方を覚えて、JavaScriptをもっと楽しく使おう！
マサト
2019/5/11

https://qiita.com/tsukishimaao/items/39d22fd9178546d6cdeb
@tsukishimaao
2014年02月01日に更新
windowオブジェクト

（引用ここから）
windowオブジェクトとはJavaScriptにあらかじめ用意されてるオブジェクトで、JavaScriptを何も書いてない状態でもwindowオブジェクトは利用する事が出来る。
JavaScriptであらかじめ用意されている関数やオブジェクトは、みなwindowオブジェクトのプロパティです。HTMLデータを取得、操作する為の
window.document、URLなどの情報が格納されているwindow.locationなども、すべてwindowオブジェクトのプロパティです。
（引用ここまで）

https://qiita.com/takeharu/items/9935ce476a17d6258e27
@takeharu
2015年12月07日に更新
JavaScriptの「this」は「4種類」？？

https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback
How to access the correct `this` inside a callback?

https://stackoverflow.com/questions/43335477/how-to-use-setinterval-in-vue-component
how to use setInterval in vue component

"this"の問題らしい、、、

Using object methods as callbacks/event handlers
what this refers to depends on how the function is called, not how it is defined.
そのため、解決策としては、
  -''%%.bind()%%''を用いる
  -''%%let self = this%%''としてthisオブジェクトを別の変数に割り当てる
  -アロー関数を用いる
の3つがあるそうです。''%%let self = this%%''としてthisオブジェクトを別の変数に割り当てる方法が、一番分かりやすそうです。


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

===== いまどきのJavaScript記法 =====

https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9
@shibukawa
2019年05月04日に更新
イマドキのJavaScriptの書き方2018

===== Vue.jsでlocalStorage =====


https://jp.vuejs.org/v2/cookbook/client-side-storage.html
クライアントサイドストレージ
最終更新日: 2019年9月10日

https://qiita.com/ma7ma7pipipi/items/4dac390043efc24b0732
@ma7ma7pipipi
2019年01月14日に投稿
vue.js で json localstorage を使う

https://iwb.jp/javascript-vuejs-install-localstorage/
2019年6月10日
Vue.jsでinstallを使用せずにlocalStorageを使用する方法




















===== リンク =====
前：[[00.ionic4:10.ionic4とcapacitorでgps取得|10.ionic4とcapacitorでgps取得]]

次：

目次：[[00.ionic4:index.html|スマホ用ホームページ&amp;スマホアプリ作成ソフトIonic4]]