vue2 腾讯地图 Polyline设置样式显示箭头

在Vue 2中，如果你想在腾讯地图(Tencent Map)组件上绘制Polyline并添加箭头样式，可以利用腾讯地图提供的`PolylineOptions`对象。其中，你可以设置`pointStyle`属性来自定义路径点样式，包括箭头。

首先，你需要安装腾讯地图JavaScript SDK，如果还没有安装，可以在项目中通过npm引入：

npm install tencent-map --save

然后，在Vue组件中，你可以这样做：

<template>
  <div id="map" style="width: 100%; height: 500px;"></div>
</template>

<script>
import { initMap } from 'tencent-map';

export default {
  mounted() {
    // 初始化地图
    const map = initMap({
      container: 'map',
      zoom: 12,
      center: [116.404, 39.915], // 北京坐标
    });

    // 定义一条带箭头的线
    const polylineOptions = {
      path: [[116.39, 39.9], [116.42, 39.92]], // 线路数组
      strokeColor: '#FF0000', // 颜色
      strokeWeight: 2, // 粗细
      pointStyle: {
        normal: { // 正常状态下的样式
          icon: new BMap.Icon('arrow.png', new BMap.Size(18, 18)), // 箭头图标
          offset: new BMap.Point(-5, -5), // 箭头偏移量
        },
        highlight: {}, // 高亮状态样式，可根据需要配置
      },
    };

    const polyline = new BMap.PolyLine(polylineOptions);
    map.addOverlay(polyline);
  }
}
</script>

在这个例子中，假设你有一个名为`arrow.png`的箭头图标文件，放在项目的`static`目录下。`pointStyle.normal`设置了正常状态下每个路径点的样式，包含箭头图标、大小以及偏移位置。当鼠标悬停在该路径上时，箭头会保持这个样式不变。