使用百度地图JavaScript实现驾车/公交/步行导航功能
<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实现驾车/公交/步行导航功能的更多相关文章
- 【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行
原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
- 百度地图JavaScript API使用
最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...
- 百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
- 【百度地图JavaScript API】手机端浏览器定位的实现
[百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476
- 百度地图JavaScript开发入门先知
最近项目紧急开发了一些百度地图的功能,觉得百度地图实数强大!于是今天不忙总结一下,看到不错的文章先转载. 文章出处:https://www.opengps.cn/Blog/View.aspx?id=1 ...
- 【高德地图API】从零開始学高德JS API(五)路线规划——驾车|公交|步行
先来看两个问题:路线规划与导航有什么差别?步行导航与驾车导航有什么差别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自己定义路线规划功能,这是别家没有 ...
- Android学习笔记之使用百度地图实现路线规划+公交信息检索
PS:装了个deepin,感觉真的很高大上. 学习内容: 1.公交信息检索 2.路线规划 关于百度地图的开发也就这么多了.重要的部分也就那么些.原本打算搞到poi搜索就算了,不过看到了这两个方面还 ...
- Android百度地图开发05之公交信息检索 + 路线规划
在上一篇blog中介绍过POI检索的使用,本篇blog主要介绍公交信息检索和线路规划的内容. 公交信息检索 实际上,公交信息检索与POI检索.在线建议检索非常相似,也是把你需要检索的信息发送给百度地图 ...
随机推荐
- Android onConfigurationChanged 收不到回调
我返现,90度横屏 旋转到270度横屏onConfigurationChanged 是收不到回掉的.尽管清单里面声明了什么: android:configChanges="orientati ...
- nohup 重定向的问题-- 费元星 站长
费元星 大牛 以前只知道使用nohup可以让一个程序后台执行,但是生成的日志文件都放到nohup.out中了,不能自己指定,尤其是在同一个目录下我需要让两个甚至多个程序都要后台执行时,这样看日志就比较 ...
- HTML5技巧
HTML5技巧 HTML5 技巧一:当今科技发展的速度真惊人,稍不留神,就可能无法跟上它的步伐.新一代的HTML-HTML5的发展也不停的带给我们新的惊喜,我们将通过这篇文章向大家介绍一些HTML ...
- springboot整合jersey
https://blog.csdn.net/xiongpei00/article/details/76576420
- 第一天docker入门
[01 入门] docker 最核心为三部分组成 镜像,仓库和容器 镜像:一个只读的模板 仓库:代码仓库,镜像的集合 容器:镜像的实例化进程 我们可以这样理解 容器就是一个沙箱,docker利用容器运 ...
- EasyUi DataGrid 请求Url两次问题
easyui datagrid 1.4 当total为0时,请求两次url问题 框架问题:需要在easyui文件后加修补补丁 /** * The Patch for jQuery EasyUI 1.4 ...
- 原始套接字--traceroute
traceroute, 也就是 trace route,跟踪路由.这个程序最早是Van Jacobson实现的.源码在网上可以找到,不过我还没有去找.是IP路由过程中对数据包TTL(Time to L ...
- realloc在aarch64_be-gcc的奇怪表现
最近遇到一个使用aarch64_be-gcc编译的ssh服务器出现不能通过ssh1协议使用密钥+passphrase不能正常登陆的问题. (⊙o⊙)…不要奇怪为啥还在用SSH1,我也在奇怪.. 一顿捣 ...
- 多线程和CPU的关系
什么是CPU (1) Central Progressing Unit 中央处理器,是一块超大规模的集成电路,是一台计算机的运算核心和控制核心. (2) CPU包括 ...
- 【bzoj2038】[2009国家集训队]小Z的袜子(hose) 莫队算法
原文地址:http://www.cnblogs.com/GXZlegend/p/6803860.html 题目描述 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终 ...