WordPressでフリーオリジナルフォントWordPressでフリーオリジナルフォントWebフォント作成から利用までホームサイトマップサンプルページMenuSidebarPrevNextSearchRSSFeedlyホーム>Ionic4スポンサーリンクIonic4とleaflet.jsとOpenStreetMapで現在位置を地図で表示するPWAを作成してみる2019年9月1日TwitterFacebookGoogle+LinkedInPocket前回はVue.jsで現在地を地図表示してみました。Vue.jsとleaflet.jsとOpenStreetMapで現在位置を地図で表示するPWAを作成してみる今回は、同じことをIonic4でやってみたいと思います。5秒おきに現在位置を更新してマーカーと地図を移動する→うまくいかず。CLIをインストールしています。フォルダをVisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力します。後で、CapacitorのGeolocationを利用したいので、--capacitorオプションをつけておきます。5分くらいかかります。Ionic(Angular)のデメリットは、アプリ新規作成時の時間が5分くらいと非常に長いことにあります。(Vueだと1分くらいの印象です。--capacitor次に以下を入力して、一旦、Ionic4アプリを起動してみます。VisualStudioCodeを閉じます。地図表示ライブラリであるLeaflet.jsを、以下の流れでインストールします。フォルダをVisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力します。--save-devこちらを参考に、angular.jsonを変更します。フォルダにコピー&ペーストします。serveして開発サーバを起動しておきます。(変更前)(変更後)地図の表示(tab1.page.html)Tab1でLeafletを用いて地図を表示します。}}(変更前)(変更後)今回は用いませんでしたが、@asymmetrik/ngx-leafletを用いる方法の方が、Leaflet公式ドキュメント(英語)のExample通りにコードを書くことができるので、便利かもしれません。“と記載して、下の方で”map.xxx”と記載するような感じになります。ここまでのコードhttps://github.com/adash333/ionic4-leaflet-map-gps2/tree/8cb1602b081cb328d1b0f2be9c3cad8631f9a519現在の緯度経度を表示(tab2.page.html)CapacitorのGeolocationを用いて現在の緯度経度を表示します。以下のように編集します。以下のように編集します。}}(変更前)(変更後)5秒おきに現在位置を更新してマーカーと地図を移動する→うまくいかず。書き換えて、5秒おきに現在値を更新するようにしてみます。}いろいろやったのですが、マーカーを表示することができませんでした。Apps)を写経してみる(2)ルーティングとフォームSencil.js入門のために写経しているビットコイン価格表示アプリ。...Ionic4+Firebaseでパスワード制限つきチャットアプリ(1)以前、Ionic3でtryしたことがあった。...Ionic4+Firebaseでパスワード制限つきチャットアプリ(2)AngularのngForでチャットコメントを実装する前回は、チャット画面を作成ました。...StencilでTODOアプリの写経にtryしてみるが、Createしかできず。なんだか右往左往しているが、とりあえず、Stencilを触ってみたくなった。...Ionic4とCapacitorでCameraを使いたい(3回目のtry)2018年10月現在、何回tryしようとしてもうまくいかない。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。