vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式

更新時(shí)間：2024年03月19日 15:55:21 作者：茶憶

這篇文章主要介紹了vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue百度地圖修改折線顏色,添加icon和文字標(biāo)注

百度地圖折線修改顏色，添加icon和文字標(biāo)注

項(xiàng)目場景

以折線的形式展示BD簽到路徑，每條折線代表不同BD的簽到，并且每條折線顏色不同（這里是8個(gè)顏色，循環(huán)設(shè)置），標(biāo)注文字為依次簽到的地點(diǎn)數(shù)量；

說明：

原本我打算全部用Vue集成的 vue-baidu-map來實(shí)現(xiàn)，但是后面開發(fā)過程中，發(fā)現(xiàn)修改折線顏色、添加icon和文字比較困難，所以改用了原生 BMap來實(shí)現(xiàn)。

具體步驟

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中定義數(shù)據(jù)

1）基礎(chǔ)數(shù)據(jù)

2）colorList：存放折線的顏色和標(biāo)注icon

3）mapList：存放坐標(biāo)點(diǎn)數(shù)據(jù)

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賦值，后面代碼會(huì)用到；

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;
    // 這里是數(shù)據(jù)改變時(shí)，地圖中心點(diǎn)定位到當(dāng)前第一條數(shù)據(jù)的第一個(gè)坐標(biāo)點(diǎn)或者默認(rèn)的中心坐標(biāo)
    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, { // 創(chuàng)建折線
        enableEditing: false, // 是否啟用線編輯，默認(rèn)為false
        // enableClicking: true, // 是否響應(yīng)點(diǎn)擊事件，默認(rèn)為true
        strokeColor: this.colorList[index % 8].lineColor, // 設(shè)置折線顏色
        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）添加標(biāo)注

addMarker (BMap, map, point, number, index) {
    let marker = '';
    let label = '';
    // url: 圖標(biāo)地址, Size: 圖標(biāo)可視區(qū)域大小, anchor: 圖標(biāo)定位點(diǎn)相對于圖標(biāo)左上角的偏移值
    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)); // 設(shè)置icon大小
    marker = new BMap.Marker(point, { icon: myIcon }); // 創(chuàng)建圖像標(biāo)注
    map.addOverlay(marker); // 將標(biāo)注添加到地圖
    label = new BMap.Label(number, { offset: new BMap.Size(9, 4) });
    label.setStyle({ // 設(shè)置文本標(biāo)注樣式
        fontWeight: 600,
        fontSize: '15px',
        color: '#fff',
        backgroundColor: '0',
        border: 0,
    });
    marker.setLabel(label); // 為標(biāo)注添加文本標(biāo)注
},

效果如下：

只有一個(gè)坐標(biāo)點(diǎn)：