<html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

     <style type="text/css">

         body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}

         #l-map{height:300px;width:100%;}

         #r-result,#r-result table{width:100%;}

         #main div{

             float:left;width:33%;height:30px;

             line-height:30px;

             text-align:center;

             border-right: 1px solid;

         }

         a:link{

             text-decoration:none;

         }

         .clo{

             border-right: 2px solid #666;

         }

         #r-result h1{

             background:#A2CD5A;

         }

         #main{

             overflow: hidden;

         }

         #car{

             background:#6495ED;

         }

     </style>

     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

     <title>驾车导航的结果面板</title>

 </head>

 <body>

 <div id="l-map"></div>

 <div id="main">

     <div class="clo" id="car"><a href="map3.html">驾车</a></div>

     <div class="clo"><a href="map4.html">公交</a></div>

     <div><a href="map5.html">步行</a></div>

 </div>

 <div id="r-result"></div>

 </body>

 </html>

 <script type="text/javascript">

     // 百度地图API功能

     //创建地图实例

     var map = new BMap.Map("l-map");

     //创建点坐标,初始化地图，设置中心点坐标和地图级别

     map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);

     //定位并获取坐标

     var geolocation = new BMap.Geolocation();

     geolocation.getCurrentPosition(function(r){

         if(this.getStatus() == BMAP_STATUS_SUCCESS){

             var mk = new BMap.Marker(r.point);

             map.addOverlay(mk);

             map.panTo(r.point);

             //p1 获取的定位坐标

             p1=new BMap.Point(r.point.lng,r.point.lat);

             //公交路线

             var transit = new BMap.TransitRoute(map, {

                 renderOptions: {map: map, panel: "r-result"}

             });

             transit.search(p1, "魏公村");

             //驾车路线

             //var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});

             // driving.search(p1, "魏公村");

             //步行路线

             //var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});

             //walking.search("天坛公园", "故宫");

         }

         else {

             alert('failed'+this.getStatus());

         }

     },{enableHighAccuracy: true})

 </script>

效果如图：

使用百度地图JavaScript实现驾车/公交/步行导航功能的更多相关文章

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

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

  2. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  3. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  4. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  5. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  6. 百度地图JavaScript开发入门先知

    最近项目紧急开发了一些百度地图的功能,觉得百度地图实数强大!于是今天不忙总结一下,看到不错的文章先转载. 文章出处:https://www.opengps.cn/Blog/View.aspx?id=1 ...

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

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

  8. Android学习笔记之使用百度地图实现路线规划+公交信息检索

    PS:装了个deepin,感觉真的很高大上. 学习内容: 1.公交信息检索 2.路线规划   关于百度地图的开发也就这么多了.重要的部分也就那么些.原本打算搞到poi搜索就算了,不过看到了这两个方面还 ...

  9. Android百度地图开发05之公交信息检索 + 路线规划

    在上一篇blog中介绍过POI检索的使用,本篇blog主要介绍公交信息检索和线路规划的内容. 公交信息检索 实际上,公交信息检索与POI检索.在线建议检索非常相似,也是把你需要检索的信息发送给百度地图 ...

随机推荐

  1. 编译ffmpeg

    1.下载ffmpeg-0.9.2.tar.gz  http://ffmpeg.org/releases/ 下载需要的版本 2.编译linux (centos5.5) 64位版本 ./configure ...

  2. Oracle 11g数据库安装与卸载的方法图解（windows）

    一.Oracle 11g安装 安装之前要先确定自己的电脑配置,以windows为例,如果是win7以下系统如xp等,可以选择Oracle 10g.因为10g的程序文件只有200多兆,而11g及达到了2 ...

  3. Linux 批量删除文件后缀

    例子: [zengs@gene CASP9]$ lscasp9.ids T0526 T0538 T0550 T0562 T0574 T0586 T0598 T0610 T0622 T0634T0515 ...

  4. WIN8、WIN7访问Windows Server 2003服务器的数据库速度很慢、远程速度很慢的解决方法

    原因是微软在WIN7开始上加入了网络速度限制.在控制台执行以下命令即可解决: netsh interface tcp set global autotuninglevel=disabled

  5. 数据库——mysql内置功能（11）

    1.视图 视图是一个虚拟表(非真实存在),其本质是(根据SQL语句获取动态的数据集,并未其命名),用户使用时只需使用(名称)即可获取结果集,可以将该结果集当做表来使用 使用视图我们可以把查询过程中的临 ...

  6. protobuf-net与FlatBuffers

    protobuf-net Protobuf是google开源的一个项目,用户数据序列化反序列化,google声称google的数据通信都是用该序列化方法.它比xml格式要少的多,甚至比二进制数据格式也 ...

  7. Codeforces 1088E 树形dp+思维

    比赛的时候看到题意没多想就放弃了.结果最后D也没做出来,还掉分了,所以还是题目做的太少,人太菜. 回到正题: 题意:一棵树,点带权值,然后求k个子连通块,使得k个连通块内所有的点权值相加作为分子除以k ...

  8. A. Vasya and Book

    题目原址 http://codeforces.com/contest/1082/problem/A 题目内容 一共n页书,现在位于第x位,想要看第y页,每次只能翻d页,注意总能翻到第1页和第n页. V ...

  9. HDU 4057 Rescue the Rabbit ( AC自动机 + 状态压缩DP )

    模板来自notonlysuccess. 模式串只有10个,并且重复出现的分值不累加,因此很容易想到状态压缩. 将模式串加入AC自动机,最多有10*100个状态. dp[i][j][k]:串长为i,在T ...

  10. java连接Oracle数据库实现增删改查并在Navicat中显示

    创建TEST表 eclipse中的java项目 代码 数据库方法类 DBUtil: package util; import java.sql.Connection; import java.sql. ...