<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>指定起点导航</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style>
body{font-size:14px;}
h5{line-height:3em;padding:0;margin:0;}
a{color:#EE3399;}
a:hover{color:#99AA66;}
.txt{border:1px solid #ccc;background:none;padding:1px;}
.f-l{float:left;}
.t-c{text-align:center;}
.clear{clear:both;}
.hidden{display:none;}
.searchbox{border:4px solid #e5ecf9;height:40px;float:left;line-height:40px;padding:0 20px;margin:0 0 0 50px;}
.mainbox{margin:20px 0 0;}
.boxmap{width:700px;height:500px;border:1px solid gray;float:left;}
.boxpanel{width:250px;float:left;margin:0 0 0 10px;border:1px solid gray;padding:0 10px 10px;}
#startPanel,#endPanel{border:1px solid #FA8722;font-size:12px;}
#startPanel div,#endPanel div{padding:5px;}
#startPanel p,#endPanel p{margin:0;paddin:0;line-height:1.2em;}
#drivingPanel{border:1px solid #6688EE;}
</style>
</head>
<body>
<div>
    <img class="f-l" src="http://map.baidu.com/img/logo-map.gif"/>
    <div class="searchbox">
        从<input class="txt" type="text" value="" id="startInput"/>到<input class="txt" type="text" disabled="disabled" value="天府广场" id="endInput"/>
        驾车<input type="radio" name="rdo"   checked="checked" value="0">&nbsp;公交<input name="rdo" value="1" type="radio" >
        &nbsp;<input type="button" value="查询" onClick="mDriving()"/>
    </div>
</div>
<div class="clear"></div>
<div class="mainbox">
    <div class="boxmap" id="container"></div>
    <div class="boxpanel hidden" id="box">
        <h5>起点选择&nbsp;<a href="#" onClick="document.getElementById('startPanel').style.display='block';"& gt;(展开)</a></h5>
        <div id="startPanel"></div>       
        <div id="drivingPanel"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
var setindex=0;
var map =new BMap.Map("container");            // 创建Map实例
var point =new BMap.Point(104.072244,30.663279);    // 创建点坐标
//var myIcon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/img/fox.gif", new BMap.Size(300,157)); ,{icon:myIcon}
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中
map.centerAndZoom(point,15);         // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT,offset: new BMap.Size(10, 10)}));
map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
map.addControl(new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}));
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小

var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天府广场</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://imgsrc.baidu.com/baike/abpic/item/d7c9ca3f7aa71af87d1e71cb.jpg' width='139' height='104' title='天府广场'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天府广场，是位于成都市中心城区的一座广场，也是成都市最重要的休闲广场。...</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
function getInfoW(obj){
    var startInfowin =new BMap.InfoWindow("</br>"+obj.title+"</br>"+obj.address+"<p class='t-c'><input value='选为起点' type='button'    οnclick='startDeter();' /></p>");
    return startInfowin;
}
function getInfoW_M(obj){   
    startPoint=obj.point;
    map.openInfoWindow(getInfoW(obj),obj.point);
}

var startResults =null;
var startPoint;
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true, panel:'drivingPanel'}});
var driving_trans = new BMap.TransitRoute(map, {renderOptions:{map: map, autoViewport: true, panel:'drivingPanel'}});

var startOption = {
  onSearchComplete: function(results){
    // 判断状态是否正确
if (startSearch.getStatus() == BMAP_STATUS_SUCCESS){
      startResults = results;
      var s = [];
      map.clearOverlays();
      for (var i =0; i < results.getCurrentNumPois(); i ++){
        s.push("<div><p><a οnmοuseοver='getInfoW_M(startResults.getPoi("+i+"))' href='#'>");
        s.push(results.getPoi(i).title);
        s.push("</a></p><p>");
        s.push(results.getPoi(i).address);
        s.push("</p></div>");   
        var marker_c=new BMap.Marker(results.getPoi(i).point);       
            (function(){                     
                     var cur=i;
                     var mak=marker_c;   
                     mak.addEventListener("click",function(){       
                     startPoint=results.getPoi(cur).point;
                     this.openInfoWindow(getInfoW(results.getPoi(cur)));      // 打开信息窗口
                    });   
            })();
           
        map.addOverlay(marker_c);              // 将标注添加到地图中
      }
      document.getElementById("startPanel").innerHTML = s.join("");
    }else{startResults =null;alert("没有搜索到路线，请确定起点是否有效!");}
  }
};

function getInd(){
  var value="";
  var radio=document.getElementsByName("rdo");
  for(var i=0;i<radio.length;i++){
    if(radio[i].checked==true){
      value=radio[i].value;
      break;
    }
  }
  return value;
}
//创建2个搜索实例
var startSearch =new BMap.LocalSearch(map,startOption);
function mDriving(){
    setindex= getInd();   
    var startPlace = document.getElementById("startInput").value;
    startSearch.search(startPlace);   
    document.getElementById("box").style.display="block";
    document.getElementById("startPanel").style.display="block";   
}

