基于Web APP的校园地理信息系统设计与实现.docVIP

基于Web APP的校园地理信息系统设计与实现 　　摘 要 随着互联网技术的发展，移动端校园信息化产品是高校信息化发展的必然趋势。本文从数字化校园建设及应用群体的需求出发，通过Web APP调用百度地图API方式，设计了一款校园地理信息系统――“掌上纺服”。 　　【关键词】Web APP 百度地图AngularJS Ajax 　　1 引言 　　数字校园是高校信息化发展的必然趋势，通过数字校园建设，可以快速有效地获得大量校园信息，并实现信息之间的交互共享。随着互联网技术的发展，数据网络传输更加快捷，移动终端设备迅速普及。当前运用移动端人均上网时间已经超过PC端，应用程序研发重心也正由传统的PC平台向智能终端平台倾斜。可见，智能终端的发展正在逐步影响高校数字化建设的方式。本文根据数字化校园建设及应用群体的需求分析，设计并实现了一款基于Web APP的校园地理信息系统――“掌上纺服”。 　　2 校园地理信息系统设计 　　鉴于当前存在很多新生因为不熟悉地理环境而导致走错教室、上课迟到等现象，在当前新生拥有智能手机比例已经达到90%以上的今天，为方便学生尽快熟悉校园地理、尽快适应校园生活，设计一款能通过智能手机方便操作的校园地理信息系统。 　　Web APP，是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用，该开发具有跨平台的优势，编写一次、可到处运行的移动开发方法构建的跨平台移动应用程序可以在多个设备上运行。为了更好的推广应用，选用了Web APP方式进行开发，用户只需要输入网址或者扫面二维码就能够简单方便地使用，同时Web APP的自适应性能够很好的适应不同分辨率的手机屏幕。 　　2.1 相关技术简介 　　2.1.1 百度地图API 　　百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务。其中百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。适用于PC或移动设备端的基于浏览器的开发。 　　2.1.2 AngularJS 　　AngularJS是一款由Google公司开发的前端JS框架。AngularJS支持单页动态应用程序的开发，简化了开发过程及测试的复杂度，在编写 Web APP的过程中可以实时看到代码产生的效果。AngularJS的核心思想是将管理数据的代码（model）、应用逻辑代码（controller），以及向用户展示数据的代码（view）清晰地分离开，实现View层与model层数据同步，一方的改变会影响另一方。 　　2.1.3 AJAX（Asynchronous JavaScirpt and XML） 　　是一种创建交互式网页应用的网页开发技术，整合了几种现有的技术：JavaScirpt、CSS、DOM和XmlHttpRequest。jQuery是一个轻量级的Ajax框架，对Ajax操作进行了良好的封装，提供了一套完整的Ajax功能，使Ajax应用开发过程简单化。同时在无刷新技术实现上引入jQuery很多优势。 　　2.2 系统框架设计 　　“掌上纺服”校园地理信息系统的设计原则为：在实现客户端简洁、易操作的同时，尽量减少响应时间、占用较小的带宽。 　　基于上述设计原则，前端采用AngularJS框架实现单页应用，服务器端采用SSH框架来实现，而前端与服务器端之间的交互通过JSON数据来实现。JSON（JavaScript Object Notation）是一种轻量级的数据交互格式，简单，易于读写，占用带宽小，服务器端和客户端的解析较为方便。系统的整体设计框架如图1所示。 　　3 主要功能实现 　　3.1 初始化百度地图 　　百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，通过将API引入到页面中，v是当前的版本号，ak是当前应用的密钥，自v1.5版本起，开发应用需先申请密钥（ak）。 　　 　　地图容器设置： 　　var _userid = ;var _siteid =669;var _istoken = 1;var _model = Model03; WebPageSpeed =234; UrchinTrack(); 　　路由规则设置： 　　var APP = angular.module（zjff， [ ng， ngRoute， ngAnimate ]）； 　　APP.config（function（$routeProvider） {