【vue-baidu-map】绘制折线（带方向箭头）

 主文件代码

<template>
  <div class="container">
    <baidu-map style="width: 100%;height: 100vh;"
               :center="center" :zoom="zoom" @ready="handler"
               :scroll-wheel-zoom="true" :mapClick="false"
               @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
      <!-- 图标 -->
      <bm-marker v-for="item in maps" :key="item.id"
                 :position="{lng: item.longitude, lat: item.latitude}"
                 :icon="{url: require('@/assets/images/location.png'), size: {width: 40, height: 40}}"
      >
      </bm-marker>
      <!-- 箭头折线 -->
      <new-polyline
        v-if="points && points.length >= 2 && checkPoints({ points })"
        :path="points"
        :icons="icons"
        stroke-color="#0091ea"
        :stroke-opacity="0.8"
        :stroke-weight="10"
      ></new-polyline>
    </baidu-map>
  </div>
</template>
<script>
import newPolyline from "./new_polyline";

export default {
  components: {
    newPolyline
  },
  data() {
    return {
      center: {
        lng: 0,
        lat: 0
      },
      map: "", // 地图
      maps: [], // 站点信息数组
      nowStationId: '',
      timeId: "", //循环
      zoom: 13,
      contentShow: false,
      nameShow: true,
      points: [],
      icons: []
    };
  },
  methods: {
    handler({BMap, map}) {
      this.getTreePath()
      this.getMapData()
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
        scale: 0.5, // 图标缩放大小
        strokeColor: "#fff", // 设置矢量图标的线填充颜色
        strokeWeight: "3" // 设置线宽
      });
      var icons = new BMap.IconSequence(sy, "5%", "15%");
      this.icons.push(icons)
    },
    //获取首次加载点（引接口）
    getTreePath() {
      this.center.lng = 114.52785300795644
      this.center.lat = 38.14758574827796
      this.nowStationId = '1'
    },
    //获取数据（引接口）
    getMapData() {
      this.points = [];
      this.maps = [
        {
          "id": "1",
          "name": "站点名称站点名称站点名称站点名称站点名称",
          "longitude": 114.52785300795644,
          "latitude": 38.14758574827796,
        },
        {
          "id": "2",
          "name": "站点名称2",
          "longitude": 114.54050114953694,
          "latitude": 38.13759635572114,
        },
        {
          "id": "3",
          "name": "站点名称3",
          "longitude": 114.56579743269792,
          "latitude": 38.12419932394176,
        },
        {
          "id": "4",
          "name": "站点名称4",
          "longitude": 114.5908781225365,
          "latitude": 38.12056580319661,
        },
        {
          "id": "5",
          "name": "站点名称5",
          "longitude": 114.6115750814864,
          "latitude": 38.11613720325717,
        },
        {
          "id": "6",
          "name": "站点名称6",
          "longitude": 114.63838051790414,
          "latitude": 38.11556941444744,
        },
        {
          "id": "7",
          "name": "站点名称7",
          "longitude": 114.68336765784383,
          "latitude": 38.10284977850926,
        }
      ]
      for (var i in this.maps) {
        this.points.push(
          {
            lng: this.maps[i].longitude,
            lat: this.maps[i].latitude
          }
        )
      }
    },
    // 查重 如果数组中只有一组有意义的坐标,绘制折线时可能会报错,因为绘制一条折线需要两组不同的坐标点
    checkPoints({ points }) {
      // 拿到第一组点
      var originPoint = points[0];
      // 将第一组点与后续点进行对比 如果坐标集合中只有一组实际坐标点则return false
      // 只要坐标集合中有两组不同的实际坐标点,则return true
      for (var i = 1; i < points.length; i++) {
        if (
          points[i].lat !== originPoint.lat ||
          points[i].lng !== originPoint.lng
        ) {
          return true;
        }
      }
      return false;
    },
  }
};
</script>

图标可以去阿里矢量图标库下载png 

折线组件 newPolyline.vue 

<script>
/**
 * 注意此处三个引入路径
 * 在源文件中使用的是相对路径
 * 但是因为现在是自定义组件,所以要重新调整路径
 */
import commonMixin from "vue-baidu-map/components/base/mixins/common.js";
import bindEvents from "vue-baidu-map/components/base/bindEvent.js";
import { createPoint } from "vue-baidu-map/components/base/factory.js";

export default {
  // 起一个新名字
  name: "new-polyline",
  render() {},
  mixins: [commonMixin("overlay")],
  props: {
    path: {
      type: Array
    },
    // 新声明一个icons
    icons: {
      type: Array
    },
    strokeColor: {
      type: String
    },
    strokeWeight: {
      type: Number
    },
    strokeOpacity: {
      type: Number
    },
    strokeStyle: {
      type: String
    },
    massClear: {
      type: Boolean,
      default: true
    },
    clicking: {
      type: Boolean,
      default: true
    },
    editing: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    path: {
      handler(val, oldVal) {
        this.reload();
      },
      deep: true
    },
    strokeColor(val) {
      this.originInstance.setStrokeColor(val);
    },
    strokeOpacity(val) {
      this.originInstance.setStrokeOpacity(val);
    },
    strokeWeight(val) {
      this.originInstance.setStrokeWeight(val);
    },
    strokeStyle(val) {
      this.originInstance.setStrokeStyle(val);
    },
    editing(val) {
      val
        ? this.originInstance.enableEditing()
        : this.originInstance.disableEditing();
    },
    massClear(val) {
      val
        ? this.originInstance.enableMassClear()
        : this.originInstance.disableMassClear();
    },
    clicking(val) {
      this.reload();
    }
  },
  methods: {
    load() {
      const {
        BMap,
        map,
        path,
        // 参数解构 加入icons
        icons,
        strokeColor,
        strokeWeight,
        strokeOpacity,
        strokeStyle,
        editing,
        massClear,
        clicking
      } = this;
      const overlay = new BMap.Polyline(
        path.map(item =>
          createPoint(BMap, {
            lng: parseFloat(item.lng),
            lat: parseFloat(item.lat)
          })
        ),
        {
          strokeColor,
          strokeWeight,
          strokeOpacity,
          strokeStyle,
          // 配置icons
          icons,
          enableEditing: editing,
          enableMassClear: massClear,
          enableClicking: clicking
        }
      );
      this.originInstance = overlay;
      map.addOverlay(overlay);
      bindEvents.call(this, overlay);
    }
  }
};
</script>

 效果图