科技资讯
2015  NO.32
SCIENCE & TECHNOLOGY INFORMATION
百度api接口信 息 技 术
25
科技资讯 SCIENCE & TECHNOLOGY INFORMATION 地理信息系统(WebGIS)与一般的大众Web应用系统不同，涉及复杂的地图应用。从零实现一个WebGIS应用系统，将会是一个非常艰难的过程。因此，如何化繁为简，屏蔽复杂的GIS计算过程，使开发人员高效、灵活的开发一个WebGIS系统，已经成为WebGIS开发领域的关键问题。在好的开发框架下，开发者往往只需要编写少量的代码，花费少量的时间即可实现高性能的Web应用系统[1]。百度地图JavaScript API其设计之意就是为互联网客户端提供强大的地图展示和操作功能以及灵活的扩展机制。
1 百度地图 API 简介
百度地图API是一套由JavaScript编写的将百度地图嵌入到网页应用程序的接口，它能够在网站中构建功能
丰富、交互性强的地图应用程序。百度地图API为开发者提供丰富的函数、控件、事件和封装的类，提供很多的专题图服务[2]。
利用百度地图API技术构建WebGIS平台，主要采用客户端、应用服务器和数据服务器三层结构进行设计。其中客户端主要实现地图加载、地图浏览和查询功能；应用服务器则负责处理用户
的访问和查询请求；数据服务器用于存取各类空间数据和属性信息[3]。
2 系统交互需求
(1)系统需要地图对根据用户输入的起始点和终点进行解析，返回查询到的结果列表，并将第一条结果的路径展现在地图上。
(2)用户还可以对返回的结果列表根据耗时最少，换乘最少，步行最少以及不坐地铁四个条件进行筛选。
(3)当用户点击每一个方案列表上的公交线路时，弹出一个该公交线路详细列表对话框，显示该公交经过的个站点的名字以及该公交线路的运营时间等。
3 系统功能设计
为了实现系统在主流浏览器显示和运行的兼容性和可移植性，系统采用JavaScript第三方框架JQuery进行编码。利用JQueryEasyUI实现系统布局和各个板块界面的设计[4]。首先要引入相关的CSS和库文件。
DOI:10.16661/jki.1672-3791.2015.32.000
基于百度地图API 的公交查询系统的设计与实现
凌龙
(西北大学城市与环境学院 陕西西安 710127)
摘 要：目的 利用百度地图JavaScript API构建公交出行方案查询系统，并介绍系统实现过程中具体的步骤和问题解决方法。方法 利用JavaScript第三方框架JQuery结合JQueryEasyUI实现系统的布局界面设计以及地图与用户的交互功能。结果 根据用户输入系统会返回相应的公交乘车方案并绘制在地图上。结论 百度地图JavaScript API地图应用接口对于快速开发小型地理信息系统非常的方便。
关键词：百度地图JavaScript API  JQuery  JQuery  EasyUI 地理信息系统中图分类号:TP311.52
文献标识码:A
文章编号:1672-3791(2015)11(b)-0025-02
Design and Realization of Public Transportation Query
System Based on Baidu Map API
Ling Long
(School of Urban and Environmental Sciences,Northwestern University,Xi’an Shannxi,Shannxi Province,710127,China)
Abstract :Objective 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. Methods Use Jquery and Jquery EasyUI to 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 a small geographic information system with baidu map interface.
Key Words :Baidumap;API; Jquery;Jquery EasyUI;GIS . All Rights Reserved.
科技资讯
2015  NO.32
SCIENCE & TECHNOLOGY INFORMATION
信 息 技 术
26
科技资讯 SCIENCE & TECHNOLOGY INFORMATION
<link type="text/css" rel="stylesheet"href="easyui/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="easyui/themes/icon.css" />
<script src="../easyui/jquery.min.js"></script><script src="../easyui/jquery.easyui.min.js"></script>
3.1 页面布局设计
系统布局采用JQueryEasyUI的layout控件实现。布局采用上下布局模式，基本框架设计代码如下:
<body id="layout" class="easyui-layout">
<div data-options="region:'north',split:true"></div><div data-options="region:'west',title:'公交搜索',split:true">
<div id="bus_list"></div></div>
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true"><div id="mymap" data-options="region:'center'"></div>
</div></body>
3.2 显示地图并对地图进行初始化百度API免费对外开放。自v1.5版本起，您要先申请密钥(ak)才可使用。
<script src="api.map.baidu/api?v=2.0&ak=*** "></script>
创建一个地图实例和点坐标，以此为中心设置地图级别，添加地图操作的各类控件。在地图初始化前必须为地图实例指定一个呈现地图的容器。在本系统中为Id="mymap"的div。
map = new BMap.Map("mymap",{minZoom:1,maxZoom:19,enableMapClick:true});
map.addControl(new BMap.NavigationControl());//设置地图导航控件
map.addControl(new BMap.MapTypeControl());//设置地图类型切换控件
map.addControl(new BMap.ScaleControl());//设置地图比例尺控件
3.3 公交出行方案的查询
创建一个保存起始点和终点的对象Obj={start=null,end=null}通过用户输入的起点和终点，通过Geocoder类对其解析，将其解析后的起点和终点坐标保存下来。通过实例化transit 类来解析公交线路。
varmyGeo = new BMap.Geocoder();Point(value, function(point){
point？Obj.start = point;||d = point:alert("地址没有解析到结果!");
},"西安市")；公交线路解析的结果需要一个容器元素，系统中使用id="bus_list"的div作为呈解析结果列表的容器。当解析成功后，结果列表就会动态的插入到该容器中。
vartransit = {renderOptions: {map: map, panel:"bus_list",autoViewpoort:true},
pageCapacity:7}//transit的初始化参数设置
transit = new BMap.TransitRoute(map, transit_options);transit.search(obj.start, d);//公交线路筛选部分代码;…{switch (this.index){case 0:
t r a n s i t.c l e a r R e s u l t s ();t r a n s i t.s e t P o l i c y (BMAP_TRANSIT_POLICY_LEAST_TIME);
transit.search(obj.start, d);break;…}}
3.4 公交路线信息的查询
当用户点击每一个公交名称时，通过事件监听获取该公交名称，将该名称传给公交线路查询类BusLineSearch的getBusList方法。当该条公交路线搜索完成后将该条公交路线绘制到地图上。
varbusline = new BMap.BusLineSearch(map,{renderOptions:{map:map,panel:"bus_panel"},onGetBusListComplete: function(result){
if(result) BusListItem(0));}});BusList("/*得到的公交线路值*/");
4 结语
20世纪90年代以来，随着互联网技术的空前发展，人们对基于Web环境下的地图浏览的需求也日益明显，然而，仅仅通过文字表达查询结果已经很难满足应用需要。因此，图文一体化的呈现方式己经成为应用领域的新需求[5]。作为对外免费的javascriptAPI接口，百度地图提供给进行PC端、移动设备端、服务端的地图应用开发者，帮助他们快速方便的搭建与地理位置有关的应用系统，帮助人们解决与地理位置有关的问题。也为GIS的发展与应用开拓了更加广阔的空间。
参考文献
[1] 孙迪，李沛鸿.百度地图API在WebGIS中的应用[J].河南科技,
2013(22):165-166.
[2]杜传明.百度地图API在小型地理信息系统中的应用[J].测绘
与空间地理信息,2011,34(2):153-156.
[3]Cesar Otero, Rob Larsen jQuery高级编程[M].施宏斌，译.
北京：清华大学出版社,2013,4.
[4]吴信才.基于Javascript的WebGIS的开发[M].北京: 电子工
业出版社,2011.
[5]刘仁义，朱众.WebGIS技术信息查询系统开发及实现[J].计算
机应用研究,2001,18(3):102—104.
. All Rights Reserved.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。