Ionic Tutorial

import { DataService } from './../_service/data.service';
import { Component } from '@angular/core';
import { Place } from '../_models/place';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  places: Place[];

  constructor(private ds: DataService) {
    this.places = ds.getPlaces();
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      Open Street Map
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let place of places" [routerLink]="['/detail', {id:place.pid} ]">
      <ion-label>{{ place.title }}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { OsmapComponent } from './osmap/osmap.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [ OsmapComponent ],
  imports: [
    CommonModule,
    LeafletModule
  ],
  exports: [
    OsmapComponent
  ]
})
export class SharedModule { }

import { Component, OnInit, Input } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet-routing-machine';

@Component({
  selector: 'app-osmap',
  templateUrl: './osmap.component.html',
  styleUrls: ['./osmap.component.scss'],
})
export class OsmapComponent implements OnInit {
  @Input() place?: L.LatLng; // 輸入參數:經緯度
  @Input() height?: string;  // 輸入參數: 地圖的高度

  options: any;
  map: L.Map;
  streetMap: L.TileLayer;
  marker: L.Marker;

  constructor() { }

  ngOnInit() {
    console.log(this.place);
    this.showMap();
  }

  showMap() {
    if (this.place === undefined) {
      this.place = new L.LatLng(25.1769173, 121.4351497);
    }

    if (this.height !== undefined) {
      console.log('高度:', this.height);
      this.setHeight(this.height + 'px');
    }

    this.streetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap'
    });
    
    const center = this.place;
    this.marker = L.marker(center, {
      icon: L.icon({
        iconSize: [25, 41],
        iconAnchor: [13, 41],
        iconUrl: 'assets/marker-icon.png',
        shadowUrl: 'assets/marker-shadow.png'
      })
    });
    this.options = {
      layers: [this.streetMap, this.marker],
      zoom: 12,
      center
    };
  }

  onMapReady(map: L.Map) {
    this.map = map;
    console.log('osmap', map);
    setTimeout(() => { this.map.invalidateSize(); }, 100);
  }

  setHeight(height: string) {
    const osmap = document.getElementById('osmap');

    osmap.setAttribute('style', 'width:100%; height:' + height);
  }

  setPlace(pos: L.LatLng) {
    console.log(pos);
    this.marker.setLatLng(pos);
    this.map.panTo(pos);
  }

  getRoute(source: L.LatLng, dest: L.LatLng) {
    L.Routing.control({
      waypoints: [source, dest],
      routeWhileDragging: true,
      show: false,
    }).addTo(this.map);

    // L.Routing.itinerary({pointMarkerStyle: {radius: 5, color: '#03f', fillColor: 'white', opacity: 1, fillOpacity: 0.7}});

  }
}

<div id="osmap" class="osmap" 
leaflet [leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
>

.osmap {
    width: 100%;
}

import { SharedModule } from './../shared/shared.module';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { DetailPage } from './detail.page';

const routes: Routes = [
  {
    path: '',
    component: DetailPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LeafletModule,
    SharedModule,
    RouterModule.forChild(routes)
  ],
  declarations: [DetailPage]
})
export class DetailPageModule {}

import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data.service';
import { Place } from '../models/place';

import * as L from 'leaflet';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {
  place: Place;       // 景點資料
  position: L.LatLng; // 景點的經緯度

  constructor(private route: ActivatedRoute, private ds: DataService) {
    const id = this.route.snapshot.paramMap.get('id');    // 接收參數
    this.place = this.ds.getPlace(id);         // 取得景點資料
    // 建立景點的經緯度, 用於HTML頁面當作參數
    this.position = new L.LatLng(this.place.location.lat, this.place.location.lng); 
    console.log(this.place);
   }

  ngOnInit() {
  }

}

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{ place.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>{{ place.address }}</ion-card-subtitle>
      <ion-card-title>{{ place.title }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>{{ place.intro }}</p>
      <app-osmap [place]="position" [height]="'300'"></app-osmap>
    </ion-card-content>
  </ion-card>
</ion-content>

import { SharedModule } from './../shared/shared.module';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Tab2Page } from './tab2.page';
import { AutoCompleteModule } from 'ionic4-auto-complete';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    LeafletModule,
    SharedModule,
    AutoCompleteModule,
    RouterModule.forChild([{ path: '', component: Tab2Page }])
  ],
  declarations: [Tab2Page]
})
export class Tab2PageModule {}

import { Geolocation } from '@ionic-native/geolocation/ngx';
import { OsmapComponent } from '../shared/osmap/osmap.component';
import { Component, ViewChild, AfterContentInit, ElementRef } from '@angular/core';

import * as L from 'leaflet';
import { FormControl } from '@angular/forms';
import { DataService } from '../services/data.service';
import { AutoCompleteOptions } from 'ionic4-auto-complete';
import { Place } from '../models/place';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements AfterContentInit {
  @ViewChild(OsmapComponent) osmap: OsmapComponent;
  @ViewChild('searchbar') searchbar: ElementRef;
  place: L.LatLng;
  height = '100%';
  searchControl: FormControl; // 搜尋框內容
  public selected: any = '';

  // @ts-ignore
  public options: AutoCompleteOptions = {
    autocomplete: 'off',
    debounce: 750,
    placeholder: '搜尋..',
    type: 'search'
  };

  constructor(public ds: DataService, private geo: Geolocation) {
    this.searchControl = new FormControl();
    this.geo.getCurrentPosition((resp) => {
      this.place = new L.LatLng(resp.coords.latitude, resp.coords.longitude);
      console.log('current position:', this.place);
      this.osmap.setPlace(this.place);
    });
  }

  ngAfterContentInit() {
    this.osmap.setHeight(this.height);
  }

  onSearchChange(event: any) {
    console.log(event);
  }

  itemChanged(pos: Place) {
    const dest = new L.LatLng(pos.location.lat, pos.location.lng);
    this.osmap.getRoute(this.place, dest);
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      路徑規劃
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid fixed>
    <ion-row>
      <ion-col size="3">目的地:</ion-col>
      <ion-col size="9">
        <ion-auto-complete [(model)]="selected" [dataProvider]="ds" [options]="options" (itemsChange)="itemChanged($event)">
        </ion-auto-complete>
      </ion-col>
    </ion-row>
  </ion-grid>

  <app-osmap [place]="place"></app-osmap>
</ion-content>