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

项目场景：
以折线的形式展示BD签到路径，每条折线代表不同BD的签到，并且每条折线颜色不同（这里是8个颜色，循环设置），标注文字为依次签到的地点数量；

说明：原本我打算全部用Vue集成的 vue-baidu-map来实现，但是后面开发过程中，发现修改折线颜色、添加icon和文字比较困难，所以改用了原生 BMap来实现。

具体步骤：

1、安装依赖

npm install vue-baidu-map --save

2、引入需要的组件

import { BaiduMap, BmNavigation } from 'vue-baidu-map/components';

3、模板中使用组件

<baidu-map
	class="bm-view"
    :ak="mapAk"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="scrollZoom"
    NavigationControlType="BMAP_NAVIGATION_CONTROL_LARGE"
    @ready="mapReady">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
</baidu-map>

4、data中定义数据
1）基础数据

2）colorList：存放折线的颜色和标注icon

3）mapList：存放坐标点数据

mapList: [
	[
		{ lng: 116.404, lat: 39.915 },
		{ lng: 116.403, lat: 39.914 },
	],
	[
		{ lng: 116.414, lat: 39.925 },
		{ lng: 116.413, lat: 39.924 },
		{ lng: 116.503, lat: 39.913 },
	],
]

5、绘制
1）在 mapReady中给 BMap和 map赋值，后面代码会用到；

mapReady ({ BMap, map }) {
    this.BMap = BMap;
    this.map = map;
},

2）绘制地图

drawMap () {
    let BMap = this.BMap;
    let map = this.map;
    map.clearOverlays(); // 清除覆盖物
    let data = this.mapList;
    // 这里是数据改变时，地图中心点定位到当前第一条数据的第一个坐标点或者默认的中心坐标
    let point = data.length && data[0].length ? data[0][0] : this.centerPoint;
    this.center = { lng: point.lng, lat: point.lat };
    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);
    }
},

3）添加折线

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);
    }
},

4）添加标注

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); // 为标注添加文本标注
},

效果如下：
只有一个坐标点：

多个坐标点：

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