基于百度地图API的Web地图交互应用

郭琳

摘 要：随着地图API技术的出现和日益成熟，在网站开发中为用户提供其感兴趣的相关地理信息，成为提升用户体验效果、体现网站综合设计水平的重要手段。例如当人们想选择一个新的居住地时，必然会对其周边的公共交通设施、教育设施、医院、银行等倍加关注。在此类网站中利用地图API技术就可以构建功能丰富的地图交互应用，从更加真实客观的角度给用户以满意的信息回馈。该文以百度地图API为例，用一个真实的案例阐述了从创建应用、获取密钥、相关开发工具使用到网页代码衔接的整个过程，并提供了相关类参考。

关键词：百度地图API 拾取坐標系统 API控制台 AK JavaScript开源库

中图分类号：P20 文献标识码：A 文章编号：1672-3791（2017）03（b）-0036-03

Interactive Application of Web Map Based on Baidu Map API

Guo Lin

（Shenyang Staff University， Shenyang Liaoning， 110021， China）

Abstract： with the advent of map API technology and the increasingly mature， provide relevant geographic information of interest to users in Web site development， become an important means to enhance the user experience， reflect the overall level of web design. For example， when people want to choose a new residence， bound to the surrounding public transport facilities， educational facilities， hospitals， banks and other concerned. In this kind of website， we can use the map API technology to build a rich map interactive application， and provide users with satisfactory information feedback from a more realistic and objective point of view. In this paper， taking Baidu map API as an example， a real case is presented to illustrate the whole process of creating the application， obtaining the secret key， using the related development tools.

Key Words：Baidu map API；Pick coordinate system；API console；AK；JavaScript open source library

在网站开发中为用户创建丰富实用的交互体验是多年来技术开发人员不断追求的目标。而基于强大地理信息系统的地图API技术的出现使GIS对普通开发者而言不再遥不可及。这从很大程度上满足了技术人员和用户的双向需求。网站开发人员只需要获取兴趣点的经纬信息，创建地图API应用并获取AK，了解必要类的使用方法，就可以利用相关工具快速生成代码进行网页移植了。该文以笔者的一个基于php+MySQL server的项目为基础，较为全面的阐述了整个移植过程。

1 了解百度地图API

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助用户在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

2 创建应用获取密钥（AK）

登陆百度地图开放平台，即可在API控制台中创建应用，输入应用名称、选择应用类型（这里选择服务端或浏览器端）、选择启用服务（默认情况下全选）、选择请求校验模式（IP白名单校验或sn校验方式），按照提示填好后即可获得密钥（AK）。

3 了解必要类的使用方法

3.1 核心类：Map

此类是地图API的核心类，用来实例化一个地图。

构造函数：Map（container： String | HTMLElement， opts： MapOptions）。

描述：在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom（）方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。

3.2 基础类：Point

此类表示一个地理坐标点。

构造函数：Point（lng： Number， lat： Number）。

描述 ：以指定的经度和纬度创建一个地理点坐标。

3.3 控件类：Control

此类是所有控件的基类，您可以通过此类来实现自定义控件。所有控件均包含Control类的属性、方法和事件。通过Map.addControl（）方法可将控件添加到地图上。

包括子类：NavigationControl（地图的平移缩放控件）、ScaleControl（比例尺控件）、OverviewMapControl（缩略地图控件）等。

3.4 覆盖物类：Marker

此类表示地图上一个图像标注。

构造函数：Marker（point： Point， opts： MarkerOptions）。

描述：创建一个图像标注实例。point参数指定了图像标注所在的地理位置。

3.5 服务类：LocalSearch

用于位置检索、周边检索和范围检索。

构造函数：LocalSearch（location： Map| Point| String， opts： LocalSearchOptions）。

描述：创建一个搜索类实例，其中location表示检索区域，其类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上，并支持调整地图视野层级；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。

4 获取兴趣点坐标

利用百度地图拾取坐标系统获得兴趣点坐标。如图1所示。

5 巧用示例DEMO和JavaScript开源库生成基础代码

在百度地图开放平台中，有很多示例DEMO可供开发者参考。在DEMO界面中还提供源代码编辑器，可供调试和复制代码。如图2所示。

另外，还可以在百度地图JavaScript开源库中通过下载二次开发源码快速实现在地图上添加Marker、自定义信息窗口、标注相关开发、快速加载城市列表、拉框放大、拉框搜索、区域限制设置、几何运算、实时交通、检索与公交驾车查询、鼠标绘制工具等功能。

6 移植基础代码

6.1 在数据库中添加兴趣点坐标信息

在MySQL数据库中为兴趣点添加坐标信息，可以通过前面提到的百度地图拾取坐标系统来实现。

6.2 用数据库中的字段替代基础代码中原有常量

例1：var point = new BMap.Point（<？php echo $row['zuobiao']； ？>）；

例2：myGeo.getPoint（"<？php echo $row['name']； ？>"， …）；

6.3 将显示地图的功能代码至于函数中

6.4 在按钮点击事件中调用showmap函数

例：公交

7 地图生成效果

地图生成效果如图3所示。当点击周边配套按钮对应关键词时，例如“公交”，就会在下方生成兴趣点（华润大厦）周边相关公交信息，并在地图右侧显示相关公交信息详情。

8 百度地图坐标转换问题

虽然开发者可以方便地利用百度地图拾取坐标系统获得兴趣点坐标，但是在实际开发中会遇到已有的GPS或google地图坐标无法在百度地图中正确显示的问题。这是因为国际经纬度坐标标准为WGS-84，国内必须至少使用国测局制定的GCJ-02，对地理位置进行首次加密。而百度为了保护个人隐私，在国测局制定的坐标基础上，进行了BD-09二次加密措施，所以百度对外接口的坐标系并不是GPS采集的真实经纬度。这就需要通过坐标转换接口进行转换。在百度地图开放平台中提供了坐标转换API，用于将常用的非百度坐标（目前支持GPS设备获取的坐标、google地图坐標、soso地图坐标、amap地图坐标、mapbar地图坐标）转换成百度地图中使用的坐标，并可将转化后的坐标在百度地图JavaScript API、车联网API、静态图API、web服务API等产品中使用。

9 结语

综上所述，使用百度地图API创建Web地图交互应用，是一种简便的方式。开发者只需了解拾取和转换坐标的方法，熟悉地图创建流程和必要的类，巧用示例Demo和开源库，就可以高效创建地图交互应用。

参考文献

[1] jspopular-wiki[EB/OL].http：//www.Ibsyun.baidu.com.

[2] 地图API示例[EB/OL].http：//www.Ibsyun.baidu.com.

[3] JavaScript API 类参考[EB/OL].http：//www.Ibsyun.baidu.com，2017.

[4] JavaScript 开源库[EB/OL].http：//www.Ibsyun.baidu.com.

[5] 王柏元.百度地图API位置偏移的校准算法[EB/OL].（2016-02-17）.http：//www.wangbaiyuan.cn.