基于百度地图API的公交查询系统的设计与实现

摘要：目的 利用百度地图JavaScript API构建公交出行方案查询系统，并介绍系统实现过程中具体的步骤和问题解决方法。方法 利用JavaScript第三方框架JQuery结合JQueryEasyUI实现系统的布局界面设计以及地图与用户的交互功能。 结果 根据用户输入系统会返回相应的公交乘车方案并绘制在地图上。结论 百度地图JavaScript API地图应用接口对于快速开发小型地理信息系统非常的方便。

关键字：百度地图JavaScript API；JQuery；JQueryEasyUI；地理信息系统

中图分类号：TP311.52？文献标识码：A？？文章编号：1672-3791（2015）11（b）-0000-00

The design and implementation ofBus query system based on baidu map API

Abstract： Aim Using Baidumap API JavaScript to build a public transport travel system， and introduces the process of the system to achieve the specific steps and methods.MethodsUse Jquery and JqueryEasyUITo achieve the layout of the system and interaction between map and user.Results According to the user input system will return the corresponding bus ride program and draw on the map.Conclusion It is convenient to develop asmall geographic information system with baidu map interface.

Key words：Baidumap；API； Jquery；JqueryEasyUI；GIS

1、引言

地理信息系统（WebGIS）与一般的大众Web应用系统不同，涉及复杂的地图应用。从零实现一个WebGIS应用系统，将会是一个非常艰难的过程。因此，如何化繁为简，屏蔽复杂的GIS计算过程，使开发人员高效、灵活的开发一个WebGIS系统，已经成为WebGIS开发领域的关键问题。在好的开发框架下，开发者往往只需要编写少量的代码，花费少量的时间即可实现高性能的Web应用系统[1]。百度地图JavaScript API其设计之意就是为互联网客户端提供强大的地图展示和操作功能以及灵活的扩展机制。

2、百度地图 API 简介

百度地图 API 是一套由 JavaScript 编写的将百度地图嵌入到网页应用程序的接口，

它能够在网站中构建功能丰富、交互性强的地图应用程序。百度地图API为开发者提供丰富的函数、控件、事件和封装的类，提供很多的专题图服务[2]。

利用百度地图 API 技术构建 WebGIS 平台，主要采用客户端、应用服务器和数据服务器三层结构进行设计。其中客户端主要实现地图加载、地图浏览和查询功能；应用服务器则负责处理用户的访问和查询请求；数据服务器用于存取各类空间数据和属性信息[3]。

3、系统交互需求

（1）系统需要地图对根据用户输入的起始点和终点进行解析，返回查询到的结果列表，并将第一条结果的路径展现在地图上。

（2）用户还可以对返回的结果列表根据耗时最少，换乘最少，步行最少以及不坐地铁四个条件进行筛选。

（3）当用户点击每一个方案列表上的公交线路时，弹出一个该公交线路详细列表对话框，显示该公交经过的个站点的名字以及该公交线路的运营时间等。

4、系统功能设计

为了实现系统在主流浏览器显示和运行的兼容性和可移植性，系统采用JavaScript第三方框架JQuery进行编码。利用JQueryEasyUI实现系统布局和各个板块界面的设计[4]。首先要引入相关的CSS和库文件。

4.1、页面布局设计

系统布局采用JQueryEasyUI的layout控件实现。布局采用上下布局模式，基本框架设计代码如下：

1 [2] 存入我的阅览室