百度地图，移动轨迹
<!DOCTYPE html>
<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:"微软雅黑";}
#allmap {width: 100%; height:500px; overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<!--加载检索信息窗口-->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<title>鼠标绘制工具</title>
</head>
<body>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<div id="result">
<input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
<input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
</div>
<script type="text/javascript">
// 百度地图实例化
var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(113.962196, 22.545144), 13); map.enableScrollWheelZoom(); // 允许滚轮缩放
// 怎么走的选择
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.png", new BMap.Size(32, 70), {
//小车图片
offset: new BMap.Size(0, -5),
//相当于CSS精灵
imageOffset: new BMap.Size(0, 0)
//图片的偏移量。为了是图片底部中心对准坐标点。
}); var p01 = new BMap.Point(113.962196, 22.545144); var p02 = new BMap.Point(113.987268, 22.54884); var p03 = new BMap.Point(113.976281, 22.53543); var p04 = new BMap.Point(113.957956, 22.539636);
//生成轨迹线路
function run(p3, p2) { p1 = arguments[0]; p2 = arguments[1]; // 生成路径
var walking2 = new BMap.WalkingRoute(map, { renderOptions: { map: map, enableDragging: true, autoViewport: true } }); walking2.search(p1, p2); var walking = new BMap.WalkingRoute(map); walking.search(p1, p2); walking.setSearchCompleteCallback(function () { var pts = walking.getResults().getPlan(0).getRoute(0).getPath();
//得到一个数组
console.log(pts); setTimeout(function () { jumps(pts); }, 1000); }); }
// 可以根据轨迹线路跑起来的函数
function jumps(pts) { var carMk = new BMap.Marker(pts[0], { icon: myIcon }); map.addOverlay(carMk); var i = 0; function resetMkPoint(i) { carMk.setPosition(pts[i]); if (i < pts.length) { setTimeout(function () { i++; resetMkPoint(i); }, 2); } else { return } } setTimeout(function () { resetMkPoint(1); }, 2) }
//传入两个点，跑起来吧
run(p03, p02);
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「xeanyee」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/github_38847071/article/details/72574560
