基於ionic+angulajs的混合開發實現地鐵APP

時間 2019-11-08

標籤基於 ionic+angulajs ionic angulajs 混合開發實現地鐵 app 简体版

原文原文鏈接

基於ionic+angulajs的混合開發實現地鐵APPcss

注：本博文爲博主原創，轉載時請註明出處。html

項目源碼地址：https://github.com/zhangxy1035/SubwayMapandroid

　　　　1、項目簡介ios

　　　　在該項目中的地鐵app是基於ionic+angularjs開發的一款軟件，其中使用了高德地圖的開放接口（地鐵JS API）網址爲：http://lbs.amap.com/api/subway-api/subway-summary/。在該app中主要實現了，地鐵線路圖的總體展現，起點終點設置，界面清空，線路查詢，出發地與目的地線路查詢等功能。本博文適合對ionic1有必定了解的人學習實踐。具體能夠參照ionic學習中文網址http://www.ionic.wang/git

　　　　2、項目演示angularjs

　　　　項目中的界面風格整體比較清爽，界面以下：（以北京地鐵爲例）github

　　　　在上述圖片中依次是，地鐵圖展現，起點終點設置，線路查詢，以及出發地目的地查詢。 web

　　　　3、項目構建apache

　　　　因爲本項目所用的是ionic1，因此必須瞭解，ionic是如何建立項目的。gulp

　　　　首先在本身的電腦上必須安裝ionic，而後到本身的項目目錄下（以建立項目名稱爲subway爲例），在cmd中運行以下命令

　　　　ionic start subway　　　　//建立名稱爲subway的項目

　　　　cd subway　　　　　　　　//進入subway目錄下

　　　　ionic platfrom add android　　//添加android平臺

　　　　ionic build android　　　　　　//在該平臺下進行編譯（提示一點，首次能夠進行編譯，可是當你每次修改完項目中的www文件時須要從新進行編譯。）

　　　　項目的目錄以下圖：

　　　　其中www文件夾下，存儲的爲項目中的主要代碼，包括css，js，html等。接下來爲你們逐一介紹，每一個文件夾以及重要的函數說明：（在這個項目中，博主start了一個新的ionic項目，其中的文件名稱都是沒有改過的，屬於ionic 默認的tab佈局以及tab中的文件名稱。）這個www文件直接能夠再本項目源碼中下載查看。

　　　　index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 6   <title></title>
 7 
 8   <link href="lib/ionic/css/ionic.css" rel="stylesheet">
 9   <link href="css/style.css" rel="stylesheet">
