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

houseme · 发表于 2015-9-21 14:33:10

转自：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='开始' onclick='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>

复制代码

houseme · 发表于 2015-9-21 14:41:28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="百度地图,百度地图API" />
<meta name="description" content="百度地图API自定义地图，按路线行驶的小车" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按指定路线前进的小车</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=ea9710104e3349456b5e5d1191f2d376&v=1.1&services=true" ></script>
<script type="text/javascript" src="K_PointMover.js"></script>
<script type="text/javascript" src="K_Function.js"></script>
</head>
<body onload="onLoad()">
<div style="float:left;border:5px dashed #9df83e;">
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<div style="display:none;">
<input type="checkBox" id="MarkerMove" checked />MarkerMove
<input type="checkBox" id="MapMove" />MapMove
</div>
<p>北京周边一日游--请点击"开始"<input type="button" value="开始" onclick="pointMover.Move();" /></p>
<p>"暂停"后，可点击小车，获取当前坐标。<input type="button" value="暂停" onclick="pointMover.Pause();" /></p>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建map
var point = new BMap.Point(116.411053,39.950507); // 确定中心点
map.centerAndZoom(point,8); // 初始化地图map,设置中心点和地图级别。
var moveMarker,pointMover;
function onLoad()
{
var point1 = new BMap.Point(117.965625,40.962343); // 起点1
var point2 = new BMap.Point(118.213988,39.609821); // 中间点2
var point3 = new BMap.Point(117.211335,39.095608); // 中间点3
var point4 = new BMap.Point(116.723807,39.53863); // 中间点4
var point5 = new BMap.Point(116.392656,39.9080114); // 中间点5
var point6 = new BMap.Point(115.509585,38.865845); // 中间点6
var point7 = new BMap.Point(114.920872,40.829717); // 中间点7
var point8 = new BMap.Point(117.965625,40.962343); // 终点8
var points = [point1,point2,point3,point4,point5,point6,point7,point8]; //折线数组
var polyline = new BMap.Polyline(points); //创建折线
map.addOverlay(polyline); //绘制折线
var myIcon = new BMap.Icon("car.png", new BMap.Size(63, 42), { //绘制小车
offset: new BMap.Size(32, 21), // 指定定位位置
imageOffset: new BMap.Size(0,0) // 设置图片偏移
});
moveMarker = new BMap.Marker(points[0],{icon: myIcon});
map.addOverlay(moveMarker);
moveMarker.addEventListener("click",function(e){ //鼠标点击获取经纬度
alert("小车的坐标为:经度"+e.point.lng+",纬度"+e.point.lat);
});
pointMover = new K_PointMover(points,100,0.1,MapMove); //移动函数
}
function MapMove(pointMover)
{
if(document.getElementById("MarkerMove").checked)
moveMarker.setPoint(pointMover.point);
if(document.getElementById("MapMove").checked)
map.panTo(pointMover.point);
}
</script>
</html>

复制代码

帐号		自动登录	找回密码
密码			立即注册

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

相关帖子

社区QQ达人

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

相关帖子

社区QQ达人

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