梁京源马欣敏
(西南林业大学,云南昆明650224)
【摘要】为了将城市24小时营业餐厅的专题数据展示在网络地图中,采用百度API接口二次编程及JavaScript网页脚本技术,实现每个24小时营业的餐厅标注在百度地图上,并提供餐厅的名称、地址、联系电话、简介、驾车线路等信息,建成一个有效、便捷的24小时营业餐厅查询系统。
教育期刊网 http://www.jyqkw.com
关键词 24小时营业餐厅;百度地图API;查询系统
随着人们生活节奏的加快和工作习惯的改变,夜间上班一族以及习惯夜生活的人群随之不断增加,对24小时服务餐厅的需求也与日俱增。但人们现如今还无法从传统的地图搜索引擎中获取这类餐厅信息,导致人们夜间无法寻找到适合自己的用餐地点,为了满足人们需求,提高城市公共服务信息质量已迫在眉睫。以网络技术和空间信息处理为核心的WebGIS技术,具有强大的空间信息管理、分析和属性数据查询等功能,具有信息动态更新、形象直观等特点。采用WebGIS开发的24小时营业餐厅查询系统,可以轻松的通过WEB查询24小时营业餐厅信息,快速获取地理位置和餐厅介绍,为用户就餐选择提供有效帮助。由于自己建设WebGIS有一定难度,地理信息也不能达到要求的精度,维护和开发成本很高,为此选择了利用百度地图API提供的电子地图,这样就可以免费、便利、准确地提供基础地理信息并在其上展示。
1百度API简介
API即应用程序编程接口,是指软件开发商为第三方人员提供的编程接口,利用这个编程接口可以在不了解具体内部机制的情况下使用其提供的一些功能。百度地图API是一套由JavaScript语言编写的应用程序接口,它提供了网络地图服务的全部功能,包括地图显示、地图操作、地图查询等。百度地图API通过地图服务应用接口将应用开发平台和地理信息数据绑定,将复杂的地理信息系统底层进行封装,使用户可不必了解它的技术细节就能在应用中快速构建基础地理地图,进行各种标注和查询,从而快速在网站中建立功能丰富、交互性强的地图应用。
2系统构架
系统开发发的总体目标是在互联网平台上利用现有开发工具,结合百度地图API和数据库技术,开发一个界面友好、操作简单的24小时营业餐厅查询系统。系统采用B/S模式,用户通过浏览器在页面上查看餐厅信息,餐厅信息则存储在LBS云服务器中,通过WebServer读取数据,借助百度地图API将这些数据展示在地图上,供用户查看。具体系统构架如图1所示。
3技术实现
系统技术实现路径包括收集、标准化改造所需要的数据源、通过对百度地图API二次开发,实现将昆明24小时营业餐厅准确标注到百度地图上两部分。其中数据源收集改造工作包括拾取每个24小时营业餐厅场所百度地图坐标、建立这些餐厅LBS云数据;对百度地图API二次开发工作包括开发系统网页脚本、调用百度地图插入到网页、24小时营业餐厅的标注及信息显示和到达指定餐厅的驾车路线。
3.1拾取百度经纬度坐标
百度地图因为保密安全等原因,使用独立的百度坐标系,利用百度地图提供的在线拾取坐标系统(http://api.map.baidu.com/lbsapi/getpoint/index.html)。具体操作步骤是:在拾取坐标系统的地图上,将鼠标移到每一个24小时营业的餐厅位置,记录下在右上角显示的百度经纬坐标,坐标精度一般选择小数点后5、6位即可,准确的百度坐标拾取、保证24小时营业餐厅在百度地图上的准确位置标注。由于百度公司不对外公布gps坐标与百度坐标的对应计算公式,目前解决的方法只有一一拾取。
3.2建立24小时营业餐厅LBS云数据
每个24小时营业的餐厅具有餐厅名称、经纬度坐标、地址、联系电话等属性值。开发者可通过LBS云可视化数据管理工具完成自有数据的存储。支持用户对数据添加自定义字段(如图2)。百度地图API可以将用户上传到LBS云里的位置数据实时渲染成图层,然后通过CustomLayer对象叠加到地图上。目前LBS云支持用户存储poi数据,存储的字段除经纬度坐标外还包括名称、地址等属性信息。CustomLayer类提供读取LBS云数据接口,并自动渲染用户数据生成数据图层,同时提供单击叠加图层返回poi数据的功能。
3.3建立餐厅查询页面
百度地图API开发包是基于JavaScript脚本开发的。本系统使用JavaScript脚本+百度地图API进行二次开发,开发工具选用WebMatrix。
3.3.1获取百度地图API
百度地图API是由JavaScript语言编写,在使用之前需要在网页中引用地图API脚本:
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=GAt2Lsr8qlyzpgK1IXYL1gXY"></script>
其中v=2.0表示当前使用的API版本号是2.0,ak代表百度地图为你服务的密匙。
3.3.2初始化地图元素
地图在页面上需要一个HTML元素作为容器,先创建一个div元素,<divid="qlmap">
</div>。据此创建一个地图实例:
varmap=newBMap.Map("qlmap");map.centerAndZoom(newBMap.Point(102.716649,25.053048),14);map.enableScrollWheelZoom(true);
创建了地图实例,定义了地图缩放的最大最小级别,设定了地图显示的中心点位置及地图放大级别,配置地图支持鼠标滚轮缩放。
3.3.3标注24小时营业的餐厅
将24小时营业的餐厅标注到地图上,并将标注图标设置为弹跳动画效果。CustomLayer构造函数可以通过接收数据存储空间id(geotableid)参数生成用户数据图层,存储空间id可以在创建数据存储时获得。JavaScriptAPIv1.5提供单击用户数据图层事件,并支持返回点击poi点的信息。此功能使得用户可以查询到适合自己就餐的餐厅位置,并获取联系电话,餐厅简介,驾车路线(如图3)。
varcustomLayer=newBMap.CustomLayer({geotableId:餐厅查询});
customLayer.addEventListener(´onhotspotclick´,callback);//单击图层事件
functioncallback(e)//单击热点图层
{
varcustomPoi=e.customPoi,//获取poi对象
str=[];
str.push("address="+customPoi.address);
str.push("phoneNumber="+customPoi.phoneNumber);
str.push("introduce="+customPoi.introduce);
varcontent=´<pstyle="width:280px;margin:0;line-height:20px;">地址:´+customPoi.address+´<br>电话:´+customPoi.phoneNumber+<br>简介:´+customPoi.introduce+´</p>´;
varsearchInfoWindow=newBMapLib.SearchInfoWindow(map,content,{//带检索的信息窗口
title:customPoi.title,//标题
width:290,//宽度
height:40,//高度
panel:"panel",//检索结果面板
enableAutoPan:true,//自动平移
enableSendToPhone:true,//是否显示发送到手机按钮
searchTypes:[
BMAPLIB_TAB_SEARCH,//周边检索
BMAPLIB_TAB_TO_HERE,//到这里去
BMAPLIB_TAB_FROM_HERE//从这里出发
]
});
varpoint=newBMap.Point(customPoi.point.lng,customPoi.point.lat);searchInfoWindow.open(point);}
}
4结束语
本系统设计合理,界面简洁直观,操作简单方便,无需投入却查询和服务速度迅捷。系统借助互联网、商业地图平台,通过百度API二次开发,将24小时营业餐厅信息汇总于地图中并显示,帮助夜间工作者根据自己用餐喜好,选择自己适合的就餐地点,为城市公共信息服务建设提供了有效地技术支持。随着智能移动平台的迅速发展和普及,本系统下一步的工作重点将系统移植到智能手机平台上,并结合现如今的用户评价及用户推荐,提供更人性化的服务。
教育期刊网 http://www.jyqkw.com
参考文献
[1]王红崧,周海晏.基于百度地图API的旅游地理信息系统开发[J].现代计算机(专业版),2012,3(23):60-63.
[2]郑黎辉,叶应树.基于百度地图的应急避难场所查询系统的设计与开发[J].内陆地震,2014,9
(3):202-210.
[3]董卓亚.基于百度地图JavaScriptAPI的通信地图展示[J].电子设计工程,2013,21(18):73-76.
[4]张帅毅,徐京华.基于开放地图API的网络专题制图方法研究[J].测绘,2011,34(3):108-114.
[责任编辑:刘展]