使用vue-baidu-map路线规划-行驶路线添加不同颜色 之最简单有效的方法

第一步: 在DOM中找到相关路线的svg(可以省略一二步,直接用我的也行,主要介绍思路)

第二步: 这里有多少条路线就有多少个 path 标签, 可以看到 path标签中 有stroke-linejoin等与我们自己使用的path标签不同的属性

第三步: 使用JQ找到这些 path 节点 (使用js还是jq随意)

• $("[stroke-linejoin]").length 拿到path节点长度
• stroke-opacity 这是线的透明度
• stroke 这是线的颜色
• 利用JQ的属性选择器加nth-child选择当个path节点
• 在<baidu-map>标签上 加上tilesloaded事件(官网描述tilesloaded {type, target} 当地图所有图块完成加载时触发此事件)
• 之前用的是setTimeout延迟执行(如果网络不好或者在设置的时间内,地图还没有加载完之前就执行,那么就不会生效),现在用 tilesloaded可以100%触发,且地图加载完就执行无延迟.
• mapHeight 和 dShow是我自己加的 props属性 mapHeight设置地图容器高度,dShow 布尔值 如果为true才显示bm-driving模块

<template>
    <div class="index-r-t">
        <baidu-map
            :style="mapHeight"
            :center="center"
            :zoom="zoom"
            @ready="handler"
            ak="WBh1E3bk1r7QNdWyZDl19K2Vr9wXLzEf"
            :scroll-wheel-zoom="true"
            :mapStyle="mapStyle"
            class="y-hidden"
            @tilesloaded="changePathColor(dShow)"
        >
            <bm-driving
                v-if="dShow"
                :start="{ lng: 115.44, lat: 39.11 }"
                :end="{ lng: 116.84, lat: 40.02 }"
                startCity="北京"
                endCity="北京"
                :auto-viewport="true"
                :selectFirstResult="true"
                highlightModes="BMAP_HIGHLIGHT_ROUTE"
            ></bm-driving>
            <bm-driving
                v-if="dShow"
                :start="{ lng: 114.52, lat: 40.32 }"
                :end="{ lng: 114.78, lat: 40.64 }"
                startCity="张家口"
                endCity="张家口"
                :auto-viewport="true"
                :selectFirstResult="true"
            ></bm-driving>
        </baidu-map>
    </div>
</template>
<script>
import {
    BmLabel,
    BmMarker,
    BaiduMap,
    BmScale,
    BmGeolocation,
    BmDriving,
    BmCityList,
} from "vue-baidu-map";
import $ from "jquery";
export default {
    data() {
        return {
            center: { lng: 0, lat: 0 }, //经纬度
            zoom: 9, //地图展示级别
            mapStyle: {
                styleJson: [
                    {
                        featureType: "land",
                        elementType: "geometry",
                        stylers: {
                            color: "#083658",
                        },
                    },
                    {
                        featureType: "building",
                        elementType: "geometry",
                        stylers: {
                            color: "#016d79",
                        },
                    },
                    {
                        featureType: "highway",
                        elementType: "all",
                        stylers: {
                            lightness: -42,
                            saturation: -91,
                        },
                    },
                    {
                        featureType: "arterial",
                        elementType: "geometry",
                        stylers: {
                            lightness: -77,
                            saturation: -94,
                        },
                    },
                    {
                        featureType: "green",
                        elementType: "geometry",
                        stylers: {
                            color: "#011123",
                        },
                    },
                    {
                        featureType: "water",
                        elementType: "geometry",
                        stylers: {
                            color: "#010e21",
                        },
                    },
                    {
                        featureType: "subway",
                        elementType: "geometry.stroke",
                        stylers: {
                            color: "#010e21",
                        },
                    },
                    {
                        featureType: "railway",
                        elementType: "geometry",
                        stylers: {
                            lightness: -52,
                        },
                    },
                    {
                        featureType: "all",
                        elementType: "labels.text.stroke",
                        stylers: {
                            color: "#000000",
                        },
                    },
                    {
                        featureType: "all",
                        elementType: "labels.text.fill",
                        stylers: {
                            color: "#ffffff",
                        },
                    },
                    {
                        featureType: "manmade",
                        elementType: "geometry",
                        stylers: {
                            color: "#010e21",
                        },
                    },
                    {
                        featureType: "local",
                        elementType: "geometry",
                        stylers: {
                            lightness: -75,
                            saturation: -91,
                        },
                    },
                    {
                        featureType: "subway",
                        elementType: "geometry",
                        stylers: {
                            lightness: -65,
                        },
                    },
                    {
                        featureType: "railway",
                        elementType: "all",
                        stylers: {
                            lightness: -40,
                        },
                    },
                    {
                        featureType: "boundary",
                        elementType: "geometry",
                        stylers: {
                            color: "#8b8787",
                            weight: "1",
                            lightness: -29,
                        },
                    },
                ],
            },
            data: [],
        };
    },
    components: {
        BaiduMap,
        BmScale,
        BmGeolocation,
        BmDriving,
    },
    props: ["mapHeight", "dShow"],
    mounted() {
    },
    methods: {
        updateCirclePath(e) {
            this.circlePath.center = e.target.getCenter();
            this.circlePath.radius = e.target.getRadius();
        },
        handler({ BMap, map }) {
            // console.log(BMap, map);
            this.center.lng = 116.404;
            this.center.lat = 39.915;
        },
        changePathColor(flag) {
            if (flag) {
                var length = $("[stroke-linejoin]").length;
                console.log(length);
                for (var i = 0; i < length; i++) {
                    $("[stroke-linejoin]:nth-child(" + (i + 1) + ")").attr({
                        "stroke-opacity": "0.9",
                        stroke: pathColor[i],
                    });
                }
            }
        },
    },
};
var pathColor = ["#f811fc", "#fca811", "#4a90e2", "#7ed321", "#50e3c2"];
</script>
<style>
.map {
    width: 100%;
}
.BMap_cpyCtrl {
    display: none;
}
.anchorBL {
    display: none;
}
.y-hidden {
    overflow: hidden;
}
</style>

最后: 一个for循环给每一条path加上不同的颜色就 OK 了;