差分

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

--- 00.ionic4:11.ionicとleafletで地図表示 [2019/08/31] – [地図の表示(tab1.page.html)] adash333
+++ 00.ionic4:11.ionicとleafletで地図表示 [2019/09/03] (現在) – [リンク] adash333
@@ 行 12: / 行 12: @@
 How to add Leaflet Map in Ionic -4 or Angular
+https://qiita.com/uedayou/items/30f88d88238f648e8ee6
+@uedayou
+年07月09日に更新
+Angular6とLeafletで地図を表示する
@@ 行 119: / 行 122: @@
 {{:00.ionic4:pasted:20190831-224832.png}}
-src/app/tab1/tab1.page.ts [[https://github.com/adash333/ionic4-leaflet-map-gps/blob/65a5a6ea888867c51cf1e3452bdca0bbdade1345/src/app/tab1/tab1.page.ts|ソースコード]]）
+src/app/tab1/tab1.page.ts（[[https://github.com/adash333/ionic4-leaflet-map-gps/blob/65a5a6ea888867c51cf1e3452bdca0bbdade1345/src/app/tab1/tab1.page.ts|ソースコード]]）
 （変更前）
 {{:00.ionic4:pasted:20190831-224928.png}}
@@ 行 127: / 行 130: @@
 この時点でのソースコード
 https://github.com/adash333/ionic4-leaflet-map-gps/tree/65a5a6ea888867c51cf1e3452bdca0bbdade1345
+===== @types/leafletを--save-devでインストールしてアイコンを表示 =====
+なぜかアイコンが表示されないので、https://qiita.com/uedayou/items/30f88d88238f648e8ee6　を参考に以下のようにやってみます。
+<code>
+npm install @types/leaflet --save-dev
+</code>
+{{:00.ionic4:pasted:20190901-002348.png}}
+angular.jsonの設定(参考：[[https://qiita.com/uedayou/items/30f88d88238f648e8ee6#%E5%9C%B0%E5%9B%B3%E8%A1%A8%E7%A4%BA|こちらのコード]])
 ===== CapacitorのGeolocationを用いて現在地を表示 =====
@@ 行 132: / 行 148: @@
+https://qiita.com/spice/items/22811539d3561bd1e73c
+https://qiita.com/uedayou/items/30f88d88238f648e8ee6
+https://github.com/Asymmetrik/ngx-leaflet
+https://www.javascripttuts.com/using-leaflet-open-street-map-in-an-ionic-application-in-one-go/
+を見ながらいろいろやったのですが、うまくアイコンを表示することができなかったので、結局、以下の方法で行いました。
+{{:00.ionic4:pasted:20190901-022812.png}}
+  -""npm install leaflet""
+  -""npm install @types/leaflet --save-dev""
+  -C:\ionic\ionic4-leaflet-map-gps\node_modules\leaflet\dist　から、images/ フォルダを、C:\ionic\ionic4-leaflet-map-gps\src\assets　フォルダにコピー＆ペーストする
+  -angular.jsonを編集（assets と styles）
+  -tab1.page.tsからは以下のように呼び出す
+<code>
+import { Component } from '@angular/core';
+import * as L from 'leaflet';
+@Component({
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss']
+})
+export class Tab1Page {
+  map: any;
+  ionViewDidEnter() {
+    // 地図表示
+    this.map = L.map('map').setView([35.685988,139.753947], 15);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(this.map);
+    L.marker([35.685988,139.753947], {
+      icon: L.icon({
+         iconSize: [ 25, 41 ],
+         iconAnchor: [ 13, 41 ],
+         iconUrl: 'assets/images/marker-icon.png',
+         shadowUrl: 'assets/images/marker-shadow.png'
+      })
+   }).addTo(this.map);
+  }
+  /** Remove map when we have multiple map object */
+  ionViewWillLeave() {
+    this.map.remove();
+  }
+}
+</code>
+{{:00.ionic4:pasted:20190901-015638.png}}
 ===== リンク =====
 前：[[00.ionic4:10.ionic4とcapacitorでgps取得|10.ionic4とcapacitorでgps取得]]
-次：
+次：[[00.ionic4:11.緯度経度から歩いた距離を表示|00.ionic4:11.緯度経度から歩いた距離を表示]]
 目次：[[00.ionic4:index.html|スマホ用ホームページ&amp;スマホアプリ作成ソフトIonic4]]