<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. hadoop中namenode发生故障的处理方法

    Namenode 故障后,可以采用如下两种方法恢复数据: 方法一:将 SecondaryNameNode 中数据拷贝到 namenode 存储数据的目录: 方法 二: 使用 -importCheckp ...

  2. hash算法和常见的hash函数 [转]

       Hash,就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值. 这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空间,不同的输入可能 会散列成相同的输出,而不 ...

  3. 【Python】python模块加载

    一个python文件就是一个模块 标准模块 python自带的模块就是标准模块,也就说可以直接import进来的就是标准模块 import datetime import random 第三方模块 别 ...

  4. Python 3基础教程15-读文件内容

    前面两篇关于写文件和更新文件内容,我们最后都是手动去打开检查是否更新了.现在我们这里通过函数读取之前文件内容,打印到屏幕终端. 运行结果:

  5. HTML5标签学习笔记

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="con ...

  6. disable-network-config

    network: {config: disabled}

  7. ROS 常用

    可以通过以下命令查看环境变量: export | grep ROS 安装 sudo apt-get install XXX 卸载 dpkg --list //Debian package sudo a ...

  8. OpenCV实现张正友相机标定源代码

    本源代码基于VC++和opencv Opencv2.4.13.6版本开发,实现张正友相机标定源代码,资源包括完整源代码和12张棋盘图片,完美运行.Opencv2.4.13.6安装包下载地址:http: ...

  9. CocoaPods 安装与使用

    1.如果之前已经安装过的 gem list --local | grep cocoapods 会看到如下输出: cocoapods (1.1.1)cocoapods-deintegrate (1.0. ...

  10. weex & web app & vue

    weex & web app & vue https://weex-project.io/tools/playground.html https://weex.apache.org/ ...