基于地图API的WebGIS研究与实现

admin管理员组

文章数量:1531542

2024年5月17日发(作者：)

龙源期刊网

基于百度地图API的WebGIS研究与实现

作者：田力 栾绍鹏

来源：《科学导报·学术》2019年第18期

摘要：本文从理论研究以及技术实践出发，自主设计并开发完成了基于百度地图API的信

息查询系统。客户端基于百度地图API实现了地图展示、查询等功能，并通过Ajax请求服务

端的SqlServer数据库将服务端存储的信息查询出来并显示到浏览器中;同时浏览器端基于

HTML5 GeolocationAPI实现了定位功能。

关键词：百度地图;HTML5;WebGIS;XML

近些年互联网技术在全球高速发展，万维网成为便捷高效的全球信息发布工具。GIS和

Web技术的结合，让GIS插上网络的翅膀迅速走进了千家万户。借助Web技术，GIS实现了

从桌面到Web浏览器的转移，使得人们在任何能够接入互联网的电脑前使用浏览器，就能够

迅速获取所需要的地理信息。传统的WebGIS应用开发相对复杂和困难，因为这涉及到很多关

于地图数据的收集、位置信息的收集和处理等各種各样的服务能力。而地图API则把地图数据

处理、位置获取甚至空间计算的大部分工作来完成，把GIS功能封装为简单的应用程序接口供

应用开发人员来调用，开发者只需要考虑应用本身的逻辑，使用JavaScript或者其他语言调用

百度地图的API，即可将需要的GIS功能嵌入到自己的网页或其他应用中。

1百度地图API

龙源期刊网

观察在线地图的发展现状，继国际上Google地图之后，近些年国内百度地图、搜狗地

图、高德地图、阿里云地图和腾讯SOSO地图等都纷纷推出了自己的地图搜索服务和路况等应

用服务，极大的便利了人们的出行。

百度地图API是LBS位置应用的开发平台，API和SDK的应用模式是：API和SDK本身

并不面向最终用户，开发者在开发应用时调用API或SDK来开发LBS应用，然后把应用提供

给最终的用户。百度地图API平台有四大核心能力：1、数据，可以检索周边餐饮、旅馆等各

类信息。百度出身于数字搜索，在数据方面经验丰富，拥有并提供大量的信息数据;2、搜索，

包括所有跟计算有关的能力，比如POI的搜索，检索附近的餐饮、酒店等等;3、导航，比如路

径计算，驾车导航，公交检索等;4、定位，定位是LBS应用的关键功能。

2平台总体架构设计

本系统基于百度地图API，目标是实现任意区域的信息检索，并将搜索结果合理展现在网

页文档中。对于位置信息，采用百度地图API提供的接口数据;对于详细信息，采用自己架设

服务器提供Web服务的方式提供详细数据。

本系统的核心功能是提供地图展示，允许用户通过修改地图视野，并点击“查询”按钮立即

查询本地图视野区域的信息，并以标注的方式展示在地图中。同时允许用户点击任意一个结果

标注查询详细信息。图1描述了系统的设计逻辑。

2.1 JavaScript API实现地图功能

使用JavaScript API只需将百度地图API的JS文件加载到网页，并设置初始化地图容器的

代码即可。百度地图API支持2D、3D、卫星图的展示、平移、缩放、拖拽等操作。还可以在

地图展示控件：添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件，并可

以设置各类控件的显示位置。

自1.5版本之后，需先百度地图API官网申请密钥。ak的使用方法如下：

其中参数v为API当前的版本号，目前最新版本为1.5。

由于JavaScript在网页中的加载是自上而下进行的，而在本系统中，网页模型、API类、

初始化动作都是有先后逻辑次序的。因此要求网页DOM（文档对象模型）的加载先于百度地

图JS文件的加载，百度地图JS的加载要先于地图初始化代码。

龙源期刊网

为此，我们需要借助百度地图API异步加载技术，同时运用适当的方法解决以上次序问

题。首先，我们将地图API的加载封装为loadBaiduJs的函数，然后在网页文档的head标签中

加入 = loadBaiduJs;即可等网页所有DOM（文档对象模型）加载完毕之后再加

载百度的JS代码。如图是loadBaiduJs函数的逻辑代码。

其中，引入百度地图JS文件的参数callback=initialize代表加载完成百度地图JS文件后的

回调函数，这就确保了initialize初始化函数的执行是在百度地图JS文件加载之后进行的。在

自定义的initialize回调函数中，需要对地图展示的初始参数进行初始化，包括设置地图初始的

中心点、缩放级别等。

2.2 Javascript API实现POI搜索

百度地图API中，earch提供本地搜索服务，在使用本地搜索时需要为其设置

一个检索区域，检索区域可以是对象、对象或者是省市名称（比如："

北京市"）的字符串。earch构造函数的第二个参数是可选的，可以在其中指定结

果的呈现。Options类提供了若干控制呈现的属性，其中map属性指定了结果所

展现的地图实例，panel属性指定了结果列表的容器元素。

本文所设计的系统为检索商场信息，因此现以检索当前视野内的POI商场信息为例。我们

的搜索参数设置为renderOptions：{ map：myMap，panel：win2，autoViewport：true，

selectFirstResult：false }，即搜索结果展现在myMap地图实例，搜索结果面板展现在“win2”面

板，搜索完成后自动调整地图视野，并选择第一条搜索结果。

同时，本系统要求点击搜索结果的地图标注后要触发自定义的事件，我们在自定义的事件

代码中使用Ajax访问Web Service，因此，我们需要在本地搜索的第二个参数中设置

onMarkersSet属性，在标注添加完成后给每个标注添加Click事件的绑定函数。我们的本地搜

索参数设置如图2，其中addInfoWindow函数是为标注添加点击事件的函数：

2.3 Javascript API实现公交线路查询

tRoute类提供公交导航搜索服务。和本地搜索类似，在搜索之前需要指定搜

索区域，注意公交导航的区域范围只能是市，而不能是省。如果搜索区域为对象，

路线结果会自动添加到地图上。如果网页中提供了结果容器，相应的路线描述也会展示在页面

上。创建一个公交导航对象的方法为：var transit= new tRoute（map，

{ renderOptions：{map：myMap，panel："results"}.这样便声明了一个公交线路查询对象

transit，第二个参数指明了此次查询结果标注展现在myMap地图对象上，结果内容展示在

“result”网页容器内。公交对象定义完成后执行（起点字符串，终点字符串）便可

执行线路查询。

龙源期刊网

3 总结

本文从理论研究以及技术实践出发，自主设计开发完成的基于百度地图API的独立于GIS

平台的信息查询系统，采用HTML5和CSS3作为客户前端UI展现方式，基于百度地图API接

口实现了地图展示、关键词搜索、大学位置检索、大学信息查询、公交线路检索、定位等功

能。借助创建的Web Service，实现了自定义数据在地图上的展现。

参考文献：

[1] 易晓飞.HTML5 Geolocation API 研究与应用[J].计算机光盘软件与应用，2012，6：101.

[2] 王红崧，周海晏.基于百度地图 API 的旅游地理信息系统开发[J].现代计算机：上半月

版，2012（8）：60-63.

[3] 李艳，高扬.基于地图 API 的 Web 地图服务及应用研究[J].地理信息世界，2010，8

（002）：54-57.

[4] 赵文雪.百度 MapAPI 在气象自动站监测的应用[J].科技资讯，2012，15：005.

作者简介：

田力（1963-），研究方向：国土资源信息管理、测绘地理信息、智慧城市等

（作者单位：烟台市地理信息中心）

本文标签： 地图百度搜索