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

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

   <title></title>

   <link href="lib/ionic/css/ionic.css" rel="stylesheet">

   <link href="css/style.css" rel="stylesheet">

   <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

   <link href="css/ionic.app.css" rel="stylesheet">

   -->

   <!--<script src="http://webapi.amap.com/js/marker2.js"></script>-->

   <script src="http://webapi.amap.com/subway?v=1.0&key=你的key&callback=cbk"></script>

   <!-- ionic/angularjs js -->

   <script src="lib/ionic/js/ionic.bundle.js"></script>

   <!-- cordova script (this will be a 404 during development) -->

   <!--<script src="cordova.js"></script>-->

   <!-- your app's js -->

   <script src="js/app.js"></script>

   <script src="js/controllers.js"></script>

   <script src="js/services.js"></script>

 </head>

 <body ng-app="starter">

 <!--

   The nav bar that will be updated as we navigate between views .

 -->

 <ion-nav-bar class="bar-positive bar-footer">

 </ion-nav-bar>

 <!--

   The views will be rendered in the <ion-nav-view> directive below

   Templates are in the /templates folder (but you could also

   have templates inline in this html file if you'd like).

 -->

 <ion-nav-view></ion-nav-view>

 <ion-nav-back-button>

 </ion-nav-back-button>

 </body>

 </html>

　　　　其中在代码中有一个需要写入高德开发者的key，代码如下：

　　　　其中的cbk可以进行修改，但是需要与js中引入的函数名称保持一致。

　　　　具体key如何申请，请查看网站高德开发者接口文档：http://lbs.amap.com/

　　　　接下来在如下图所示的文件中，代码中涉及了angularjs的双向绑定，以及如何引入高德的map等。

　　　　app.js

 // Ionic Starter App

 // angular.module is a global place for creating, registering and retrieving Angular modules

 // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)

 // the 2nd parameter is an array of 'requires'

 // 'starter.services' is found in services.js

 // 'starter.controllers' is found in controllers.js

 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

   // .constant("CONFIG",{

   //   host: "",//地址

   //   version:'1.0.0'//版本

   // })

 .run(function($ionicPlatform) {

   $ionicPlatform.ready(function() {

     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

     // for form inputs)

     if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {

       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

       cordova.plugins.Keyboard.disableScroll(true);

     }

     if (window.StatusBar) {

       // org.apache.cordova.statusbar required

       StatusBar.styleDefault();

     }

   });

 })

   .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

     $ionicConfigProvider.platform.ios.tabs.style('standard');

     $ionicConfigProvider.platform.ios.tabs.position('bottom');

     $ionicConfigProvider.platform.android.tabs.style('standard');

     $ionicConfigProvider.platform.android.tabs.position('standard');

     $ionicConfigProvider.platform.ios.navBar.alignTitle('center');

     $ionicConfigProvider.platform.android.navBar.alignTitle('left');

     $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');

     $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');

     $ionicConfigProvider.platform.ios.views.transition('ios');

     $ionicConfigProvider.platform.android.views.transition('android');

     // Ionic uses AngularUI Router which uses the concept of states

     // Learn more here: https://github.com/angular-ui/ui-router

     // Set up the various states which the app can be in.

     // Each state's controller can be found in controllers.js

     $stateProvider

     // setup an abstract state for the tabs directive

       .state('tab', {

         url: "/tab",

         abstract: true,

         templateUrl: "templates/tabs.html"

       })

       // Each tab has its own nav history stack:

       .state('tab.dash', {

         url: '/dash',

         views: {

           'tab-dash': {

             templateUrl: 'templates/tab-dash.html',

             controller: 'DashCtrl'

           }

         }

       })

       .state('tab.chats', {

         url: '/chats',

         views: {

           'tab-chats': {

             templateUrl: 'templates/tab-chats.html',

             controller: 'ChatsCtrl'

           }

         }

       })

       .state('tab.chat-detail', {

         url: '/chats/:chatId',

         views: {

           'tab-chats': {

             templateUrl: 'templates/chat-detail.html',

             controller: 'ChatDetailCtrl'

           }

         }

       })

       .state('tab.account', {

         url: '/account',

         views: {

           'tab-account': {

             templateUrl: 'templates/tab-account.html',

             controller: 'AccountCtrl'

           }

         }

       });

     // if none of the above states are matched, use this as the fallback

     $urlRouterProvider.otherwise('/tab/dash');

   });

