直接上代码和效果图，代码中有步骤注释，很简单
需要替换您自己的高德API KEY。
GIF1.gif
<html>
<head>
<script src="https://webapi.amap.com/maps?v=1.3&key=你的KEY&plugin=AMap.Autocomplete,AMap.Walking,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Driving,AMap.CitySearch,AMap.Heatmap,AMap.Size" type="text/javascript"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="mapContainer" style="height: 100%;width: 100%;">
</div>
</body>
<script type="text/javascript">
// 车辆轨迹、速度数据
var routeInfo = [{"lat":41.898985,"lng":123.532276,"speed":0.89},{"lat":41.898994,"lng":123.532212,"speed":1.55},{"lat":41.898965,"lng":123.532254,"speed":1.34},{"lat":41.899023,"lng":123.53229,"speed":4.74},{"lat":41.899022,"lng":123.532157,"speed":0.78},{"lat":41.899028,"lng":123.532115,"speed":11.43},{"lat":41.89907,"lng":123.53213,"speed":17.04},{"lat":41.89908,"lng":123.53206,"speed":11.78},{"lat":41.899079,"lng":123.5321,"speed":10.43},{"lat":41.898989,"lng":123.532134,"speed":7.47},{"lat":41.899051,"lng":123.532292,"speed":6.27},{"lat":41.899111,"lng":123.532169,"speed":6.88},{"lat":41.898991,"lng":123.532168,"speed":5.98},{"lat":41.899083,"lng":123.532157,"speed":2.29},{"lat":41.899114,"lng":123.532184,"speed":2.93},{"lat":41.899054,"lng":123.532083,"speed":2.48},{"lat":41.898948,"lng":123.532208,"speed":2.4},{"lat":41.898965,"lng":123.53223,"speed":1.59},{"lat":41.899085,"lng":123.532219,"speed":2.96},{"lat":41.899019,"lng":123.532224,"speed":4.64},{"lat":41.899089,"lng":123.532236,"speed":3.86},{"lat":41.899091,"lng":123.532176,"speed":6.02},{"lat":41.899038,"lng":123.532115,"speed":8.42},{"lat":41.864238,"lng":123.510692,"speed":0.89},{"lat":41.86401,"lng":123.510915,"speed":2.61},{"lat":41.863474,"lng":123.510799,"speed":10.31},{"lat":41.863071,"lng":123.510626,"speed":6.76},{"lat":41.862719,"lng":123.510458,"speed":9.22},{"lat":41.861887,"lng":123.50998,"speed":18.36},{"lat":41.860685,"lng":123.509322,"speed":26.62},{"lat":41.859401,"lng":123.50864,"speed":26.9},{"lat":41.858528,"lng":123.508255,"speed":17.02},{"lat":41.85839,"lng":123.508178,"speed":0.0},{"lat":41.857946,"lng":123.508087,"speed":11.64},{"lat":41.857131,"lng":123.507831,"speed":17.96},{"lat":41.85608,"lng":123.507415,"speed":22.2},{"lat":41.855023,"lng":123.507107,"speed":20.21},{"lat":41.854239,"lng":123.507109,"speed":15.07},{"lat":41.853437,"lng":123.507244,"speed":0.0},{"lat":41.85285,"lng":123.507266,"speed":5.11},{"lat":41.852853,"lng":123.50726,"speed":0.0},{"lat":41.852833,"lng":123.50724,"speed":0.0},{"lat":41.852504,"lng":123.507312,"speed":9.93},{"lat":41.851799,"lng":123.507233,"speed":14.16},{"lat":41.851242,"lng":123.507059,"speed":0.0},{"lat":41.851071,"lng":123.507009,"speed":2.83},{"lat":41.850975,"lng":123.506994,"speed":1.88},{"lat":41.850954,"lng":123.507074,"speed":3.12},{"lat":41.850888,"lng":123.507116,"speed":2.55},{"lat":41.850369,"lng":123.506927,"speed":12.25},{"lat":41.849632,"lng":123.506612,"speed":14.88},{"lat":41.849141,"lng":123.506082,"speed":12.58},{"lat":41.848494,"lng":123.505268,"speed":17.33},{"lat":41.847635,"lng":123.504232,"speed":22.73},{"lat":41.844513,"lng":123.500763,"speed":0.26},{"lat":41.844541,"lng":123.500873,"speed":1.15},{"lat":41.844538,"lng":123.500956,"speed":0.59},{"lat":41.844547,"lng":123.500901,"speed":1.31},{"lat":41.844607,"lng":123.500929,"speed":2.27},{"lat":41.844534,"lng":123.501072,"speed":1.57},{"lat":41.8446,"lng":123.50101,"speed":1.28},{"lat":41.844566,"lng":123.500914,"speed":0.32},{"lat":41.844514,"lng":123.501011,"speed":4.44},{"lat":41.844109,"lng":123.500855,"speed":12.22},{"lat":41.843536,"lng":123.500518,"speed":6.65},{"lat":41.841808,"lng":123.47934,"speed":18.47},{"lat":41.840919,"lng":123.478866,"speed":21.47},{"lat":41.840046,"lng":123.478525,"speed":19.79},{"lat":41.839302,"lng":123.478138,"speed":18.34},{"lat":41.838476,"lng":123.477633,"speed":18.76},{"lat":41.837629,"lng":123.477199,"speed":20.21},{"lat":41.836865,"lng":123.476741,"speed":15.45},{"lat":41.836261,"lng":123.476494,"speed":8.81},{"lat":41.836063,"lng":123.476472,"speed":1.23},{"lat":41.836059,"lng":123.476375,"speed":0.88},{"lat":41.83607,"lng":123.476511,"speed":0.52},{"lat":41.835947,"lng":123.4764,"speed":7.09},{"lat":41.835377,"lng":123.476121,"speed":16.47},{"lat":41.834477,"lng":123.475743,"speed":22.19},{"lat":41.833489,"lng":123.475429,"speed":20.63},{"lat":41.832667,"lng":123.475116,"speed":12.04},{"lat":41.832467,"lng":123.475155,"speed":1.64},{"lat":41.832113,"lng":123.474932,"speed":4.9},{"lat":41.832009,"lng":123.475042,"speed":0.68},{"lat":41.832049,"lng":123.475109,"speed":0.42},{"lat":41.831813,"lng":123.474998,"speed":7.82},{"lat":41.831434,"lng":123.474922,"speed":9.01},{"lat":41.830969,"lng":123.474801,"speed":0.26},{"lat":41.831016,"lng":123.474759,"speed":0.63},{"lat":41.831002,"lng":123.474811,"speed":0.37},{"lat":41.830979,"lng":123.474842,"speed":0.19},{"lat":41.831,"lng":123.474881,"speed":2.49},{"lat":41.830476,"lng":123.474859,"speed":13.4},{"lat":41.830074,"lng":123.474814,"speed":4.91},{"lat":41.835844,"lng":123.45395,"speed":26.14},{"lat":41.834962,"lng":123.452371,"speed":29.0},{"lat":41.834881,"lng":123.450394,"speed":31.17},{"lat":41.834637,"lng":123.448592,"speed":28.52},{"lat":41.834968,"lng":123.446697,"speed":31.61},{"lat":41.834239,"lng":123.444774,"speed":32.14},{"lat":41.834564,"lng":123.442773,"speed":30.3},{"lat":41.833447,"lng":123.441212,"speed":29.5},{"lat":41.834491,"lng":123.439277,"speed":26.66},{"lat":41.834464,"lng":123.437458,"speed":28.18},{"lat":41.833889,"lng":123.435907,"speed":25.68},{"lat":41.834097,"lng":123.434818,"speed":36.25},{"lat":41.834124,"lng":123.434497,"speed":15.35},{"lat":41.833805,"lng":123.434234,"speed":8.37},{"lat":41.833916,"lng":123.434072,"speed":9.12},{"lat":41.834113,"lng":123.433634,"speed":8.25},{"lat":41.833876,"lng":123.433384,"speed":11.07},{"lat":41.833807,"lng":123.432707,"speed":16.0},{"lat":41.83432,"lng":123.431755,"speed":18.92},{"lat":41.833885,"lng":123.430365,"speed":21.79},{"lat":41.833032,"lng":123.426448,"speed":12.26},{"lat":41.833191,"lng":123.426148,"speed":8.4},{"lat":41.832995,"lng":123.425893,"speed":4.54},{"lat":41.833207,"lng":123.425644,"speed":10.26},{"lat":41.833552,"lng":123.425237,"speed":5.53},{"lat":41.833566,"lng":123.42494,"speed":13.97},{"lat":41.833564,"lng":123.42421,"speed":16.61},{"lat":41.833379,"lng":123.423503,"speed":9.43},{"lat":41.83317,"lng":123.423291,"speed":4.27},{"lat":41.833259,"lng":123.423173,"speed":0.2},{"lat":41.833292,"lng":123.423196,"speed":0.56},{"lat":41.833315,"lng":123.423336,"speed":9.48},{"lat":41.833719,"lng":123.423198,"speed":2.06},{"lat":41.833402,"lng":123.423224,"speed":6.03},{"lat":41.833474,"lng":123.423232,"speed":4.01},{"lat":41.833261,"lng":123.422898,"speed":12.13},{"lat":41.833146,"lng":123.421998,"speed":17.87},{"lat":41.833189,"lng":123.421189,"speed":7.73},{"lat":41.833016,"lng":123.421064,"speed":3.04},{"lat":41.83258,"lng":123.42113,"speed":3.27},{"lat":41.832915,"lng":123.421084,"speed":2.39},{"lat":41.833145,"lng":123.421143,"speed":1.66},{"lat":41.832833,"lng":123.421134,"speed":1.06},{"lat":41.832969,"lng":123.421123,"speed":2.27},{"lat":41.833039,"lng":123.421166,"speed":1.63},{"lat":41.833188,"lng":123.42104,"speed":0.34},{"lat":41.832959,"lng":123.420934,"speed":7.38},{"lat":41.832785,"lng":123.420406,"speed":14.1},{"lat":41.832976,"lng":123.419447,"speed":18.05},{"lat":41.832722,"lng":123.418305,"speed":21.05},{"lat":41.832819,"lng":123.416974,"speed":20.29},{"lat":41.833235,"lng":123.416011,"speed":4.16},{"lat":41.832908,"lng":123.416037,"speed":2.9},{"lat":41.832515,"lng":123.415689,"speed":10.49},{"lat":41.83246,"lng":123.414803,"speed":18.14},{"lat":41.832752,"lng":123.413677,"speed":19.08},{"lat":41.83275,"lng":123.41255,"speed":19.73},{"lat":41.832427,"lng":123.411404,"speed":18.68},{"lat":41.83222,"lng":123.410159,"speed":22.06},{"lat":41.832284,"lng":123.409089,"speed":5.62},{"lat":41.832393,"lng":123.408715,"speed":8.48},{"lat":41.832029,"lng":123.408214,"speed":11.17},{"lat":41.83231,"lng":123.407423,"speed":19.98},{"lat":41.832169,"lng":123.406281,"speed":17.09},{"lat":41.831934,"lng":123.403808,"speed":3.74},{"lat":41.832033,"lng":123.403582,"speed":7.12},{"lat":41.831947,"lng":123.403109,"speed":9.49},{"lat":41.831807,"lng":123.402498,"speed":6.7},{"lat":41.831841,"lng":123.40205,"speed":9.64}];
// 1. 创建地图
var map = new AMap.Map("mapContainer", {
view: new AMap.View2D({
}),
lang: "zh_cn"
});
// 2.创建小汽车marker
var carMarker = new AMap.Marker({
map: map,
position: [routeInfo[0].lng, routeInfo[0].lat],
icon: "http://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true
});
// 3.创建跟速度信息展示框
var carWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(6, -25),
content: ""
});
// 4.生成车辆回放轨迹
var pathPolyline = initializePaths(routeInfo);
// 5.车辆随轨迹移动
carMarker.moveAlong(pathPolyline.getPath(), 1000, function (k) {
return k
}, false);
// 6.速度框随车辆移动
AMap.event.addListener(carMarker, 'moving', function (e) {
var lastLocation = e.passedPath[e.passedPath.length - 1];
carWindow.setPosition(lastLocation);
setVehicleSpeedInWidowns(lastLocation);
});
// 7.打开速度框
carWindow.open(map, carMarker.getPosition());
// 8.地图自适应缩放
map.setFitView();
function initializePaths(paths) {
var line;
var pathLngLatArray = new Array();
if (paths) {
for (var i = 0; i < paths.length; i++) {
pathLngLatArray.push(new AMap.LngLat(paths[i].lng, paths[i].lat));
}
line = new AMap.Polyline({
map: map,
path: pathLngLatArray,
strokeColor: 'red',
strokeOpacity: 0.8,
strokeWeight: 6,
strokeStyle: 'solid'
});
line.setMap(map);
}
return line;
}
function setVehicleSpeedInWidowns(lnglat) {
for (var i = 0; i < routeInfo.length; i++) {
if (lnglat.distance(new AMap.LngLat(routeInfo[i].lng, routeInfo[i].lat)) < 4) {
carWindow.setContent("速度:" + (routeInfo[i].speed * 1.852).toFixed(2) + "公里/时");
return;
}
}
}
</script>
</html>
