9.2.4　步行导航检索的使用

图9-2所示的xiaoqrobot的步行导航功能是调用百度地图JavaScript API实现的。百度地图JavaScript API是一套由JavaScript语言编写的应用编程接口，可以帮助开发者在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

在JavaScript API主页的左侧，可以看到“类参考”和“示例DEMO”选项，如图9-5所示。建议读者直接通过示例DEMO学习JavaScript API，如果遇到不明白的类、方法、参数等再去类参考中查询。

9.2.4　步行导航检索的使用 - 图1

图9-5　百度地图JavaScript API首页

示例DEMO中包含了大量的使用示例，并且配有完整的代码和说明，这对我们学习JavaScript API非常有帮助。示例DEMO的访问地址如下：

  1. http://developer.baidu.com/map/jsdemo.htm

选择示例DEMO中的“服务示例”→“步行导航检索”选项，地图上默认显示的是“天坛公园”到“故宫”的步行导航路线，窗口底部有该示例实现代码，代码如下：

  1.  1　<html>
  2.  2　<head>
  3.  3　  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.  4　  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5.  5　  <style type="text/css">
  6.  6　      body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
  7.  7　  </style>
  8.  8　  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=
  9. 　　　　您的密钥"></script>
  10.  9　  <title>步行导航检索</title>
  11. 10　</head>
  12. 11　<body>
  13. 12　  <div id="allmap"></div>
  14. 13　</body>
  15. 14　</html>
  16. 15　<script type="text/javascript">
  17. 16　  // 百度地图API功能
  18. 17　  var map = new BMap.Map("allmap");
  19. 18　  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  20. 19　  var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
  21. 20　  walking.search("天坛公园", "故宫");
  22. 21　</script>

第4行：百度地图API支持iOS、Android、WP8等移动平台，通过<meta>标签能够使地图更好地展示在手机浏览器上。

第8行：JavaScript API是由JavaScript语言编写的，在使用之前需要通过<script>标签将API引入到页面中。参数v为API版本号，目前最新版本为2.0。参数ak是访问密钥，需要设置成我们在9.2.2节申请的ak。

第12行：百度地图需要一个HTML元素作为容器才能展现在网页上。这里创建的是一个div元素。

第17行：地图API使用BMap作为命名空间，所有类均在该命名空间下。关键字new的作用是创建地图实例，并且需要在BMap.Map()的构造方法中指定地图容器的id。

第18行：在创建地图实例后，需要对其进行初始化。centerAndZoom()方法的作用是设置地图的中心点坐标和地图缩放级别。

第19～20行：JavaScript API的服务类WalkingRoute用于获取两点之间的步行路线规划方案，通过调用它的search()方法能够发起步行导航检索，search()方法的定义如下：

  1. search(start:String|Point|LocalResultPoi,end:String|Point|LocalResultPoi)

可以看出，search()方法有两个参数start和end，参数start表示起点，可以是关键字、经纬度坐标点或LocalSearchPoi实例；参数end表示终点，取值与start相对应。在本示例中，参数start和end都是关键词。