老规矩,不BB,直接上代码
//这个是必须的,最好是在当前页加载的时候就先执行这个了(key值是自己账号里面去取哈.)
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=XXX"></script>
<script>
var marker, lineArr = []; var position = [], center = [];
var map;
const createMap = () => {
return new AMap.Map("container", {
resizeEnable: true,
center: center,
zoom: 17
});
}
const createMarker = () => {
return new AMap.Marker({
map: map,
position: position,
icon: "https://webapi.amap.com/images/car.png", //轨迹地图上出现车的图标(运行时有车在上面移动)
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle: -90,
});
}
const createPolyline = () => {
// 绘制轨迹
return new AMap.Polyline({
map: map,
path: lineArr,
showDir: true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
}
var passedPolyline = new AMap.Polyline({
map: map,
// path: lineArr,
strokeColor: "#AF5", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
//这里我是每次都去取数据及处理好数据再返回来
$.ajax({
type: "POST",
url: "数据来源地址", //用与处理ajax的地址及函数
data: { orderID: '@Model.orderID' },
dataType: "json",
success: function (result) {
//处理数据
var shuju = result.map(item => {
return item.location.split(',').map((item) => {
return Number(item)
})
})
lineArr = shuju;
position = shuju[0]
center = shuju[0]
map = createMap();
map.setFitView();
marker = createMarker();
marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath);
});
//开始绘制地图及轨迹
createPolyline();
//开始动画
marker.moveAlong(lineArr, 500); //轨迹点,移动速度KM/小时
}
});
</script>
直接就能用的代码,只是自己取的数据需要处理好,只需要拿到的数据里面的location的值,其他的不用了.
这么写了之后基本上就没有啥子大的问题了.数据那里也可以自己处理,取到自己想到的数据.
有啥不对的地方欢迎指正.