Zgodnie z ustaleniami z poprzedniego wpisu będę stosował się do listy priorytetów. Będę wykonywał wszystko zgodnie z kolejnością i bez wdawania się w szeczegóły estetyczne. Najważniejszy jest cel, upiększanie wszystkiego zostanie zostawione na koniec. Oczywiście nie można generalizować. Mimo wszystko wciąż ważna będzie estetyka kodu i jego możliwości późniejszego utrzymania i modyfikacji.
Geolokalizacja
Posiadając utworzone zakładki na dole ekranu:
Mogę przejść do umieszczenia w głównej części aplikacji mapy googla. Do tego celu posłuzy nam plugin Cordovy dla geolokalizacji.
> cordova platform add cordova-plugin-geolocation --save
Szablonowa aplikacja narzuca mi korzystanie z TypeScript, a ja nie chcę tego za bardzo zmieniać. W kontrolerach napisanych jako klasy przyjmowane wartości są zawsze interfejsami. Są to tak zwane definicje TypeScript. Do każdego pluginu potrzebuję taką definicję. Oficjalne wydanie nie zawiera nic dla pluginu geolokalizacji, na szczęście znalazłem nieoficjalny interfejs (może kiedyś zrozumiem jak napisać go samemu). Załączyłem go w odpowiednim miejscu i zastosowałem w kontrolerze w następujący sposób:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class HomeController { | |
| $injector: ng.auto.IInjectorService; | |
| $cordovaGeolocation: ngCordova.IGeolocationService; | |
| constructor(private $injector:ng.auto.IInjectorService, public $scope:ng.IScope) { | |
| 'ngInject'; | |
| this.$injector = $injector; | |
| this.$scope = $scope; | |
| this.$cordovaGeolocation = this.$injector.get('$cordovaGeolocation'); | |
| this.$scope.$on('$ionicView.enter', () => this.onEnter()); | |
| } | |
| onEnter() { | |
| } | |
| } |
I do tego sprowadziło się załączanie pluginu geolokalizacji z mojej aplikacji.
Mapa
Przyszedł czas na mapę. Głównym punktem startowym było załączenie do do ładowanych skryptów API Google Maps a w kontrolerze modułu Home dodanie DIVa zawierającego mapę:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ion-view> | |
| <ion-nav-title>Home</ion-nav-title> | |
| <ion-content> | |
| <div id="googleMap" data-tap-disabled="true"></div> | |
| </ion-content> | |
| </ion-view> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
| <meta http-equiv="Content-Security-Policy" | |
| content="default-src *; | |
| script-src 'self' 'unsafe-inline' 'unsafe-eval' | |
| 127.0.0.1:* | |
| http://*.google.com | |
| http://*.gstatic.com | |
| http://*.googleapis.com | |
| http://*.firebaseio.com | |
| https://*.google.com | |
| https://*.gstatic.com | |
| https://*.googleapis.com | |
| https://*.firebaseio.com | |
| ; | |
| style-src 'self' 'unsafe-inline' | |
| 127.0.0.1 | |
| http://*.google.com | |
| http://*.gstatic.com | |
| http://*.googleapis.com | |
| http://*.firebaseio.com | |
| https://*.google.com | |
| https://*.gstatic.com | |
| https://*.googleapis.com | |
| https://*.firebaseio.com | |
| "> | |
| <title>{%=o.htmlWebpackPlugin.options.pkg.title %}</title> | |
| <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> | |
| <!-- cordova script (this will be a 404 during development) --> | |
| <script src="cordova.js"></script> | |
| </head> | |
| <body ng-strict-di> | |
| <ion-nav-view></ion-nav-view> | |
| {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} | |
| <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script> | |
| {% } %} | |
| </body> | |
| <!-- {%= o.htmlWebpackPlugin.options.pkg.name + ' v' + o.htmlWebpackPlugin.options.pkg.version + ' built on ' + new Date() %} --> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| onEnter() { | |
| let targetDiv = document.getElementById("googleMap"); | |
| this.$cordovaGeolocation | |
| .getCurrentPosition(<ngCordova.IGeolocationOptions>{timeout: 10000, enableHighAccuracy: false}) | |
| .then((position) => { | |
| console.log("position found"); | |
| this.position = position; | |
| console.log(position); | |
| var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); | |
| var mapOptions = { | |
| center: latLng, | |
| zoom: 15, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }; | |
| this.maps = new google.maps.Map(targetDiv, mapOptions); | |
| console.log('show'); | |
| }, (err) => { | |
| console.log("unable to find location"); | |
| this.errorMsg = "Error : " + err.message; | |
| }); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .scroll { | |
| height: 100%; | |
| } | |
| #googleMap { | |
| width: 100%; | |
| height: 100%; | |
| } |
Aplikacja
W taki oto sposób powstała aplikacja z mapą pokazującą naszą pozycję.
Pierwszy punkt priorytetów MUST wykonany!
Brak komentarzy:
Prześlij komentarz