搜索

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 924|回复: 1

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

[复制链接]

4775

主题

4899

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
15232

社区QQ达人

发表于 2015-9-21 14:33:10 | 显示全部楼层 |阅读模式
  1. 转自:http://hi.baidu.com/hackerbase/item/0a54b12d0005690e72863e3c

  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>驾车途经点</title>  
  7. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>  
  8. </head>  
  9. <body>  
  10. <p><input type='button' value='开始' onclick='run();' /></p>  
  11. <div style="width:820px;height:500px;border:1px solid gray" id="container"></div>  
  12. <script type="text/javascript">  
  13.     var map = new BMap.Map("container");  
  14.     map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);  
  15.     map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件  
  16.     map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件  
  17.     map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件  
  18.       
  19.     var myP1 = new BMap.Point(106.521436,29.532288);    //起点-重庆  
  20.     var myP2 = new BMap.Point(108.983569,34.285675);    //终点-西安  
  21.     var myP3 = new BMap.Point(116.404449,39.920423);    //终点-北京  
  22.       
  23.     window.run = function (){  
  24.         map.clearOverlays();                        //清除地图上所有的覆盖物  
  25.         var driving = new BMap.DrivingRoute(map);    //创建驾车实例  
  26.         driving.search(myP1, myP2);                 //第一个驾车搜索  
  27.         driving.search(myP2, myP3);                 //第二个驾车搜索  
  28.         driving.setSearchCompleteCallback(function(){  
  29.             var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例,获得一系列点的数组  
  30.       
  31.             var polyline = new BMap.Polyline(pts);      
  32.             map.addOverlay(polyline);  
  33.               
  34.             var m1 = new BMap.Marker(myP1);         //创建3个marker  
  35.             var m2 = new BMap.Marker(myP2);  
  36.             var m3 = new BMap.Marker(myP3);  
  37.             map.addOverlay(m1);  
  38.             map.addOverlay(m2);  
  39.             map.addOverlay(m3);  
  40.               
  41.             var lab1 = new BMap.Label("起点",{position:myP1});        //创建3个label  
  42.             var lab2 = new BMap.Label("途径点",{position:myP2});  
  43.             var lab3 = new BMap.Label("终点",{position:myP3});     
  44.             map.addOverlay(lab1);  
  45.             map.addOverlay(lab2);  
  46.             map.addOverlay(lab3);  
  47.               
  48.             setTimeout(function(){  
  49.                 map.setViewport([myP1,myP2,myP3]);          //调整到最佳视野  
  50.             },1000);  
  51.               
  52.         });  
  53.     }  
  54. </script>  
  55. </body>  
  56. </html>
复制代码


分享到: 更多
友荐云推荐
射中网 www.shezhong.net 娄底街 www.loudijie.com 育儿之家 www.yuerso.com
回复

使用道具 举报

4775

主题

4899

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
15232

社区QQ达人

 楼主| 发表于 2015-9-21 14:41:28 | 显示全部楼层
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta name="keywords" content="百度地图,百度地图API" />
  5. <meta name="description" content="百度地图API自定义地图,按路线行驶的小车" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  7. <title>按指定路线前进的小车</title>
  8. <script type="text/javascript" src="http://api.map.baidu.com/api?key=ea9710104e3349456b5e5d1191f2d376&v=1.1&services=true" ></script>
  9. <script type="text/javascript" src="K_PointMover.js"></script>
  10. <script type="text/javascript" src="K_Function.js"></script>
  11. </head>
  12. <body onload="onLoad()">
  13.     <div style="float:left;border:5px dashed #9df83e;">
  14.         <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
  15.         <div style="display:none;">
  16.             <input type="checkBox" id="MarkerMove" checked />MarkerMove
  17.             <input type="checkBox" id="MapMove" />MapMove
  18.         </div>
  19.         <p>北京周边一日游--请点击"开始"<input type="button" value="开始" onclick="pointMover.Move();" /></p>
  20.     <p>"暂停"后,可点击小车,获取当前坐标。<input type="button" value="暂停" onclick="pointMover.Pause();" /></p>
  21.     </div>
  22. </body>
  23. <script type="text/javascript">
  24. var map = new BMap.Map("container");    // 创建map
  25. var point = new BMap.Point(116.411053,39.950507);   // 确定中心点
  26. map.centerAndZoom(point,8);   // 初始化地图map,设置中心点和地图级别。

  27. var moveMarker,pointMover;
  28. function onLoad()
  29. {
  30.     var point1 = new BMap.Point(117.965625,40.962343);   // 起点1
  31.     var point2 = new BMap.Point(118.213988,39.609821);   // 中间点2
  32.     var point3 = new BMap.Point(117.211335,39.095608);   // 中间点3
  33.     var point4 = new BMap.Point(116.723807,39.53863);   // 中间点4
  34.     var point5 = new BMap.Point(116.392656,39.9080114);   // 中间点5
  35.     var point6 = new BMap.Point(115.509585,38.865845);   // 中间点6
  36.     var point7 = new BMap.Point(114.920872,40.829717);   // 中间点7
  37.     var point8 = new BMap.Point(117.965625,40.962343);   // 终点8
  38.     var points = [point1,point2,point3,point4,point5,point6,point7,point8]; //折线数组
  39.     var polyline = new BMap.Polyline(points);   //创建折线
  40.     map.addOverlay(polyline);   //绘制折线

  41.     var myIcon = new BMap.Icon("car.png", new BMap.Size(63, 42), {  //绘制小车
  42.         offset: new BMap.Size(32, 21),  // 指定定位位置
  43.         imageOffset: new BMap.Size(0,0) // 设置图片偏移
  44.     });
  45.     moveMarker = new BMap.Marker(points[0],{icon: myIcon});
  46.     map.addOverlay(moveMarker);

  47.     moveMarker.addEventListener("click",function(e){   //鼠标点击获取经纬度
  48.         alert("小车的坐标为:经度"+e.point.lng+",纬度"+e.point.lat);
  49.     });

  50.     pointMover = new K_PointMover(points,100,0.1,MapMove);  //移动函数
  51. }
  52. function MapMove(pointMover)
  53. {
  54.     if(document.getElementById("MarkerMove").checked)
  55.         moveMarker.setPoint(pointMover.point);
  56.     if(document.getElementById("MapMove").checked)
  57.         map.panTo(pointMover.point);
  58. }
  59. </script>
  60. </html>
复制代码


射中网 www.shezhong.net 娄底街 www.loudijie.com 育儿之家 www.yuerso.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2020-1-20 23:41

© 2001-2011 Powered by Discuz! X3.1. Theme By Yeei!

快速回复 返回顶部 返回列表