<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. 部署微软Nano Server的好处是什么?

    虚拟化对数据中心效率和硬件利用率产生了戏剧性的影响,但是接下来有关系统整合的主要责任落 在了操作系统的重量上.虚拟机通常运行企业级操作系统,比如Windows Server,但是Windows Ser ...

  2. leetcode 【 Remove Duplicates from Sorted List 】 python 实现

    题目: Given a sorted linked list, delete all duplicates such that each element appear only once. For e ...

  3. script通过script标签跨域加载数据

    /********************************************************** 说明:跨域请求数据Javascript组件 ------------------ ...

  4. 【java下午茶系列】java三重奏之封装

      java中的封装.继承.多态可谓是踏入这一行业的必经之槛,诸多新人在不明就里的情况下将其各种概念背的是滚瓜烂熟.即便是工作多年之后,也不见得能说出个所以然,或许冥冥之中已经写过无数封装的代码,只是 ...

  5. 关于python中的 if __name__ == 'main'

    name 是内置变量,它表示的是当前所在模块的名字,同时还能反应一个包的结构. a ├── b │   ├── c.py │   └── __init__.py └── __init__.py 目录中 ...

  6. jwt手动生成access_token

    from rest_framework_jwt.settings import api_settings # 手动为用户生成tokenjwt_payload_handler = api_setting ...

  7. 计算机概念总结5-阿里云的了解2-slb

    https://help.aliyun.com/document_detail/27539.html?spm=a2c4g.11186623.6.544.3c3c5779UdHKeO 概述 负载均衡(S ...

  8. 原始套接字--简易ping程序

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <errno.h> ...

  9. jQuery基础知识点（下）

    在实际开发中,jQuery的实践性非常强大.上一篇本人已经整理出了一部分基础知识点,该文即是对以上的补充和扩展. 1.表单值的操作 //获取文本框的值 //txt.value var val = $( ...

  10. npm & npm config

    npm command show npm config https://docs.npmjs.com/cli/config https://docs.npmjs.com/cli/ls https:// ...