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

npm install vue-baidu-map --save

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

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

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 },
	],
]

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

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

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

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