自定义折线方向箭头

给Polyline添加dirColor属性可以设置方向箭头的颜色，添加dirImg可以设置方向箭头的图片，支持Image和Canvas。

源代码编辑器

<!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>

控制台

清空

返回顶部示例中心常见问题智能客服