基于ionic+angulajs的混合开发实现地铁APP
注：本博文为博主原创，转载时请注明出处。
项目源码地址：https://github.com/zhangxy1035/SubwayMap
一、项目简介
在该项目中的地铁app是基于ionic+angularjs开发的一款软件，其中使用了高德地图的开放接口（地铁JS API）网址为：http://lbs.amap.com/api/subway-api/subway-summary/。在该app中主要实现了，地铁线路图的整体展示，起点终点设置，界面清空，线路查询，出发地与目的地线路查询等功能。本博文适合对ionic1有一定了解的人学习实践。具体可以参照ionic学习中文网址http://www.ionic.wang/
二、项目演示
项目中的界面风格总体比较清爽，界面如下：（以北京地铁为例）
在上述图片中依次是，地铁图展示，起点终点设置，线路查询，以及出发地目的地查询。
三、项目构建
由于本项目所用的是ionic1，所以必须了解，ionic是如何创建项目的。
首先在自己的电脑上必须安装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>
其中在代码中有一个需要写入高德开发者的key，代码如下：
<script src="http://webapi.amap.com/subway?v=1.0&key=你的key&callback=cbk"></script>
其中的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 });
在此说明一点，在实际开发过程中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 };
四、项目总结
就本项目而言，只是实现了较少的功能，具体的可以参考高德的开发接口。根据开发接口在本项目的基础上可以实现更多的功能。看到本博文感兴趣的快去实践吧。参考资料如下：ionic学习网站：http://www.ionic.wang/，高德开发者接口网站：http://lbs.amap.com/
扫一扫
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
