基于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,代码如下:

    <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

 // 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的更多相关文章

  1. ios&h5混合开发项目仿app页面跳转优化

    前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...

  2. 入门移动端混合开发 实战京东 APP(完整更新)

    课程资料获取链接:点击这里 混合开发入门 主流开发方案实战京东移动端APP 无需原生开发基础,也能完美呈现京东商城.本课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合开发经典电 ...

  3. ionic+angulajs

    基于ionic+angulajs的混合开发实现地铁APP 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一.项目简介 在该项目中的地铁app是基于io ...

  4. 移动端混合开发----ionic

    目前移动端分为三大主流:纯原生.混合开发.web App,随着手机硬件的升级,公司们似乎偏好于web页面开发,而混合开发相对纯web App似乎更受大公司青睐,所谓混合开发俾人理解为,原生代码(iOS ...

  5. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

  6. IOS-Hybrid(混合开发)

    http://www.cnblogs.com/oc-bowen/p/5423902.html 1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等 ...

  7. Hybrid APP混合开发的一些经验和总结

    http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...

  8. Hybrid APP混合开发

    写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~ 1.混合开发概述 Hybrid App主要以JS+Nativ ...

  9. H5混合开发app常用代码

    1.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发.然后这个浏览器又封装 ...

随机推荐

  1. asp.net mvc View视图相关

    1.0 @helper语法 @helper语法可以定义可重复使用的帮助器方法: 例如 @helper methodName(type paramName,...){ //todo } 调用:@meth ...

  2. C#限速下载网络文件

    代码: using System; using System.Collections.Concurrent; using System.Collections.Generic; using Syste ...

  3. Checkbox 模板和样式

    <Style TargetType="{x:Type CheckBox}"> <Setter Property="FontFamily" Va ...

  4. C#图片按比例缩放

    C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...

  5. Mybatis的choose when otherwise

    <select id="getCount" resultType="int"> select count(1) from <choose> ...

  6. JSON转化为JAVABEAN集合

    String str = "[{'id':'392','type':'jpg'},{'id':'393','type':'jpg'},{'id':'377','type':'jpg'}]&q ...

  7. 使用cmd打开java文件,报错:“错误,编码GBK的不可映射字符”

    今天使用EditPlus写了一个小程序,用cmd运行时报错--"错误,编码GBK的不可映射字符". 处理办法是用EditPlus另存为时,把编码格式由UTF-8改为ANSI. 然后 ...

  8. iOS开发-- 通过runtime kvc 移除导航栏下方的阴影效果线条

    网上查了很多, 都是重新绘制, 感觉有点蠢, 恰巧工作有会闲, 就简单的通过runtime遍历了下属性找寻了下私有类和方法, 这里直接贴方法, 找寻过程也发出来, 能看懂的直接就能看懂, 看不太明白的 ...

  9. CentOS安装gitlab,gerrit,jenkins并配置ci流程

    CentOS安装gitlab,gerrit,jenkins并配置ci流程 By Wenbin juandx@163.com 2016/4/9 这是我参考了网上很多的文档,配置了这三个软件在一个机器上, ...

  10. C# 调用 Oracle

    C# 调用 Oracle 是如此尴尬 >System.Data.OracleClient.dll —— .Net 自带的 已经 过时作废. >要链接 Oracle 服务器,必须在 本机安装 ...