基于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

 View Code

其中在代码中有一个需要写入高德开发者的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

 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 };

四、项目总结

 　　　　就本项目而言，只是实现了较少的功能，具体的可以参考高德的开发接口。根据开发接口在本项目的基础上可以实现更多的功能。看到本博文感兴趣的快去实践吧。参考资料如下：ionic学习网站：http://www.ionic.wang/，高德开发者接口网站：http://lbs.amap.com/

延伸阅读

5 个被忽视的习惯，决定了你很难成为高级开发工程师！-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训5 个被忽视的习惯，决定了你很难成为高级开发工程师！