10 
11   <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
12   <link href="css/ionic.app.css" rel="stylesheet">
13   -->
14   <!--<script src="http://webapi.amap.com/js/marker2.js"></script>-->
15   <script src="http://webapi.amap.com/subway?v=1.0&key=你的key&callback=cbk"></script>
16 
17   <!-- ionic/angularjs js -->
18   <script src="lib/ionic/js/ionic.bundle.js"></script>
19 
20   <!-- cordova script (this will be a 404 during development) -->
21   <!--<script src="cordova.js"></script>-->
22 
23   <!-- your app's js -->
24   <script src="js/app.js"></script>
25   <script src="js/controllers.js"></script>
26   <script src="js/services.js"></script>
27 </head>
28 <body ng-app="starter">
29 <!--
30   The nav bar that will be updated as we navigate between views .
31 -->
32 <ion-nav-bar class="bar-positive bar-footer">
33 
34 </ion-nav-bar>
35 <!--
36   The views will be rendered in the <ion-nav-view> directive below
37   Templates are in the /templates folder (but you could also
38   have templates inline in this html file if you'd like).
39 -->
40 <ion-nav-view></ion-nav-view>
41 <ion-nav-back-button>
42 </ion-nav-back-button>
43 </body>
44 </html>

View Code

　　　　其中在代碼中有一個須要寫入高德開發者的key，代碼以下：

　　　　其中的cbk能夠進行修改，可是須要與js中引入的函數名稱保持一致。

　　　　具體key如何申請，請查看網站高德開發者接口文檔：http://lbs.amap.com/

　　　　接下來在以下圖所示的文件中，代碼中涉及了angularjs的雙向綁定，以及如何引入高德的map等。

　　　　app.js

  1 // Ionic Starter App
  2 
  3 // angular.module is a global place for creating, registering and retrieving Angular modules
  4 // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
  5 // the 2nd parameter is an array of 'requires'
  6 // 'starter.services' is found in services.js
  7 // 'starter.controllers' is found in controllers.js
  8 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  9   // .constant("CONFIG",{
 10   //   host: "",//地址
 11   //   version:'1.0.0'//版本
 12   // })
 13 
 14 .run(function($ionicPlatform) {
 15   $ionicPlatform.ready(function() {
 16     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
 17     // for form inputs)
 18     if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
 19       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
 20       cordova.plugins.Keyboard.disableScroll(true);
 21 
 22     }
 23     if (window.StatusBar) {
 24       // org.apache.cordova.statusbar required
 25       StatusBar.styleDefault();
 26     }
 27   });
 28 })
 29 
 30   .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
 31 
 32     $ionicConfigProvider.platform.ios.tabs.style('standard');
 33     $ionicConfigProvider.platform.ios.tabs.position('bottom');
 34     $ionicConfigProvider.platform.android.tabs.style('standard');
 35     $ionicConfigProvider.platform.android.tabs.position('standard');
 36 
 37     $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
 38     $ionicConfigProvider.platform.android.navBar.alignTitle('left');
 39 
 40     $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
 41     $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
 42 
 43     $ionicConfigProvider.platform.ios.views.transition('ios');
 44     $ionicConfigProvider.platform.android.views.transition('android');
 45 
 46 
 47     // Ionic uses AngularUI Router which uses the concept of states
 48     // Learn more here: https://github.com/angular-ui/ui-router
 49     // Set up the various states which the app can be in.
 50     // Each state's controller can be found in controllers.js
 51     $stateProvider
 52 
 53     // setup an abstract state for the tabs directive
 54       .state('tab', {
 55         url: "/tab",
 56         abstract: true,
 57         templateUrl: "templates/tabs.html"
 58       })
 59 
 60       // Each tab has its own nav history stack:
 61 
 62       .state('tab.dash', {
 63         url: '/dash',
 64         views: {
 65           'tab-dash': {
 66             templateUrl: 'templates/tab-dash.html',
 67             controller: 'DashCtrl'
 68           }
 69         }
 70       })
 71 
 72       .state('tab.chats', {
 73         url: '/chats',
 74         views: {
 75           'tab-chats': {
 76             templateUrl: 'templates/tab-chats.html',
 77             controller: 'ChatsCtrl'
 78           }
 79         }
 80       })
 81       .state('tab.chat-detail', {
 82         url: '/chats/:chatId',
 83         views: {
 84           'tab-chats': {
 85             templateUrl: 'templates/chat-detail.html',
 86             controller: 'ChatDetailCtrl'
 87           }
 88         }
 89       })
 90 
 91       .state('tab.account', {
 92         url: '/account',
 93         views: {
 94           'tab-account': {
 95             templateUrl: 'templates/tab-account.html',
 96             controller: 'AccountCtrl'
 97           }
 98         }
 99       });
100 
101     // if none of the above states are matched, use this as the fallback
102     $urlRouterProvider.otherwise('/tab/dash');
103 
104   });

View Code

　　　　在此說明一點，在實際開發過程當中home-tab可能會出現的頂部，解決的辦法，就是將上述app代碼中的.config中的代碼進行復制，就不會出現這種問題。

　　　　controller.js

 1 angular.module('starter.controllers', [])
 2 
 3 .controller('DashCtrl', function($scope) {
 4   var mysubway='';
 5   window.cbk = function(){
 6     mysubway = subway("mysubway",{
 7       easy: 1,
 8       adcode: '1100'
 9     });
10 
11     mysubway.event.on("subway.complete", function () {
12       // mysubway.addInfoWindow('南鑼鼓巷');
13       var center = mysubway.getStCenter('南鑼鼓巷');
14       mysubway.setCenter(center);
15     });
16     $scope.subwaycle = function () {
17       mysubway.clearInfoWindow();
18       mysubway.clearRoute();
19     }
20 
21     console.log(mysubway);
22   };
23 
24 
25 
26 })
27 
28 .controller('ChatsCtrl', function($scope) {
29   window.cbk = function(){
30     var mysubway = subway("mysubway",{
31       easy: 1,
32       adcode: '1100'
33     });
34     $scope.subwayserch={
35       sub:''
36     };
37 
38     mysubway.event.on("subway.complete", function () {
39       // var id = mysubway.getIdByName('8號線', 'line');
40       mysubway.showLine($scope.subwayserch.sub);
41       var $select_obj = document.getElementById('g-select');
42       // mysubway.setFitView($select_obj);
43       var center = mysubway.getSelectedLineCenter();
44       mysubway.setCenter(center);
45 
46     });
47   $scope.subways = function(){
48     mysubway.clearInfoWindow();
49     mysubway.clearRoute();
50     mysubway.showLine($scope.subwayserch.sub);
51     var center = mysubway.getSelectedLineCenter();
52     mysubway.setCenter(center);
53   };
54     console.log(mysubway);
55   };
56 
57 })
58 
59 .controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
60   $scope.chat = Chats.get($stateParams.chatId);
61 })
62 
63 .controller('AccountCtrl', function($scope) {
64   window.cbk = function(){
65     var mysubway = subway("mysubway",{
66       easy: 1,
67       adcode: '1100000'
68     });
69   $scope.person={
70     start:'北土城',
71     end:'天安門西'
72   }
73     $scope.start='北土城';
74     $scope.end='天安門西';
75     mysubway.event.on("subway.complete", function () {
76 
77       mysubway.setStart($scope.person.start);
78       mysubway.setEnd($scope.person.end);
79 
80       mysubway.route($scope.start, $scope.person.end, {
81         closeBtn: true
82       });
83       $scope.changeSE = function () {
84         mysubway.setStart($scope.person.start);
85         mysubway.setEnd($scope.person.end);
86         mysubway.route($scope.person.start, $scope.person.end, {
87           closeBtn: true
88         });
89       }
90     });
91   };
92 
93 });

