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