function startDeter(){   
    map.clearOverlays(); 
    var marker =new BMap.Marker(startPoint);
    map.addOverlay(marker);
    map.addOverlay(new BMap.Marker(point));   
    if(setindex==0)
    {
        driving.search(startPoint,point);
    }else{
        driving_trans.search(startPoint,point);
    }   
    document.getElementById("startPanel").style.display="none";
}
</script>

转载于:https://www.cnblogs.com/gd123/archive/2012/07/03/2575128.html

百度api实现公交驾车查询相关推荐

  1. 百度API全国城市地区天气查询HTML源码

    介绍: 百度API全国城市地区天气查询HTML源码 网盘下载地址: https://zijiewangpan.com/LlvIkuYKeKt 图片:

  2. android的百度地图sdk获取ip,基于百度地图API的ip地址查询

    说明:使用ip地址查询太麻烦,偶然搜索发现有人已经写过基于百度API的ip地址查询,这个是前人的结晶,我只是修改了一些,勿喷. 用的python2.7,编码问题真是坑. 百度mapAPI私钥申请:ht ...

  3. 百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）

    想仿淘宝做一个物流查询,分为:寄件点.当前点. 收件点 和 路线图. 快递已走的路径(寄件点到当前点的颜色)和未走的路径(当前点到收件点)用 颜色 进行区分. 利用百度地图提供的API(当时遇到了点问 ...

  4. 使用百度API实现实时公交站点查询及地图显示

    需求:当外部输入公交站点名称,点击查询按钮的时候,会在div上显示所有包含此公交站点的公交线路号的列表,点击列表中的项,会在百度地图上绘制出其线路. 实现: 第一步:生成经过此公交站点的所有线路列表 ...

  5. 使用百度API实现实时公交站点查询及列表显示

    需求:当外部输入公交站点名称,点击查询按钮的时候,会在div上显示所有包含此公交站点的公交线路号的列表,点击列表中的项,会绘制出其线路列表. 实现: 第一步:生成经过此公交站点的所有线路列表 第二步: ...

  6. 使用百度API实现实时公交线路查询及列表显示

    当外部输入公交线路号,点击查询按钮的时候,会在div上显示所有包含此公交线路号的列表,点击列表中的项,绘制其站点列表. 实现: 第一步:生成线路列表 第二步:列表项点击事件 与公交地图_按线路查询相同 ...

  7. 使用百度API实现实时公交线路查询及地图显示

    需求:当外部输入公交线路号,点击查询按钮的时候,会在div上显示所有包含此公交线路号的列表,点击列表中的项,会在百度地图上绘制出其线路. 实现: 第一步:生成线路列表 使用的百度API:服务类中Bus ...

  8. PHP学习笔记：利用百度api实现手机归属地查询

    从来没有用过api,都不知道怎么获得api的数据,跟着demo,然后修改,终于实现了手机号码查询的功能,代码和说明很全,大家试试. <?php /*** Created by jianqingw ...

  9. 地图API公交线路查询

    地图API公交线路查询详见 http://www.hjlib.org/cd/tiles/zoom/index.html

最新文章

  1. ISA Server中基于L2TP实现远程拨入***
  2. 【错误记录】TabLayout 升级支持库版本后报错 ( support:design 支持库升级到 28.0.0 后源码发生变更 )
  3. java程序员闯关题网站_Java程序员每周必逛的十大学习网站
  4. 「后端小伙伴来学前端了」记录自己的踩坑第一天 | CSS:vertical-align 属性
  5. windows10 系统设置一键备份
  6. 软件开发生命周期中的设计阶段_测试基础——软件开发生命周期
  7. 在.NET Core中使用Channel（一）
  8. 视觉SLAM笔记（12） 四元数
  9. How does RECORDLENGTH affect your exp speed?
  10. codova添加android慢_从 0 开始学 Linux 内核之 android 内核栈溢出 ROP 利用
  11. mysql 2182_MySql常用命令总结
  12. 全球抵押销售点(POS)软件行业调研及趋势分析报告
  13. Jenkins-SCM
  14. 淘宝客CMS,公众号,小程序,淘客APP,外卖返利系统
  15. WinRAR去除广告
  16. autoconfig
  17. 搜索题集整理（DFSBFS）
  18. 求矩阵主对角线元素的和
  19. 三面微软，四面雅虎，外企面经复盘总结，那些你不知道的面试技巧
  20. 一个HashMap对象所占内存的分析

热门文章

  1. Style Intelligence应用之电商存货周转率分析
  2. 基于PID控制的四旋翼飞行器仿真（Matlab代码实现）
  3. SD-WAN如何重塑零售行业？
  4. 朗强科技：HDMI画面分割器原理、功能、分割模式、应用
  5. 中国新季度智能手机市场份额发布，看完只想说心疼三星
  6. 记一次 .NET 某妇产医院 WPF内存溢出分析
  7. HADAMARD不等式的证明
  8. iText5使用绝对定位制作pdf打印针式发票，支持跳页
  9. ●计蒜客 百度地图的实时路况
  10. web课程设计网页制作：基于html实现传统文化壁画手工艺带psd设计图（15页）