vue百度地图修改折线颜色,添加icon和文字标注方式
作者：茶憶
这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue百度地图修改折线颜色,添加icon和文字标注
百度地图 折线修改颜色，添加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); // 为标注添加文本标注
},
效果如下：
只有一个坐标点：
多个坐标点：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。