百度地图API - 行车路线轨迹

转自：http://hi.baidu.com/hackerbase/item/0a54b12d0005690e72863e3c

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>驾车途经点</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<p><input type='button' value='开始' οnclick='run();' /></p>
<div style="width:820px;height:500px;border:1px solid gray" id="container"></div>
<script type="text/javascript">
   var map = new BMap.Map("container");
   map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
   map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
   map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
   map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

   var myP1 = new BMap.Point(106.521436,29.532288);    //起点-重庆
   var myP2 = new BMap.Point(108.983569,34.285675);    //终点-西安
   var myP3 = new BMap.Point(116.404449,39.920423);    //终点-北京

   window.run = function (){
       map.clearOverlays();                        //清除地图上所有的覆盖物
       var driving = new BMap.DrivingRoute(map);    //创建驾车实例
       driving.search(myP1, myP2);                 //第一个驾车搜索
       driving.search(myP2, myP3);                 //第二个驾车搜索
       driving.setSearchCompleteCallback(function(){
           var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组

           var polyline = new BMap.Polyline(pts);
           map.addOverlay(polyline);

           var m1 = new BMap.Marker(myP1);         //创建3个marker
           var m2 = new BMap.Marker(myP2);
           var m3 = new BMap.Marker(myP3);
           map.addOverlay(m1);
           map.addOverlay(m2);
           map.addOverlay(m3);

           var lab1 = new BMap.Label("起点",{position:myP1});        //创建3个label
           var lab2 = new BMap.Label("途径点",{position:myP2});
           var lab3 = new BMap.Label("终点",{position:myP3});
           map.addOverlay(lab1);
           map.addOverlay(lab2);
           map.addOverlay(lab3);

           setTimeout(function(){
               map.setViewport([myP1,myP2,myP3]);          //调整到最佳视野
           },1000);

       });
   }
</script>
</body>
</html>

百度地图API - 行车路线轨迹相关推荐

百度地图API显示车辆运行轨迹并动画展示
百度地图api 版本:3.0 开发文档:http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a0b0 需求描述项 ...
百度地图api实现路线规划之步行驾车
着手做一个用户轨迹的demo,大概分了下步骤:1.过滤边缘点:2.分段量化聚类焦点关键点:3.基于关键点的百度地图api路线规划:4:路线择优我们先看下第三点基于键点的百度地图api路线规划的方案, ...
使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
地图上制作线路的动画_使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
百度地图绘制行车路线
百度地图开发平台 http://lbsyun.baidu.com/ 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图 ...
前端捕捉轨迹_web端百度地图API实现实时轨迹动态展现
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...
python调用百度地图画轨迹图_百度地图 API 绘制路线
后台拿到数据返回给了jsp页面,并且显示到了地图上 . 现在要根据两个位点.绘制出他们之间的路线. 有实现过这个功能的大神,给指点一下,如果有实例,那当热是最好了. 下面是 : 我显示坐标的代码: v ...
百度地图api公交路线，IE下跳转百度地图后中文变成乱码的解决办法
百度开放的公交路线的链接,IE跳转会出现中文变成乱码的问题.如图: //创建InfoWindow function createInfoWindow() { var desDiv = []; desD ...
【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

百度地图API - 行车路线轨迹