效果图：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>百度地图-驾车/公交查询</title>
  5.     <link href="style/style.css" rel="stylesheet" type="text/css" />
  6.     <script src="script/jquery.min.js" type="text/javascript"></script>
  7.     <!-- http://api.map.baidu.com/api?v=2.0&ak=您的密钥" -->
  8.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0B3c1575c78bfb0d1c52a0660cae3491"></script>
  9. </head>
  10. <body>
  11.     <div class="maincontain" id="test">
  12.         <div class="eMapsInfo">
  13.             <!--搜索控制-->
  14.             <div class="eMapsTop">
  15.                 <span>线路查询</span> 从
  16.                 <input class="txt" type="text" value="东方明珠" id="fromPlace" />
  17.                 到<select id="endInput">
  18.                     <option value="虹桥T1" selected="selected">虹桥T1</option>
  19.                     <option value="虹桥T2">虹桥T2</option>
  20.                     <option value="浦东机场">浦东机场</option>
  21.                 </select>
  22.                 驾车<input type="radio" name="rdo" checked="checked" value="0"> 公交<input name="rdo"
  23.                     value="1" type="radio">
  24.                 <input type="button" value="查询" id="btnSearch" />
  25.             </div>
  26.             <!--地图-->
  27.             <div class="eMaps">
  28.                 <div class="boxmap" id="container">
  29.                 </div>
  30.             </div>
  31.             <!--右侧选项-->
  32.             <div class="boxpanel" id="box">
  33.                 <h5>
  34.                     起点选择 <a href="javascript:void(0)" id="btnExpand">(展开)</a></h5>
  35.                 <div id="startPanel">
  36.                 </div>
  37.                 <div id="drivingPanel">
  38.                 </div>
  39.             </div>
  40.             <div class="clear">
  41.             </div>
  42.         </div>
  43.     </div>
  44.     <script type="text/javascript">
  45.  
  46.         var setindex = 0;
  47.         var map = new BMap.Map("container");            // 创建Map实例
  48.         var point = new BMap.Point(121.357522, 31.193063);    // 创建点坐标
  49.         var marker = new BMap.Marker(point);  // 创建标注
  50.         map.addOverlay(marker);              // 将标注添加到地图中
  51.         map.centerAndZoom(point, 12);         // 初始化地图,设置中心点坐标和地图级别。
  52.         map.addControl(new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10) }));
  53.         map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
  54.         map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
  55.         map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
  56.         map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }));
  57.         var sContent =
  58. "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>上海机场（集团）有限公司  </h4>" +
  59. "<p style='margin:0;line-height:1.5;font-size:13px;'>地址：中国上海虹桥国际机场迎宾二路200号<br/>电话：86 21 6269 2200</p>" +
  60. "</div>";
  61.         var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
  62.         map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
  63.         function getInfoW(obj) {
  64.             var startInfowin = new BMap.InfoWindow("</br>" + obj.title + "</br>" + obj.address + "<p class='t-c'><input value='选为起点' type='button'    onclick='startDeter();' /></p>");
  65.             return startInfowin;
  66.         }
  67.         function getInfoW_M(obj) {
  68.             startPoint = obj.point;
  69.             map.openInfoWindow(getInfoW(obj), obj.point);
  70.         }
  71.  
  72.         var startResults = null;
  73.         var startPoint;
  74.         var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true, panel: 'drivingPanel'} });
  75.         var driving_trans = new BMap.TransitRoute(map, { renderOptions: { map: map, autoViewport: true, panel: 'drivingPanel'} });
  76.         var startOption = {
  77.             onSearchComplete: function (results) {
  78.                 // 判断状态是否正确
  79.                 if (startSearch.getStatus() == BMAP_STATUS_SUCCESS) {
  80.                     startResults = results;
  81.                     var s = [];
  82.                     map.clearOverlays();
  83.                     for (var i = 0; i < results.getCurrentNumPois(); i++) {
  84.                         s.push("<div><p><a onmouseover='getInfoW_M(startResults.getPoi(" + i + "))' href='#'>");
  85.                         s.push(results.getPoi(i).title);
  86.                         s.push("</a></p><p>");
  87.                         s.push(results.getPoi(i).address);
  88.                         s.push("</p></div>");
  89.                         var marker_c = new BMap.Marker(results.getPoi(i).point);
  90.                         (function () {
  91.                             var cur = i;
  92.                             var mak = marker_c;
  93.                             mak.addEventListener("click", function () {
  94.                                 startPoint = results.getPoi(cur).point;
  95.                                 this.openInfoWindow(getInfoW(results.getPoi(cur)));      // 打开信息窗口
  96.                             });
  97.                         })();
  98.  
  99.                         map.addOverlay(marker_c);              // 将标注添加到地图中
  100.                     }
  101.                     document.getElementById("startPanel").innerHTML = s.join("");
  102.                 } else { startResults = null; alert("没有搜索到路线，请确定起点是否有效!"); }
  103.             }
  104.         };
  105.  
  106.         //取得交通方式
  107.         function getType() {
  108.             var value = "";
  109.             var radio = document.getElementsByName("rdo");
  110.             for (var i = 0; i < radio.length; i++) {
  111.                 if (radio[i].checked == true) {
  112.                     value = radio[i].value;
  113.                     break;
  114.                 }
  115.             }
  116.             return value;
  117.         }
  118.         function startDeter() {
  119.             map.clearOverlays();
  120.             var marker = new BMap.Marker(startPoint);
  121.             map.addOverlay(marker);
  122.             map.addOverlay(new BMap.Marker(point));
  123.             if (setindex == 0) {
  124.                 driving.search(startPoint, point);
  125.             } else {
  126.                 driving_trans.search(startPoint, point);
  127.             }
  128.             document.getElementById("startPanel").style.display = "none";
  129.         }
  130.  
  131.         //创建2个搜索实例
  132.         var startSearch = new BMap.LocalSearch(map, startOption);
  133.  
  134.         //搜索按钮
  135.         $("#btnSearch").click(function () {
  136.             setindex = getType();
  137.             var fromPlace = document.getElementById("fromPlace").value;
  138.             startSearch.search(fromPlace);
  139.             var toPlace = $("#endInput").val();
  140.             switch (setindex) {
  141.                 case "0":
  142.                     driving.search(fromPlace, toPlace);
  143.                     break;
  144.                 case "1":
  145.                     driving_trans.search(fromPlace, toPlace);
  146.                     break;
  147.             }
  148.  
  149.             document.getElementById("box").style.display = "block";
  150.             document.getElementById("startPanel").style.display = "block";
  151.         });
  152.  
  153.         //控制收起/展开
  154.         $("#btnExpand").click(function () {
  155.             $(this).text($(this).text() == "(收起)" ? "(展开)" : "(收起)");
  156.             if ($(this).text() == "(收起)") {
  157.                 $("#startPanel").show();
  158.             } else {
  159.                 $("#startPanel").hide();
  160.             }
  161.  
  162.         });
  163.     </script>
  164. </body>
  165. </html>

