使用百度地图JavaScript实现驾车/公交/步行导航功能

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 5     <style type="text/css">
 6         body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
 7         #l-map{height:300px;width:100%;}
 8         #r-result,#r-result table{width:100%;}
 9         #main div{
10             float:left;width:33%;height:30px;
11             line-height:30px;
12             text-align:center;
13             border-right: 1px solid;
14         }
15         a:link{
16             text-decoration:none;
17         }
18         .clo{
19             border-right: 2px solid #666;
20         }
21         #r-result h1{
22             background:#A2CD5A;
23         }
24         #main{
25             overflow: hidden;
26         }
27         #car{
28             background:#6495ED;
29         }
30     </style>
31     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
32     <title>驾车导航的结果面板</title>
33 </head>
34 <body>
35 <div id="l-map"></div>
36 <div id="main">
37     <div class="clo" id="car"><a href="map3.html">驾车</a></div>
38     <div class="clo"><a href="map4.html">公交</a></div>
39     <div><a href="map5.html">步行</a></div>
40 </div>
41 <div id="r-result"></div>
42 </body>
43 </html>
44 <script type="text/javascript">
45     // 百度地图API功能
46     //创建地图实例
47     var map = new BMap.Map("l-map");
48     //创建点坐标,初始化地图,设置中心点坐标和地图级别
49     map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
50     //定位并获取坐标
51     var geolocation = new BMap.Geolocation();
52     geolocation.getCurrentPosition(function(r){
53         if(this.getStatus() == BMAP_STATUS_SUCCESS){
54             var mk = new BMap.Marker(r.point);
55             map.addOverlay(mk);
56             map.panTo(r.point);
57             //p1 获取的定位坐标
58             p1=new BMap.Point(r.point.lng,r.point.lat);
59             //公交路线
60             var transit = new BMap.TransitRoute(map, {
61                 renderOptions: {map: map, panel: "r-result"}
62             });
63             transit.search(p1, "魏公村");
64             //驾车路线
65             //var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
66             // driving.search(p1, "魏公村");
67             //步行路线
68             //var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
69             //walking.search("天坛公园", "故宫");
70         }
71         else {
72             alert(‘failed‘+this.getStatus());
73         }
74     },{enableHighAccuracy: true})
75
76 </script>

效果如图:

时间: 05-15

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

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

先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的.导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息. 2.我们这里说的步行导航和驾车导航,严格的说,应该是路线规划.从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据:如果是步行,过街天桥.地下通道.人行道做为搜索数据. ---------------------------

百度地图 JavaScript API极速版 开发体会

前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发者细分成普通web开发者和移动web开发者.正好用到了手机地图这块决定尝试一下.先看一下百度地图官方对它的定义.     本套百度地图API是专为手机浏览器提供的API,您可使用该套API,在手机页面中展示地图.标注位置.检索poi.查询线路等. 特点: 较同时兼容PC和手机浏览器的JavaScript API大众版而言,该版更适配移动设备,体积更小,加载地图速度更快,更省流

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

在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节的错: <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(121.38750613, 31.17

百度地图JavaScript API使用

最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以想着地图应该是相似的,百度地图可能也能实现这样的功能,于是就开始了百度地图JavaScript API使用的学习探究了. 简单介绍:百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用,包含了构建地图基本功能的各

[Baidu Map]百度地图 JAVASCRIPT API V2.0 大众版 工具类

关键代码: /* *@description 百度地图 JAVASCRIPT API V2.0 大众版 工具类 *@author YanZhiwei *@see http://developer.baidu.com/map/reference/index.php *@email [email protected] */ (function () { map = {}; infoWindow = {}; BmapUtils = { CONSTANT: { DYNAMIC_CITY: "上海&quo

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

PS:装了个deepin,感觉真的很高大上. 学习内容: 1.公交信息检索 2.路线规划   关于百度地图的开发也就这么多了.重要的部分也就那么些.原本打算搞到poi搜索就算了,不过看到了这两个方面还是忍不住去涉猎一下.其实实现的模式和poi搜索没有什么太多的区别.只要将数据信息发送给百度地图的服务器,我们对服务器的返回数据进行处理就可以了. 1.公交信息检索   公交信息检索,顾名思义就是搜索大巴和地铁.实现的过程和poi搜索没什么两样,一般都是现实例化对象,然后设置检索的参数和检索数据的监听

wex5 实战 百度地图JavaScript API 集成

wex5里提供了一个bMap组件来调用百度地图,在百度地图api里,有许多版本的api供开发者调用.在wex5开发里,JavaScript API 集成,经过测试,成功.今天从0开始一步一步操作,将来会制作更复杂的地图与定位效果,大家共同学习,共同进步. 一 演示效果: 二 设计思路: 用html页面,装入百度地图,再将html页面放入iframe页中. 三 代码实现: 1  申请百度会员,并申请百度api ak(开发者密钥) 所有的第三方集成都需要密钥,相当于为当前的用户请求分配的一个id,服

百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖物的基础上的. 如何做到,我点击覆盖物弹出信息框,信息框能够持续显示实时信息,直到点击关闭? 做下笔记,包括了自定义覆盖物标识.自定义信息窗口.信息窗口显示实时信息.清除覆盖物时信息窗口的显示问题等等. 贴张效果图:     代码: <script type="text/javascript&

最全面的百度地图JavaScript离线版开发

项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验. 大概需求是:每辆车上安装有公司接收机,会实时反馈车辆的坐标.速度.转向等信息,接收到各车辆信息后在百度地图上实时画出车辆位置.作业点不一定都有网络,所以要求离线开发. 此过程主要有三个技术点: 1. 如何获取离线的API 2. 如何获取离线瓦片图 3. 如何在离线状态下将WGS坐标转换成百度地图坐标 解决问题过程: 1. 既然百度地图官方不支持离线地图,那么我们需要想办法把在线的代码改成离线的代码. 这里可以参考:http:/