Command prompt check npm module version
1 |
npm -v |
Command prompt check ionic version
1 |
ionic -v |
Command prompt npm update global
1 |
sudo npm update -g |
Command prompt date ionic cli global
1 |
npm update -g ionic |
Command prompt create new project
1 |
ionic start geomap blank |
Command prompt install geolocation plugin
1 |
ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you" |
1 |
npm install --save @ionic-native/geolocation |
Home.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<ion-header> <ion-navbar> <ion-title> Geolocation Test 3 </ion-title> </ion-navbar> </ion-header> <ion-content padding> <p>Latitude: {{ lat }}</p> <p>Longitude: {{ lng }}</p> </ion-content> |
Home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import { Component } from '@angular/core'; import { Geolocation } from '@ionic-native/geolocation'; import { NavController, Platform } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { lat: any; lng: any; constructor(public platform: Platform, public navCtrl: NavController, public geo: Geolocation) { platform.ready().then(() => { this.initMap(); }); } ionViewDidLoad(){ // this.geo.getCurrentPosition().then( pos => { // this.lat = pos.coords.latitude; // this.lng = pos.coords.longitude; // }).catch( err => console.log(err) ); } initMap(){ this.geo.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then( pos => { this.lat = pos.coords.latitude; this.lng = pos.coords.longitude; }).catch( err => console.log(err) ); let watch = this.geo.watchPosition({ enableHighAccuracy: true, timeout: 7000, maximumAge: 0 }); watch.subscribe((data) => { //this.deleteMarkers(); //let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude); //let image = 'assets/imgs/blue-bike.png'; //this.addMarker(updatelocation,image); //this.setMapOnAll(this.map); this.lat = data.coords.latitude; this.lng = data.coords.longitude; }); } } |
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { Geolocation } from '@ionic-native/geolocation'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, Geolocation, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} |
config.xml
1 2 3 4 |
<preference name="FadeSplashScreenDuration" value="300" /> <preference name="SplashShowOnlyFirstTime" value="false" /> <preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="3000" /> |
1 2 3 |
<config-file overwrite="true" parent="NSLocationWhenInUseUsageDescription" platform="ios" target="*-Info.plist"> <string>Allow the app to know your location</string> </config-file> |
Run apps on device
1 |
ionic cordova run android |
Reference
https://ionicframework.com/docs/v1/guide/testing.html
https://ionicframework.com/docs/native/geolocation/
https://github.com/apache/cordova-plugin-geolocation
https://www.npmjs.com/package/cordova-plugin-geolocation
https://techionichybride.blogspot.my/2017/09/how-to-reduce-white-screen-after-splash.html
Xcode 7.3.1 with iOS 10 support
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import { Component, ViewChild, ElementRef} from '@angular/core'; import { NavController, Platform } from 'ionic-angular'; import { Geolocation } from '@ionic-native/geolocation' declare var google: any; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { @ViewChild('map') mapElement: ElementRef; map: any; lat: any; lng: any; markers = []; marker : any; constructor(public navCtrl: NavController, public geo: Geolocation, public platform: Platform) { platform.ready().then(()=>{ this.initMap(); }); } initMap(){ //get the latest object position this.geo.getCurrentPosition( { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true } ).then( pos => { this.lat = pos.coords.latitude; this.lng = pos.coords.longitude; let mylocation = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude); this.map = new google.maps.Map(this.mapElement.nativeElement, { zoom: 21, center: mylocation }); } ).catch( err => { console.log( err ); }); //watch if object move let watch = this.geo.watchPosition({ enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }); watch.subscribe((data) => { this.lat = data.coords.latitude; this.lng = data.coords.longitude; this.deleteMarkers(); //this.marker.setMap(null); let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude); let image = 'http://maps.google.com/mapfiles/ms/icons/truck.png'; //this.map.setCenter({"lat": this.lat, "lng": this.lng}); this.addMarker(updatelocation,image); this.setMapOnAll(this.map); }); } addMarker(location, image) { let marker = new google.maps.Marker({ position: location, map: this.map, icon: image }); //this.map.setCenter(location); this.markers.push(marker); } setMapOnAll(map) { for (var i = 0; i < this.markers.length; i++) { this.markers[i].setMap(map); } } clearMarkers() { this.setMapOnAll(null); } deleteMarkers() { this.clearMarkers(); this.markers = []; } }//close class |