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;  // 輸入參數: 地圖的高度

  private map!: L.Map
  markers: L.Marker[] = [
    L.marker([25.1769173, 121.4351497])
  ];

  constructor() { }

  ngOnInit() {
    if (this.place === undefined) {
      this.markers = [L.marker([25.1769173, 121.4351497])];
    } else {
      this.markers = [L.marker([this.place.lat, this.place.lng])];
    }
    console.log(this.markers);
    if (this.height !== undefined) {
      console.log('高度:', this.height);
      this.setHeight(this.height + 'px');
    }
  }
  ngAfterViewInit(): void {
    this.initMap();
    this.centerMap();
  }

  setHeight(height: string) {
    const osmap = document.getElementById('osmap');
    if (osmap !== null) {
      osmap.setAttribute('style', 'width:100%; height:' + height);
    }
  }
  private initMap() {
    const baseMapURl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    this.map = L.map('osmap');
    L.tileLayer(baseMapURl).addTo(this.map);
    
  }

  private centerMap() {
    // Create a boundary based on the markers
    const bounds = L.latLngBounds(this.markers.map(marker => marker.getLatLng()));

    // Fit the map into the boundary
    this.map.fitBounds(bounds);
    setTimeout(() => { this.map.invalidateSize(); }, 100);
  }
}

<div id="osmap" class="osmap" style="height: 500px;width: 100%;"></div>

.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');    // 接收參數
    console.log('id:',id);
    if (id!==null) {
      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>