00.ionic4:11.ionicとleafletで地図表示
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
00.ionic4:11.ionicとleafletで地図表示 [2019/08/31] – [新規Ionic4アプリ作成] adash333 | 00.ionic4:11.ionicとleafletで地図表示 [2019/09/01] – [CapacitorのGeolocationを用いて現在地を表示] adash333 | ||
---|---|---|---|
行 12: | 行 12: | ||
How to add Leaflet Map in Ionic -4 or Angular | How to add Leaflet Map in Ionic -4 or Angular | ||
+ | https:// | ||
+ | @uedayou | ||
+ | 2018年07月09日に更新 | ||
+ | Angular6とLeafletで地図を表示する | ||
行 53: | 行 56: | ||
C:/ | C:/ | ||
+ | 後で、CapacitorのGeolocationを利用したいので、'' | ||
5分くらいかかります。 | 5分くらいかかります。 | ||
行 72: | 行 76: | ||
</ | </ | ||
- | {{: | + | {{: |
- | + | ||
- | {{: | + | |
いったん、Ctrl+C => y + Enter でサーバを停止します。 | いったん、Ctrl+C => y + Enter でサーバを停止します。 | ||
+ | さらに、VisualStudioCodeを閉じます。 | ||
+ | ===== leafletのインストールと初期設定 ===== | ||
+ | アプリに地図表示ライブラリであるleaflet.jsをインストールします。 | ||
+ | C:/ | ||
+ | < | ||
+ | npm install leaflet --save | ||
+ | </ | ||
+ | {{: | ||
+ | angular.json の | ||
+ | < | ||
+ | " | ||
+ | " | ||
+ | </ | ||
+ | の最後のところに、以下のように追加します。 | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | ===== Tabテンプレートの設定 ===== | ||
+ | Ctrl+@で ionic serveして開発サーバを起動しておきます。 | ||
+ | |||
+ | src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | ===== 地図の表示(tab1.page.html) ===== | ||
+ | |||
+ | Tab1でLeafletを用いて地図を表示します。 | ||
+ | |||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | この時点でのソースコード | ||
+ | https:// | ||
+ | |||
+ | ===== @types/ | ||
+ | なぜかアイコンが表示されないので、https:// | ||
+ | |||
+ | |||
+ | < | ||
+ | npm install @types/ | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | angular.jsonの設定(参考:[[https:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== CapacitorのGeolocationを用いて現在地を表示 ===== | ||
+ | 通常のhtmlファイルであれば、Chromeなどのブラウザに付属しているGeolocation APIを用いればよいらしいのですが、今回はCapacitorのGeolocationというものを用います。 | ||
+ | |||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | を見ながらいろいろやったのですが、うまくアイコンを表示することができなかったので、結局、以下の方法で行いました。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -"" | ||
+ | -"" | ||
+ | -C: | ||
+ | -angular.jsonを編集(assets と styles) | ||
+ | -tab1.page.tsからは以下のように呼び出す | ||
+ | |||
+ | < | ||
+ | import { Component } from ' | ||
+ | import * as L from ' | ||
+ | |||
+ | @Component({ | ||
+ | selector: ' | ||
+ | templateUrl: | ||
+ | styleUrls: [' | ||
+ | }) | ||
+ | export class Tab1Page { | ||
+ | map: any; | ||
+ | |||
+ | ionViewDidEnter() { | ||
+ | // 地図表示 | ||
+ | this.map = L.map(' | ||
+ | L.tileLayer(' | ||
+ | attribution: | ||
+ | }).addTo(this.map); | ||
+ | L.marker([35.685988, | ||
+ | icon: L.icon({ | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | }) | ||
+ | | ||
+ | } | ||
+ | |||
+ | /** Remove map when we have multiple map object */ | ||
+ | ionViewWillLeave() { | ||
+ | this.map.remove(); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | {{: | ||
===== リンク ===== | ===== リンク ===== |
00.ionic4/11.ionicとleafletで地図表示.txt · 最終更新: 2019/09/03 by adash333