css：

  1. body
  2. {
  3.     font-size: 12px;
  4. }
  5. #startPanel p, #endPanel p
  6. {
  7.     margin: 0;
  8.     padding: 0;
  9.     line-height: 1.2em;
  10. }
  11. #startPanel div, #endPanel div
  12. {
  13.     padding: 5px;
  14. }
  15. #startPanel, #endPanel
  16. {
  17.     border: 1px solid #FA8722;
  18.     font-size: 12px;
  19. }
  20.  h5 {
  21. line-height: 3em;
  22. padding: 0;
  23. margin: 0;
  24. }
  25. .boxpanel
  26. {
  27.     width: 167px;
  28.     float: right;
  29.     border: 1px solid gray;
  30.     padding: 0 2px 10px;
  31.     height: 502px;
  32.     overflow-y: auto;
  33. }
  34. #container
  35. {
  36.     width: 100%;
  37.     height: 100%;
  38.     overflow: hidden;
  39.     margin: 0;
  40. }
  41. .eMapsInfo
  42. {
  43.     width: 737px;
  44.     margin: 0 auto;
  45.     padding: 20px 0;
  46.     position: relative;
  47. }
  48. .eMaps
  49. {
  50.     border: 6px solid #d2e0ee;
  51.     background: #fff;
  52.     height: 502px;
  53.     width: 552px;
  54.     float: left;
  55. }
  56. .eMapsTop
  57. {
  58.     height: 30px;
  59.     padding-top: 20px;
  60.     color: #333333;
  61.     font-size: 14px;
  62. }
  63. .boxpanel
  64. {
  65.     width: 167px;
  66.     float: right;
  67.     border: 1px solid gray;
  68.     padding: 0 2px 10px;
  69.     height: 502px;
  70.     overflow-y: auto;
  71. }

