vue 百度地图 折线修改颜色，添加icon和文字标注

百度地图 折线修改颜色，添加icon和文字标注
先描述一下我当时的需求：
每条折线代表一个人的签到路径，折线路径颜色不同；
每条路径标注文字为依次签到的地点（从1开始）；
前提：
1.colorList：存放颜色和icon

2.mapList：存放点数据

在这里插入代码片

1.绘制地图

drawMap () {
    
    
    let BMap = this.BMap;
    let map = this.map;
    map.clearOverlays();
    let data = this.mapList; // 这里的mapList是处理过的数据，下面会附上数据格式；
    for (let i = 0; i < data.length; i++) {
    
    
        let points = [];
        for (let j = 0; j < data[i].length; j++) {
    
    
            points.push(new BMap.Point(data[i][j].lng, data[i][j].lat));
        }
        this.addPolyline(BMap, map, data, points, i);
    }
},

2.添加折线

addPolyline (BMap, map, data, points, index) {
    
    
    let polyline = '';
    polyline = new BMap.Polyline(points, {
    
     // 创建折线
        enableEditing: false, // 是否启用线编辑，默认为false
        // enableClicking: true, // 是否响应点击事件，默认为true
        strokeColor: this.colorList[index % 8].lineColor, // 设置折线颜色
        strokeWeight: 9, // 折线宽度
        strokeOpacity: 1, // 折线透明度
    });
    map.addOverlay(polyline); // 将折线添加到地图
    for (let j = 0; j < points.length; j++) {
    
    
        this.addMarker(BMap, map, new BMap.Point(data[index][j].lng, data[index][j].lat), j + 1, index);
    }
},

3.添加标注

addMarker (BMap, map, point, number, index) {
    
    
    let marker = '';
    let label = '';
    // url: 图标地址, Size: 图标可视区域大小, anchor: 图标定位点相对于图标左上角的偏移值
    let myIcon = new BMap.Icon(this.colorList[index % 8].icon, new BMap.Size(30, 30), {
    
     anchor: new BMap.Size(15, 15) });
    myIcon.setImageSize(new BMap.Size(30, 30)); // 设置icon大小
    marker = new BMap.Marker(point, {
    
     icon: myIcon }); // 创建图像标注
    map.addOverlay(marker); // 将标注添加到地图
    label = new BMap.Label(number, {
    
     offset: new BMap.Size(9, 4) });
    label.setStyle({
    
     // 设置文本标注样式
        fontWeight: 600,
        fontSize: '15px',
        color: '#fff',
        backgroundColor: '0',
        border: 0,
    });
    marker.setLabel(label); // 为标注添加文本标注
},

效果如下：

如有错误或不足，欢迎各位大佬评论指正。