<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>polyline example</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
var map = new AMap.Map('container');
var path1 = [
[75.757904, 38.118117],
[97.375719, 24.598057],
[117.375719, 38.118117]
];
var path2 = [
[75.757904, 41.118117],
[97.375719, 27.598057],
[117.375719, 41.118117]
];
var path3 = [
[75.757904, 44.118117],
[97.375719, 30.598057],
[117.375719, 44.118117]
];
var path4 = [
[75.757904, 47.118117],
[97.375719, 33.598057],
[117.375719, 47.118117]
];
var polyline1 = new AMap.Polyline({
path: path1, // 设置线覆盖物路径
showDir:true,
strokeColor: '#3366bb', // 线颜色
strokeWeight: 10 // 线宽
});
var polyline2 = new AMap.Polyline({
path: path2, // 设置线覆盖物路径
showDir:true,
dirColor:'pink',
strokeColor: '#336688', // 线颜色
strokeWeight: 10 // 线宽
});
var canvasDir = document.createElement('canvas')
var width = 24;
canvasDir.width = width;
canvasDir.height = width;
var context = canvasDir.getContext('2d');
context.strokeStyle = 'red';
context.lineJoin = 'round';
context.lineWidth = 8;
context.moveTo(-4, width - 4);
context.lineTo(width / 2, 6);
context.lineTo(width + 4, width - 4);
context.stroke();
var polyline3 = new AMap.Polyline({
path: path3, // 设置线覆盖物路径
showDir:true,
dirImg:canvasDir,
strokeColor: '#3366cc', // 线颜色
strokeWeight: 10 // 线宽
});
var polyline4 = new AMap.Polyline({
path: path4, // 设置线覆盖物路径
showDir:true,
dirImg:'https://a.amap.com/jsapi_demos/static/images/mass0.png',
strokeColor: '#3366dd', // 线颜色
strokeWeight: 10 // 线宽
});
map.add([polyline1,polyline2,polyline3,polyline4])
map.setFitView()
</script>
</body>
</html>