<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. CentOS-6.3-minimal安装gnome桌面环境（转载）

    最近,想学着搞搞linux,从入门安装开始,先装centos6.3-minimal,发现是windowser最不习惯的命令界面,先升级桌面,教程如下. 1.添加一个普通用户,并设置密码useradd  ...

  2. 《Cracking the Coding Interview》——第4章：树和图——题目4

    2014-03-19 03:40 题目:给定一棵二叉树,把每一层的节点串成一个链表,最终返回一个链表数组. 解法:前序遍历,遍历的同时向各个链表里添加节点.水平遍历好像还不如前序遍历来得方便. 代码: ...

  3. 了解JavaScript核心精髓（三）

    1.js判断对象是否存在属性. hasOwnProperty(‘property’)  判断原型属性是否存在. "property" in o;  判断原型属性和原型链属性是否存在 ...

  4. HDU 4714 Tree2cycle 找规律

    假设最少删除的边的个数为cost,显然,最终答案即为cost+cost+1 (因为删除一条边,就会增加一个链,所以删除cost条边后,就会有cost+1条链,将这cost+1条链连接起来的代价为cos ...

  5. c#中onclick事件请求的两种区别

    在C#中如果是asp控件的button有两个click的调用,一个是OnClick,一个是OnClientClick.那么这两者有什么区别呢,下面就来说说区别. <asp:Button ID=& ...

  6. NIO--1

    1.为什么不直接用jdk NIO(1) API繁杂(2) 原始NIO可靠性不是很高.可靠性包括:断开重连,网络闪断,半包读写,失败缓存(3) NIO 的epoll BUG会导致多路复用器Selecto ...

  7. Charts & canvas & RGBA

    Charts & canvas RGBA color let stopFlag = 0; // show Charts const showCharts = (name = "&qu ...

  8. hdu 3354 Probability One

    Probability One Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  9. [POI2015][bzoj4383] Pustynia [线段树优化建图+拓扑排序]

    题面 bzoj权限题传送门 luogu传送门 思路 首先,这个题目显然可以从所有小的点往大的连边,然后如果没环就一定可行,从起点(入读为0)开始构造就好了 但是问题来了,如果每个都连的话,本题中边数是 ...

  10. 让JS帮你决定午餐吃什么吧

    最愁就是每天中午吃什么了,有空就做了个 JavaScript 轮播随机选择.会轮播预先自定义的菜单中,然后点选定的时候确定一款.代码可以查看本页源代码获得,你可以自定义修改菜单数组. 效果演示 准备选 ...