百度地图 折线修改颜色,添加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); // 为标注添加文本标注
},
效果如下:
如有错误或不足,欢迎各位大佬评论指正。