jquery用的1.4.2

打包下载：http://download.csdn.net/detail/a497785609/6878687

百度地图 驾车/公交查询Demo（支持多起点多终点）的更多相关文章

  1. iOS 百度地图 小的特点demo

    先上图的样子 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDEyMzIwOA==/font/5a6L5L2T/fontsize/400/fill ...

  2. 使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置

    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...

  3. 百度地图api公交路线，IE下跳转百度地图后中文变成乱码的解决办法

    百度开放的公交路线的链接,IE跳转会出现中文变成乱码的问题.如图: //创建InfoWindow function createInfoWindow() { var desDiv = []; desD ...

  4. 百度地图二次开发Demo

    单点标注:电子显示对应位置的图片,信息框 多点标注(批量点标注): 多点连线(基于多个点形成路径): 若须要Demo源码:请给我发邮箱 1507026255@qq.com 转载请注明小刘

  5. Android百度地图相关内容汇总

    Android百度地图知识讲解 1.百度地图开发环境搭建    http://www.apkbus.com/android-116050-1-1.html 2.Android百度地图系列教程    h ...

  6. 【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航

    原文:[百度地图API]圣诞节里不会迷路的麋鹿--驾车导航 任务描述: 可能大家还不知道,圣诞老人是爱迷路的老爷爷! 今年圣诞节又要到了,圣诞老人又要出来送礼物了.可是,他灰常的迷路呢! 还好,他有一 ...

  7. 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

    原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...

  8. 【百度地图API】让用户选择起点和终点的驾车导航

    原文:[百度地图API]让用户选择起点和终点的驾车导航 摘要: 如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果.但同一个城市可能有多个机场和火车站,那么,如何用 ...

  9. 【高德地图API】从零開始学高德JS API（五）路线规划——驾车|公交|步行

    先来看两个问题:路线规划与导航有什么差别?步行导航与驾车导航有什么差别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自己定义路线规划功能,这是别家没有 ...

随机推荐

  1. cocos2d-x HelloWorld 代码一撇

        本节简单对新生成的hellowrold 项目相关代码进行简单分析,具体以代码注释的方式展示给大家.代码相对简单些,在此不作过多赘述,直接上码: int APIENTRY _tWinMain(H ...

  2. vc维的解释

    在做svm的时候我们碰到了结构风险最小化的问题,结构风险等于经验风险+vc置信范围,当中的vc置信范围又跟样本的数量和模型的vc维有关,所以我们看一下什么是vc维 首先看一下vc维的定义:对一个指标函 ...

  3. Java：volatile 关键字的一点理解

    背景 学了六年C#,一直没有使用过 volatile,对多线程编程也是偶尔才会使用,这次学习 Java 又遇到了 volatile,准备稍微深入的了解一下. volatile 的作用? 几乎所有支持这 ...

  4. 使用tortoisegit访问git@oschina

    转自:http://www.3lian.com/edu/2014/01-03/121350.html 首先,如果你想使用git@oschina ,你的电脑上必须先有git工具:你可以从这里获取谷歌提供 ...

  5. 免sudo使用docker命令

    背景 因为使用的是sudo安装docker,所以会导致一个问题.以普通用户登录的状况下,在使用docker images时必须添加sudo,那么如何让docker免sudo依然可用呢?于是开始搜索解决 ...

  6. 11.线程通信CountDownLatch

    package demo2; import java.util.concurrent.CountDownLatch; /** * Created by liudan on 2017/7/27. */ ...

  7. 数学图形(2.8)Viviani曲线

    维维亚尼(Viviani , Vincenzo)意大利数学家.1622年4月5日生于托斯卡纳大区佛罗伦萨:1703年9月22日卒于佛罗伦萨. 这是一个圆柱与一个球相交而生成的曲线. #http://w ...

  8. JS-得到屏幕宽高、页面宽高

    window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width ...

  9. SqlServer 删除重复记录

    在给一个客户上线的系统里发现有一张表里出现了重复的数据,结果通过排查代码发现确实业务逻辑有问题,在修改了代码后需要将为数据库里的重复数据删除 在CSDN上找到解决方案,对线上的数据库尽量不要执行删除操 ...

  10. Mac怎样改动开机password

    Mac开机password忘了,咋办?开不开机啦 1.打开你的Mac,command +S 进入你的终端界面 2.输入/sbin/mount -uaw / 3.输入rm /var/db/.AppleS ...