<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. TP5 中出现 No input file specified

    之前用php5.4 更新至php7之后原tp5项目出现 No input file specified 修改方法: 打开public目录下的.htaccess文件,把:RewriteRule ^(.* ...

  2. 【转】Git命令解说

    3.12. Git branch  3.12.1. 总述  当第一次执行git init时,系统就会创建一个名为“master”的分支. 而其它分支则通过手工创建.  下面列举一些常见的分支策略:  ...

  3. USACO Section2.1 Hamming Codes 解题报告 【icedream61】

    hamming解题报告----------------------------------------------------------------------------------------- ...

  4. java初学4

    1.interface接口 (1)[修饰符] interface 接口名 extends 父接口1,父接口2....        •没有构造方法,不能实例化;        •接口只能继承接口,不能 ...

  5. java初学3

    1.包装类 Java提倡的万物皆对象,但是数据类型的划分出现了基本数据类型和引用数据类型,那么我们怎么能把基本数据类型称为对象呢? Java为每个原始类型提供了封装类,Integer是java为int ...

  6. java单例模式（类只能创建唯一对象）

    //饿汉式 class Single { private static final Single s= new Single(); private Single(){} public static S ...

  7. java值转递？引用传递？

    值传递是传递的是原值的副本,引用传递传递的是原值. 在Java中,如果是基本数据类型,传递的是该参数字面量值的拷贝.如果是引用数据类型,传递的是该参数所引用对象在堆中地址的拷贝. swap(int a ...

  8. hdu 1242 Rescue (BFS)

    Rescue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  9. P3531 [POI2012]LIT-Letters

    题目描述 Little Johnny has a very long surname. Yet he is not the only such person in his milieu. As it ...

  10. 洛谷 P2609 [ZJOI2012]数列 解题报告

    P2609 [ZJOI2012]数列 题目描述 小白和小蓝在一起上数学课,下课后老师留了一道作业,求下面这个数列的通项公式: A(0)=0 A(1)=1 A(2i)=A(i) (对于任意 i>0 ...