9.5.4　编写步行导航页面

步行导航页面的主要作用是接收通过图文消息URL传递的两个经纬度坐标，并在百度地图上显示出这两个坐标点之间的最优步行线路。步行导航页面route.jsp的代码如下：

  1. t;%@ page language="java" pageEncoding="gb2312"%>
  2. <%
  3.   String path = request.getContextPath();
  4.   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
  5.   getServerPort()+path+"/";
  6. %>
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9. <head>
  10.       <base href="<%=basePath%>">
  11.       <title>步行导航</title>
  12.       <meta name="viewport" content="width=device-width, 
  13.                    initial-scale=1.0,user-scalable=0;">
  14.       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  15.   <style type="text/css">
  16.        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
  17.   </style>
  18.   <script type="text/javascript" src="http://api.map.baidu.com/ 
  19.               api?v=1.5&ak=CA21bdecc75efc1664af5a195c30bb4e"></script>
  20. </head>
  21. <%
  22.   String p1 = request.getParameter("p1");
  23.   String p2 = request.getParameter("p2");
  24. %>
  25. <body>
  26.       <div id="allmap"></div>
  27. </body>
  28. <script type="text/javascript">
  29.   // 创建起点、终点的经纬度坐标点
  30.   var p1 = new BMap.Point(<%=p1%>);
  31.   var p2 = new BMap.Point(<%=p2%>);
  32.  
  33.   // 创建地图、设置中心坐标和默认缩放级别
  34.   var map = new BMap.Map("allmap");
  35.   map.centerAndZoom(new BMap.Point((p1.lng+p2.lng)/2, (p1.lat+p2.lat)/2), 17);
  36.   // 右下角添加缩放按钮
  37.   map.addControl(new BMap.NavigationControl(
  38.       {anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));
  39.  
  40.   // 步行导航检索
  41.   var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
  42.   walking.search(p1, p2);
  43. </script>
  44. </html>