html
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=your key"
></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<div class="bodymap" id="echartmap"></div>
js
getguiji() {
var that = this;
$.get("https://restapi.amap.com/v3/direction/driving?origin=125.317472,43.827952&destination=125.317472,43.897952&extensions=all&output=JSON&key=your key", function (data, status) {
//设置数据
let steps = data.route.paths[0].steps;
console.log(steps)
var path = [];
var path2 = [];
for (var i = 0; i < steps.length; i++) {
path.push(steps[i].polyline.split(";"))
}
for (var i = 0; i < path.length; i++) {
for (var s = 0; s < path[i].length; s++) {
path2.push(path[i][s])
}
}
var path3 = []
for (var i = 0; i < path2.length; i++) {
var datai = path2[i].split(",");
path3.push(datai)
}
marker = new AMap.Marker({
map: that.map,
position: path3[0],
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle: -90,
});
// 绘制轨迹
var polyline = new AMap.Polyline({
map: that.map,
path: path3,
showDir: true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: that.map,
// path: lineArr,
strokeColor: "#AF5", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath);
});
that.map.setFitView();
function startAnimation() {
marker.moveAlong(path3, 10000);
}
function pauseAnimation() {
marker.pauseMove();
}
function resumeAnimation() {
marker.resumeMove();
}
function stopAnimation() {
marker.stopMove();
}
startAnimation();
});
},
getmap() {
var that = this;
that.map = new AMap.Map('echartmap', {
resizeEnable: true,
zoom: 14,
scrollWheel: true,
viewMode: '3D',
pitch: 50,
rotation: 0,
maxZoom: 30,
minZoom: 0,
mapStyle: 'amap://styles/blue',
features: ['bg', 'road', 'building'],
center: [125.317472, 43.827952]
});
},