　　　　tab-dash.html

1 <ion-view view-title="地鐵圖">
2   <div style="position:absolute;z-index: 1">
3     <div id="mysubway" style="width:auto;height: auto"></div>
4     <div style="margin-top:27rem;margin-right:5rem;position:absolute;z-index:1000">
5       <button class="button button-positive " ng-click="subwaycle()" ><b>清除</b></button>
6     </div>
7   </div>
8 </ion-view>

　　　　tab-dash.html頁面對應的是controller中的DashCtrl，這個頁面中所定的需求主要是項目演示中的1圖所示，能夠進行起點終點的設置，而且在頁面移動地鐵圖時，圖上的「清除」按鈕不會移動，當點擊按鈕以後，會直接清除地圖上的全部路徑設置，主要控制的代碼爲： mysubway.clearInfoWindow(); mysubway.clearRoute();這兩個函數分別是清除信息窗口，清除路徑。在頁面設置上，爲了使得按鈕不會根據地圖的移動而移動，設置了一個z-index，層級設置能夠很好的對頁面進行控制。

　　　　接下來再介紹一下項目中的出發地與目的地查詢界面。頁面代碼以下：

　　　　tab-account.html

 1 <ion-view view-title="歸去來兮">
 2   <div style="position:absolute;z-index: 1">
 3     <div id="mysubway" style="width:auto;height: auto"></div>
 4     <div style="margin-top:3rem;margin-right:20rem;position:absolute;z-index:1000;">
 5         <input type="text" ng-model="person.start" style="color: #4d4d4d"  placeholder="起點">
 6         <input type="text" ng-model="person.end"  placeholder="終點">
 7       <button class="button  button-positive " ng-click="changeSE()" ><b>確認</b></button>
 8     </div>
 9   </div>
10 </ion-view>

　　　　其中tab-account.html頁面的控制器是AccountCtrl，在controller的代碼中

　　　　mysubway.setStart($scope.person.start);//設置起點
　　　　mysubway.setEnd($scope.person.end);//設置終點

　　　　mysubway.route($scope.start, $scope.person.end, {closeBtn: true});//根據所設置的起點終點繪製路線。

　　　　controlle.js中的代碼比較重要，其中包含了如何顯示地圖，以及如何控制雙向綁定，在這裏給你們提醒一點，angularjs的雙向綁定有時候會莫名其妙的出現問題，用下面這種方法就能夠很好的避免，頁面中引用的時候{{subwayserch.sub}},或者ng-model=subwayserch.sub,這樣便不會出現問題。

1  $scope.subwayserch={
2        sub:''
3     };

　　　　4、項目總結

　　　　就本項目而言，只是實現了較少的功能，具體的能夠參考高德的開發接口。根據開發接口在本項目的基礎上能夠實現更多的功能。看到本博文感興趣的快去實踐吧。參考資料以下：ionic學習網站：http://www.ionic.wang/，高德開發者接口網站：http://lbs.amap.com/

1. 混合APP開發基礎
2. 混合app開發
3. 混合 APP 開發(Hybrid App)
4. app混合開發基本理論
5. 基於騰訊X5內核的混合APP開發模式
6. 混合app開發介紹
7. Hybird App混合開發
8. vue+cordova混合開發app
9. vue+cordova開發混合app
10. Android App混合開發
更多相關文章...
• Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
• XSD 混合內容 - XML Schema 教程
• ☆基於Java Instrument的Agent實現
• PHP開發工具

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。