　　　　在此说明一点，在实际开发过程中home-tab可能会出现的顶部，解决的办法，就是将上述app代码中的.config中的代码进行复制，就不会出现这种问题。

　　　　controller.js

 angular.module('starter.controllers', [])

 .controller('DashCtrl', function($scope) {

   var mysubway='';

   window.cbk = function(){

     mysubway = subway("mysubway",{

       easy: 1,

       adcode: '1100'

     });

     mysubway.event.on("subway.complete", function () {

       // mysubway.addInfoWindow('南锣鼓巷');

       var center = mysubway.getStCenter('南锣鼓巷');

       mysubway.setCenter(center);

     });

     $scope.subwaycle = function () {

       mysubway.clearInfoWindow();

       mysubway.clearRoute();

     }

     console.log(mysubway);

   };

 })

 .controller('ChatsCtrl', function($scope) {

   window.cbk = function(){

     var mysubway = subway("mysubway",{

       easy: 1,

       adcode: '1100'

     });

     $scope.subwayserch={

       sub:''

     };

     mysubway.event.on("subway.complete", function () {

       // var id = mysubway.getIdByName('8号线', 'line');

       mysubway.showLine($scope.subwayserch.sub);

       var $select_obj = document.getElementById('g-select');

       // mysubway.setFitView($select_obj);

       var center = mysubway.getSelectedLineCenter();

       mysubway.setCenter(center);

     });

   $scope.subways = function(){

     mysubway.clearInfoWindow();

     mysubway.clearRoute();

     mysubway.showLine($scope.subwayserch.sub);

     var center = mysubway.getSelectedLineCenter();

     mysubway.setCenter(center);

   };

     console.log(mysubway);

   };

 })

 .controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {

   $scope.chat = Chats.get($stateParams.chatId);

 })

 .controller('AccountCtrl', function($scope) {

   window.cbk = function(){

     var mysubway = subway("mysubway",{

       easy: 1,

       adcode: '1100000'

     });

   $scope.person={

     start:'北土城',

     end:'天安门西'

   }

     $scope.start='北土城';

     $scope.end='天安门西';

     mysubway.event.on("subway.complete", function () {

       mysubway.setStart($scope.person.start);

       mysubway.setEnd($scope.person.end);

       mysubway.route($scope.start, $scope.person.end, {

         closeBtn: true

       });

       $scope.changeSE = function () {

         mysubway.setStart($scope.person.start);

         mysubway.setEnd($scope.person.end);

         mysubway.route($scope.person.start, $scope.person.end, {

           closeBtn: true

         });

       }

     });

   };

 });

　　　　tab-dash.html

 <ion-view view-title="地铁图">

   <div style="position:absolute;z-index: 1">

     <div id="mysubway" style="width:auto;height: auto"></div>

     <div style="margin-top:27rem;margin-right:5rem;position:absolute;z-index:1000">

       <button class="button button-positive " ng-click="subwaycle()" ><b>清除</b></button>

     </div>

   </div>

 </ion-view>

　　　　tab-dash.html页面对应的是controller中的DashCtrl，这个页面中所定的需求主要是项目演示中的1图所示，可以进行起点终点的设置，并且在页面移动地铁图时，图上的“清除”按钮不会移动，当点击按钮之后，会直接清除地图上的所有路径设置，主要控制的代码为： mysubway.clearInfoWindow(); mysubway.clearRoute();这两个函数分别是清除信息窗口，清除路径。在页面设置上，为了使得按钮不会根据地图的移动而移动，设置了一个z-index，层级设置可以很好的对页面进行控制。

　　　　接下来再介绍一下项目中的出发地与目的地查询界面。页面代码如下：

　　　　tab-account.html

 <ion-view view-title="归去来兮">

   <div style="position:absolute;z-index: 1">

     <div id="mysubway" style="width:auto;height: auto"></div>

     <div style="margin-top:3rem;margin-right:20rem;position:absolute;z-index:1000;">

         <input type="text" ng-model="person.start" style="color: #4d4d4d"  placeholder="起点">

         <input type="text" ng-model="person.end"  placeholder="终点">

       <button class="button  button-positive " ng-click="changeSE()" ><b>确认</b></button>

     </div>

   </div>

 </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,这样便不会出现问题。

  $scope.subwayserch={

        sub:''

     };

