00.ionic4:10.ionic4とcapacitorでgps取得

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 00.ionic4:10.ionic4とcapacitorでgps取得 [2019/08/28] – [(オプション)Add to HomeScreenボタンの追加] adash333
+++ 00.ionic4:10.ionic4とcapacitorでgps取得 [2019/09/01] (現在) – [tab1.page.tsの編集] adash333
@@ 行 1: / 行 1: @@
 ====== 10.ionic4とcapacitorでgps取得 ======
  ---//2019/08/28 更新//
+Vue.jsとOpenstreetMapを用いた方法を記載させて頂きました。
+→[[https://i-doctor.sakura.ne.jp/font/?p=40732|Vue.jsとleaflet.jsとOpenStreetMapで現在値を地図表示するPWAを作成してみる]]
 以下のサイトを写経してみたいと思います。
@@ 行 61: / 行 64: @@
 src/app/tab1/tab1.page.html を以下のように編集します。
+<code html>
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Coordinates</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <ion-item>Latitude: {{ latitude }}</ion-item>
+    <ion-item>Longitude: {{ longitude }}</ion-item>
+  </ion-card-content>
+</ion-card>
+</code>
 （変更前）
@@ 行 71: / 行 87: @@
 src/app/tab1/tab1.page.ts を以下のように編集します。
+<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>
 （変更前）
@@ 行 247: / 行 284: @@
 http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:09.ionic4%E3%81%A7pwa#%E3%83%A1%E3%83%A2　を参考に、Add to HomeScreenボタンを追加します。
-src/app/tab1/tab1.page.html
+[[https://gist.github.com/adash333/879641b7d021530c163cae4e3e9c502e|src/app/tab1/tab1.page.html]]
 <code>
 // 一部省略
-  <ion-button expand="full" (click)="add_to_home(event)" *ngIf="showBtn">
+  <ion-button expand="full" (click)="add_to_home()" *ngIf="showBtn">
     Install
   </ion-button>
@@ 行 256: / 行 293: @@
 {{:00.ionic4:pasted:20190828-140934.png}}
-src/app/tab1/tab1.page.ts
+[[https://gist.github.com/adash333/879641b7d021530c163cae4e3e9c502e|src/app/tab1/tab1.page.ts]]
 <code>
 // 一部省略
@@ 行 289: / 行 326: @@
   }
-  add_to_home(e){
+  add_to_home(){
     debugger
     // hide our user interface that shows our button
@@ 行 310: / 行 347: @@
 {{:00.ionic4:pasted:20190828-141146.png}}
+インストールボタンができました。
+{{:00.ionic4:pasted:20190828-145604.png}}
@@ 行 349: / 行 389: @@
 ===== リンク =====
+前：[[00.ionic4:09.ionic4でpwa|Ionic4でPWA(Progressive Web Apps)]]
+次：[[00.ionic4:11.IonicとLeafletで地図表示|00.ionic4:11.IonicとLeafletで地図表示]]
 [[00.ionic4:index.html|スマホ用ホームページ&amp;スマホアプリ作成ソフトIonic4]]

00.ionic4/10.ionic4とcapacitorでgps取得.1567001517.txt.gz · 最終更新: 2019/08/28 by adash333