高德地图提供了很多API来满足我们在其地图上画不同的图形，比如描绘出一段公交的路线，或确定一个建筑的位置等。
下面我以工作中的例子，描绘在高德地图上如何画出一条飞行轨迹。
高德提供了JS的API，需要先引入，后面的key需要你去高德的开发平台去申请
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=你的key"></script>
在html中定义一个div，来展示地图
<div id="container" style="text-align:center; margin: 0 auto; margin-top:25px;"></div>
下面就可以开始画图了，首先我要调用接口获取所有的飞行点坐标，一个轨迹就是通过一个个点来显示的
var data = postRequest();
//获取地图的中心点坐标
var centerlat = (data.dep.lat + data.arr.lat)/2
var centerlon = (data.dep.lon + data.arr.lon)/2
var centerArr = [centerlat, centerlon];
var map = new AMap.Map('container', {
resizeEnable: true,
center: centerArr,
zoom: 5
});
定义一个地图对象map，其中心点通过起/始点经纬度来计算，zoom为地图显示的缩放级别，resizeEnable:true,表示可以调整地图大小
好了就可以在地图上画线段了，获取点集合，格式为：[[40.0618,116.5991],[40.0552,116.6002],[40.0485,116.6013]]，下面也设置了线条的一些样式。
strokeDasharray为勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在ie9+浏览器有效，用法：
[10,5] 表示10个像素的实线和5个像素的空白（如此反复）组成的虚线
var lineArr1 = data.pointList1;
var polyline = new AMap.Polyline({
path: lineArr1, //设置线覆盖物路径
strokeColor: "#3366FF", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽
strokeStyle: "solid", //线样式
});
polyline.setMap(map);
var lineArr2 = data.pointList2;
var planPolyline = new AMap.Polyline({
path: lineArr2, //设置线覆盖物路径
strokeColor: "#3366FF", //线颜色
strokeOpacity: 0.7, //线透明度
strokeWeight: 2, //线宽
strokeStyle: "dashed", //线样式
strokeDasharray: [10, 5] //补充线样式
});
planPolyline.setMap(map);
另外还需要画一个飞行物，更好的展示视觉效果，飞行物即一个点坐标，但这个坐标我用一张图片来表示
//添加飞行物图标
var icon = new AMap.Icon({
size: new AMap.Size(54, 52), //图标大小
image: "images/MapPlane.png"
});
var marker = new AMap.Marker({
map: map,
angle: nowPlanePos.course,
position: [nowPlanePos.lng,nowPlanePos.lat],
offset: new AMap.Pixel(-27, -52),
icon: icon
});
使用marker方法来描绘一个点，angle表示点标记的旋转角度，即飞行物的朝向，offset函数一定要加上，因为你如果缩放地图后，那么这个飞行物可能在地图上呈现的位置会相差很大，
可以看看没有设置offset和设置了offset的差别，前两幅是设置了offset,后两幅是没有
可以看到，地缩放比例飞行物的位置相差很多，但实质，坐标的位置都是一样的，飞行物并没有根据地图来改变自己的偏移量
offset的用法：点标记显示位置偏移量，默认值为Pixel(-10,-34)。Marker指定position后，默认以marker左上角位置为基准点，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。
以上我的图片宽度是52，只需要设置横线偏移量为宽度一半，向左则为-27。
注意：我的飞行物是不断的移动的，所以我需要实时的请求接口获取最新的点坐标，所以每次需要重新再map上画图，但在画图前，先要清除原来的图标对象，所以delete方法删除即可
比如在画飞行物时，使用：
if(marker != null) {
marker.setMap(null);
delete marker;
}
另外map对象是不需要重画的，map初始化一次即可。
参考：