====== 11. 緯度経度から歩いた距離を表示 ====== [[00.ionic4:10.ionic4とcapacitorでgps取得|10.ionic4とcapacitorでgps取得]]で現在地の緯度と経度を取得することができました。 次は、1分おきに緯度と経度を取得して、1分で移動した距離を計算し、総移動距離を表示したいと思います。 (localstorageなどに保存しない場合は、アプリを閉じると距離はクリアされてしまいます。) ===== 2点間の距離の計算（緯度と経度） ===== 現在地の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; } } ===== setInterval ===== 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個ふか。 ===== 緯度経度から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日 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)); } ===== Vue.jsとsetInterval ===== これからはじめるVue.js実践入門p37によると、setIntervalメソッドの配下では、thisは、Vueインスタンスではなく、グローバルオブジェクト(window)に変化してしまうため、あらかじめthatなどで固定しておく必要があるとのことです。 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: { } } これからはじめるVue.js実践入門p37 ===== 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|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]]