基于百度地图API的校园综合信息服务系统的设计与实现

潘安宁++杨昆

摘要：基于百度地图API的校园电子地图可以将地理信息数据进行捆绑，从地图的视角整合校内各个信息服务系统，将地图作为入口为用户提供各类校园服务。本系统以云南师范大学呈贡校区空间信息为基础数据，利用百度地图API，结合ASP.NET、AJAX、数据库等技术来实现。系统采用B/S架构，利用IIS进行网站发布，包括了校园信息查询、校园全景图展示、校园生活服务及校园路径导航等功能。

关键词：百度地图API；AJAX；JavaScript；校园地图

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）07-0072-03

Design and Implementation of Integrated Information Service System on Campus Based on Baidu Maps API

PAN An-ning1，2， YANG Kun1，2

（1. School of Information Science and Technology， Yunnan Normal University， Kunming 650500， China； 2. GIS Technology Engineering Research Centre for West-China Resources and Environment of Educational Ministry， Kunming 650500， China）

Abstract： Campus-based electronic map Baidu Maps API can bundle the campus GIS data and integrate each of the information service system from the perspective of each map，and it can make the map as an entry point for users to provide a wide range of campus services.It is based on Yunnan Normal University of Cheng Gong campus spatial information data and the use of Baidu Maps API， and the achievement of this system is based on the technologies about ASP.NET， AJAX and database. The system uses B /S architecture， and using IIS to publish websites. Functions of the system include campus information inquiries， campus panorama show， campus life services and campus walking path planning.

Key words： Baidu Maps API； AJAX ； JavaScript； school map

1 概述

1.1 研究背景和意义

随着高校及大学城的发展，校园面积越来越大。云南师范大学呈贡校区占地面积达3300多亩，众多部门设施混合分布[1]。很多校内外人士不了解校内各个场所的地理位置也无法直观地从校园空间地理信息的角度去获取相关信息。传统的校园信息服务系统因缺乏对空间信息的分析和处理能力，无法直观地表达数据的空间概念，而基于百度API的校园信息服务系统可以弥补这些不足。它既能方便师生和来访人员结合地图快速、直观地了解校园地理环境概况和相关服务信息，又能给校园的管理、规划等提供准确而详细的数据[2]。可见，设计出完善的校园综合信息服务系统格外重要。

1.2 基于百度地图API的研究现状

百度地图API是免费为开发者们提供的一套基于百度地图服务的应用接口，目前被广泛应用于移动设备、互联网、车厂等行业，主要涉及团购、电商、移动手机应用等。给网络地图应用开发提供了便利，最大限度地满足了开发者的需求[3]。

随着校园地理信息系统不断发展，越来越多的人将基于百度地图API的新兴技术与传统的数据库信息系统相结合并很好地应用到实际中。例如，2013年，曾江峰基于百度地图 API 设计并实现了门店信息搜集系统，作者基于百度地图 API 编程，“实现了静尚传媒门店信息搜集系统”的设计与开发[4]。2014年，谢党恩等人以空间信息为基础数据，利用PHP、JavaScript及XML技术实现了基于百度地图API的校园导航系统[5]。此外，“百度地图API在WebGIS中的应用”，“基于百度地图API的虚拟校园的设计”等越来越多的应用也大量出现。诸多应用实例表明，百度地图API不仅能解决Web地图应用开发中遇到的数据源问题，还能降低企业开发成本，具有很好的发展前景。

2 系统需求分析

2.1 功能需求

本文结合校园地理位置信息，有效地将百度地图API引入到校园信息服务系统中。该系统分为地图浏览、校园地点查询、校园信息显示、校园路径导航以及其他功能服务和后台数据库管理六大功能模块。其基本功能框架如图1所示：

2.2系统功能模块介绍

1）地图浏览：直观地显示校园信息及各操作的结果，便于用户对地图进行平移，缩放，显示比例尺等。

2）地点查询：根据用户的查询需求，分别从数据库中进行分类信息检索和根据用户输入的关键词检索。

3）校园信息显示：点击想要了解的具体位置，此位置可以是搜索框内查询的结果或是左边导航栏中的分类结果，点击后在信息窗口内显示相应的介绍信息。

4）分类进行校园概况浏览：点击导航栏内相应类别，显示出该类别的详细校园信息。

5） 校园路径导航：提供校园内两地之间的具体行程路线，对校园线路进行步行规划。

6）全景图展示：点击全景图控件，实现对校园任意位置的全景展示。

7）公共服务和生活服务：从地图的视角为用户提供各类公共服务和生活服务。

8）后台管理：包括登录和操作两个模块。登录模块针对的是管理员，操作模块包括管理员对系统数据库中的数据进行添加、删除、修改等。

3 系统总体方案设计