　　　　四、项目总结

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

基于ionic+angulajs的混合开发实现地铁APP的更多相关文章

ios&h5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
入门移动端混合开发实战京东 APP（完整更新）
课程资料获取链接:点击这里混合开发入门主流开发方案实战京东移动端APP 无需原生开发基础,也能完美呈现京东商城.本课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合开发经典电 ...
ionic+angulajs
基于ionic+angulajs的混合开发实现地铁APP 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一.项目简介在该项目中的地铁app是基于io ...
移动端混合开发----ionic
目前移动端分为三大主流:纯原生.混合开发.web App,随着手机硬件的升级,公司们似乎偏好于web页面开发,而混合开发相对纯web App似乎更受大公司青睐,所谓混合开发俾人理解为,原生代码(iOS ...
移动web、webApp、混合APP、原生APP、androd H5混合开发当无网络下，android怎么加载H5界面
PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...
IOS-Hybrid（混合开发）
http://www.cnblogs.com/oc-bowen/p/5423902.html 1.1. APP三种开发模式智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等 ...
Hybrid APP混合开发的一些经验和总结
http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...
Hybrid APP混合开发
写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~ 1.混合开发概述 Hybrid App主要以JS+Nativ ...
H5混合开发app常用代码
1.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发.然后这个浏览器又封装 ...

随机推荐

Node学习笔记（二）：事件驱动
接触Node,提得最多的可能就是回调,异步非阻塞处理,思前想后,JavaScript从前端语言过渡到服务器端,最大的劣势可能就是线程,当然这方面的不足现在也被慢慢弥补起来了(很多第三方的npm包可供下 ...
C# 视频编辑
VidCoder VidCoder是一个开源免费的DVD/蓝光视频抓取和转码软件.使用HandBrake做为编码引擎.比Handbrake拥有更友好的用户界面. 可裁剪.剪切.字幕编辑.转码等. 官网 ...
MySQL存储过程（转）
一.MySQL 创建存储过程 "pr_add" 是个简单的 MySQL 存储过程,这个存储过程有两个 int 类型的输入参数 "a"."b" ...
如何实现一个php框架系列文章【开篇】
1.本系列文章的目的实现一个小而美的产品级别php框架自己动手实现一个新框架仅用于学习交流,不打算替代市面上现有的其他主流框架. 2. 我要一个怎样的PHP框架简单实用,安全优雅,博采众长安装 ...
CSS代码规范
空格选择器与 { 之间必须包含空格. 列表型属性值书写在单行时,, 后必须跟一个空格. 属性名与之后的 : 之间不允许包含空格, : 与属性值之间必须包含空格. margin: 0; .+ ...
C++02.访问控制
1.class是struct的扩展,它包括数据成员和成员函数. 2.在C++中,有三种访问权限: (1)private:默认,只供类内部的函数使用. (2)public:类外的程序可以使用. (3)p ...
iOS 应用程序生命周期
开发应用程序都要了解其生命周期. 今天我们接触一下iOS应用程序的生命周期, iOS的入口在main.m文件: int main(int argc, char * argv[]) { @autorel ...
dyld 加载 Mach-O
➠更多技术干货请戳:听云博客前言最近看 ObjC的runtime 是怎么实现 +load 钩子函数的实现.进而引申分析了 dyld 处理 Mach-O 的这部分机制. 1.简单分析 Mach-O ...
iOS开发--弹窗多选、单选框架
最近刚毕业...因为个毕设,都离职了又得重新找工作了,这是之前自己没事开直播写的一个小框架,后来各种趋于稳定后,简单的封装了下,写了个小demo,这里就不废话了,直接贴地址,也不编辑了,自己复制过去看 ...
java代码走查审查规范
分类重要性检查项备注命名重要命名规则是否与所采用的规范保持一致? 成员变量,方法参数等需要使用首字母小写,其余单词首字母大写的命名方式,禁止使用下划线(_)数字等方式命名不 ...

基于ionic+angulajs的混合开发实现地铁APP

基于ionic+angulajs的混合开发实现地铁APP的更多相关文章

随机推荐

热门专题