vue-baidu-map使用轨迹图（添加自定义图标）

效果图

代码

vue使用先npm i vue-baidu-map

<template>
    <div>
        <button @click='changePoint'>请求新数据</button>
        <baidu-map ak="izRxpkV0ohn1ZtobaWHXVhiiqVx7piRI" 
        :scroll-wheel-zoom="true"
        :center="center" 
        :zoom="zoom" 
        @ready="mapReady" 
        :map-click="false"
        class="baidu-map">
        <!-- 显示比列尺在哪 -->
        <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
        <!-- 导航工具 -->
        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
        <!-- 轨迹 -->
        <div v-if="pointLists.length > 1">
            <bm-walking v-for="index in (pointLists.length-1)" :key="index" :start="pointLists[index-1].point" :end="pointLists[index].point" 
            :auto-viewport="true" 
            :panel='false' 
            @polylinesset="addMyIcon"
            ></bm-walking>
        </div>
        <div v-else-if="pointLists.length == 1">
            <bm-marker v-if="oneIcon" :position="pointLists[0].point" :dragging="true" :icon="oneIcon" >
            </bm-marker>
            <bm-marker v-else :position="pointLists[0].point" :dragging="true">
            </bm-marker>
        </div>
        </baidu-map>
    </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BmScale from 'vue-baidu-map/components/controls/Scale';
import BmNavigation from 'vue-baidu-map/components/controls/Navigation';
import BmMarker from 'vue-baidu-map/components/overlays/Marker';
import BmPolyline from 'vue-baidu-map/components/overlays/Polyline.vue'
import BmWalking from 'vue-baidu-map/components/search/Walking.vue'
import quotagreen from '@/assets/quotagreen.png'
import quotared from '@/assets/quotared.png'
import { getPointLists } from '@/request/map'

export default {
    components:{
        BaiduMap,
        BmScale,
        BmNavigation,
        BmPolyline,
        BmWalking,
        BmMarker
    },
    data(){
        return {
            oneIcon:'',
            center: {
                lng:116.404,
                lat:39.915
            },
            zoom:13,
            map:'',
            pointLists: [],
            BMap:'',
        }
    },
    created(){
        this.getPointLists()
    },
    methods:{
        // 初始化
        mapReady({ BMap ,  map }){
            // 将地图实例拿出便于后续操作使用
            this.map = map
            this.BMap = BMap
            // 清除地图上的标记物
            this.map.clearOverlays();
            // 给地图设置样式
            map.setMapStyle({style:'grayscale'});
           
        },
        // 清楚图标
        clearMarKer() {
            let allOverlay = this.map.getOverlays();
            for (var i = 0; i < allOverlay.length; i++){
                if(allOverlay[i].toString().indexOf("Marker") > 0){//删除标志点
                    this.map.removeOverlay(allOverlay[i]);
                }
            }
        },
        // 清楚所有的轨迹和标志点
        clearOverlay(){
            let allOverlay = this.map.getOverlays();
            for (var i = 0; i < allOverlay.length; i++){
                if(allOverlay[i].toString().indexOf("Marker") > 0){//删除标志点
                    this.map.removeOverlay(allOverlay[i]);
                }
                if(allOverlay[i].toString().indexOf("Polyline") > 0){//删除折线
                    this.map.removeOverlay(allOverlay[i]);
                }
            }
        },
        // 添加自己的图标
        addMyIcon(){
            this.clearMarKer()
            this.pointLists.forEach(item=>this.addMarker(item.point,item.hasP))
        },
        // 数据发生改变
        async changePoint(){
            this.clearOverlay()
            await this.getPointLists()
        },
        // 依据数据选择图标
        addMarker(point,hasp){
            const map = this.map
            const BMap = this.BMap
             if(hasp){
                var myIcon = new BMap.Icon(quotagreen, new BMap.Size(30, 30));
            }else{
                var myIcon = new BMap.Icon(quotared, new BMap.Size(30, 30));
            }
            var marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注
            map.addOverlay(marker);
        },
        // 发请求拿数据
        async getPointLists(){
            try {
                const rst = await getPointLists()
                this.pointLists = rst
                this.center = this.pointLists[0].point
                let img = this.pointLists[0] && this.pointLists[0].hasP ? quotagreen : quotagred
                this.oneIcon =  {url: img, size: {width: 300, height: 157}}
            } catch (error) {
                this.$message.error(error.message)
            }
        }
    }
    
}
</script>

<style scoped lang='less'>
.baidu-map{
    margin: 0 auto;
    height: 600px;
    width:1900px;
}
</style>