本系统基于“百度地图API”，选用Visual Studio 2010为平台，开发工具为ASP.NET，前端Web界面结合HTML，CSS及JavaScript进行设计，后端使用SQL Server数据库存储校园信息。后台数据库管理的设计采用MVC框架，并结合EasyUI和ASP.NET关键技术来实现。系统选用B/S模式，中间通过AJAX+jQuery异步交互技术来实现并运用IIS来发布网站。

4 系统各功能模块的设计与实现

4.1 地图浏览设计

该模块设计并实现了校园核心区域的展示，首先通过获取JavaScript API服务并在HTML文件中赋予div一个id值，在该div元素上实现地图实例的创建。其次采用BMap.Map.centerAndZoom（point，level）方法实现地图的初始化。最后通过Control类实现自定义控件，即地图显示区域左下方添加的ScaleControl（比例尺控件），左上方的MapTypeControl（地图类型控件），右上方的全景图控件以及右下方的OverviewMapControl（缩略地图控件），每个控件都能对地图进行相关操作。主界面如图2所示。

4.2 校园地点查询

主要实现搜索框对于储存在SQL Server 2008数据库内数据的查询并将查询结果显示在地图相应位置。查询时使用的是jQuery框架和AJAX异步交互机制，浏览器与服务器之间传输的数据采用JSON字符串格式。

经过该模块的设计，用户能通过搜索框对所需校园信息进行搜索，左边导航栏将列出搜索结果，并能根据经纬度坐标定位至地图相应位置。

4.3 校园信息显示

结合校园地图空间信息，点击想要了解的具体位置，此位置可以是搜索框内查询的结果或是点击左边导航栏获取的分类结果，点击覆盖物后在信息窗口内显示相应的介绍信息。同时能够实现在附近搜索。

4.4分类进行校园概况浏览

根据校园内资源的性质进行分类设计，点击导航栏内相应类别，显示出该类别的详细校园信息。所有分类的名称和对应图标随着地图的加载显示在地图浏览界面左边区域。用户点击任何分类均能获取该类下的所有校园信息分布。分类对象包括：学院、党群和行政部门、生活服务设施、教学及文体楼、学生公寓、教工住宅、学校周边以及其他场所。

4.5 校园路径导航

根据用户所选择路径的起点和终点来规划步行路径，点击起点或是终点，能进行上一步和下一步的路径导航。

用户通过起点和终点输入框来拾取自己步行起始点的经纬度坐标，点击搜索即可为您规划步行路径。如：步行导航“信息学院”至“云南研究院”示例如图3所示。

4.6 全景图展示

根据经纬度坐标展示校园各全景图。全景图控件可以显示或是隐藏，点击全景控件后进入全景图，拖动控件，全景图位置也随着改变。

4.7 公共服务和生活服务

该模块紧扣校园综合信息服务系统这一主题，充分考虑了用户在浏览校园地图时有可能需要的各类公共服务和生活必须服务，通过在地图显示模块添加按钮控件，借助下拉列表设置相应服务，设置弹出层和遮罩层实现对于具体服务的点击事件。

5后台数据库管理的设计与实现

该模块的设计主要基于九个数据库表：学院信息表、学校周边信息表、党群和行政部门信息表、生活服务设施信息表、其他信息表、学生公寓信息表、教学及文体楼信息表、教工住宅信息表及后台管理员信息表。

以下表1为该系统设计中使用的“学院信息表”的示例，其余表的设计类似。

最终后台数据库管理模块实现的功能包括：管理员登录、后台管理主页面下的校园信息添加、校园信息删除、校园信息编辑等。

6 总结

本文基于百度地图API，从地图的视角整合了校内各个信息服务系统，将用户所需的各种校园服务从校园空间地理信息的角度进行展示，给用户更为直观的感受。该系统不仅实现了关于地图的基本操作，还针对校园现状，实现了校园内部所有兴趣点之间的路径导航，界面简洁直观、操作方便。

此外，除上述成就外本文还有一些问题有待进一步研究，例如，如何更加系统地利用百度地图API来完善校园综合信息服务系统的开发，如何更好地为校内外人士提供服务，另外，在未来的工作中会考虑加入GPS定位服务并着手移动设备客户端系统的开发，真正实现校内实时的校园综合信息服务，力求在新生入学、校外人士来访等方面发挥更大的实用价值。

参考文献：

[1] 程钢，梁晓莉，张得群，等. 基于地图API的校园在线电子地图设计与实现[J]. 测绘工程，2014（1）：5-11.

[2] 孙晓茹， 赵军. Google Maps API在WEBGIS中的应用. 微计算机信息， 2006， 22（19）：224-226.

[3] 游兰，彭庆喜.基于Google Maps API的地图解析研究与实现.湖北大学学报，2010，32（2）：161-164.

[4] 曾江峰.基于百度地图API的门店信息搜集系统设计与实现[D].武汉：华中科技大学，2013.

[5] 谢党恩，顿贝贝，张志立. 基于百度地图API的校内路径导航系统的实现[J]. 许昌学院学报，2014（2）：78-81.