百度地图轨迹绘制以及轨迹回放以及鼠标滑过自定义样式

用百度地图的绘制轨迹以及相关的轨迹回放，鼠标滑过展示与否的自定义弹窗的整理

图片展示

组件代码：

<!--
 * @Author: menxiaojin
 * @Date: 2023-07-12 14:03:03
 * @LastEditors: menxiaojin
 * @LastEditTime: 2023-07-20 19:41:02
-->
<!--首页地图组件-->
<template>
    <div class="data_map" style="height:100%;">
        <div class="bg_heights" style="position: relative;height:100%;">
            <div :id="mapId" style="width:100%;height:100%;"></div>
            <div class="bofang">
                <el-button  type="primary" size="mine" @click="plackBack"  v-if="condition">播放</el-button>
                <el-button  type="primary" size="mine" @click="suspend" v-if="suspedContinueShow">暂停</el-button>
                <el-button  type="primary" size="mine" @click="continueMap" v-if="!suspedContinueShow">返回</el-button>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.bofang{
    position: absolute;
    top:20px;
    left:30px;
    z-index: 10;
}
</style>
<style lang="scss">
    .anchorBL{
        display: none;
    }
    body, html,#map {
        height: 100%;
        margin:auto ;
        font-family:"微软雅黑";
    }
    .divLabelMApText{
        width: 36px;
        height: 36px;
        text-align: center;
        line-height: 16px;
        font-size:14px;
        color: #ffffff;
    }
    .divOutMapA{
        width: 320px;
        height: 185px;
        background: url('http://218.56.180.213:8035/shopping/static/file/pic/202307/picrXBtW1uh1689581712300.png') no-repeat;
        background-size:100% 100%;
        margin-top: -50px;
        margin-left: -145px;

        .mapFlexDiv{
            display: flex;
            padding: 30px 20px;
            .flexLeftImg{
                width: 80px;
                height: 131px;
            }
            .flexRight{
                flex: 1;
                padding-left: 10px;
                padding-top: 20px;
                .flexRightListOne{
                    width: 100%;
                    // height: 30px;
                    background: rgba(41,147,207,0.2);
                    line-height: 20px;
                    color: #ffffff;
                    font-size:13px;
                    padding: 5px 10px;
                }
                .flexRightListTwo{
                    background: rgba(41,147,207,0.4);
                    line-height: 20px;
                    color: #ffffff;
                    font-size:13px;
                    padding: 5px 10px;
                    margin-top: 15px;
                }
            }
        }
    }
</style>
<script type="text/ecmascript-6">
    import { loadBMaOne, loadBaiDuLuShu } from './map'
    // import { BMapGLLib } from './LuShu'
    // require('./LuShu');
    export default {
        props:{
            mapId:{
                type:String,
                default:'mapId'
            },
            zoom:{
                type:Number,
                default:17
            },
            markerArr:{
                type:Array,
                default:()=>[
                    {
                        imgurl: "http://218.56.180.213:8137/policeNewFormalFile/subFace/snapFace/202211/20221128/snapFace1ec55445-4abf-4a8d-a59d-17ada05b02b3-0.png",
                        visitTime: "2022-11-28 17:03:21",
                        longitude: 118.712444,
                        uptownName: "中国广饶今田小商品批发市场西门",
                        latitude: 37.43991,
                        cameraName: "花苑路交叉口朝东500m人脸",
                        type:'start'
                    },
                    {
                        imgurl: "http://218.56.180.213:8137/policeNewFormalFile/subFace/snapFace/202211/20221128/snapFace1ec55445-4abf-4a8d-a59d-17ada05b02b3-0.png",
                        visitTime: "2022-11-28 17:03:21",
                        longitude: 118.713192,
                        uptownName: "中国广饶今田小商品批发市场西门",
                        latitude: 37.441471,
                        cameraName: "花苑路交叉口朝东500m人脸",
                        type:''
                    },
                    {
                        imgurl: "http://218.56.180.213:8137/policeNewFormalFile/subFace/snapFace/202211/20221128/snapFace1ec55445-4abf-4a8d-a59d-17ada05b02b3-0.png",
                        visitTime: "2022-11-28 17:03:21",
                        longitude: 118.710435,
                        uptownName: "中国广饶今田小商品批发市场西门",
                        latitude: 37.441478,
                        cameraName: "花苑路交叉口朝东500m人脸",
                        type:''
                    },
                    {
                        imgurl: "http://218.56.180.213:8137/policeNewFormalFile/subFace/snapFace/202211/20221128/snapFace1ec55445-4abf-4a8d-a59d-17ada05b02b3-0.png",
                        visitTime: "2022-11-28 17:03:21",
                        longitude: 118.710929,
                        uptownName: "中国广饶今田小商品批发市场西门",
                        latitude: 37.439616,
                        cameraName: "花苑路交叉口朝东500m人脸",
                        type:''
                    },
                    {
                        imgurl: "http://218.56.180.213:8137/policeNewFormalFile/subFace/snapFace/202211/20221128/snapFace1ec55445-4abf-4a8d-a59d-17ada05b02b3-0.png",
                        visitTime: "2022-11-28 17:03:21",
                        longitude: 118.709608,
                        uptownName: "中国广饶今田小商品批发市场西门",
                        latitude:37.4404,
                        cameraName: "花苑路交叉口朝东500m人脸",
                        type:'end'
                    },
                ]
            },
        },
        data(){
            return {
                mapLoading:false,
                bgHeight:'668px',
                map:'',
                currentLat:118.4282,
                currentLon : 37.042122,
                getZoom:16,   //地图当前的等级
                peopleLocus:'',
                trackAni:null,
                iconPeople:require('../../assets/base/flow_people.png'),
                condition:true,
                suspedContinueShow:true,
            }
        },
        //关键
        created(){
            let that=this;
            window.bigImg=that.bigImg;
        },
        watch: {
            mapId: {
                handler: function () {
                    let that=this;
                    that.$nextTick(() => {
                        loadBMaOne("ahwEn9BozQOKSBXhe02qQtCOABvFu2hr").then(() => {
                            that.initAMap();
                            that.initMap()
                        })
                    })
                },
                // 立即以obj.name的当前值触发回调
                immediate: true
            },
            markerArr: {
                handler: function(newObj, oldObj) {
                    let that=this;
                    that.$nextTick(() => {
                        loadBMaOne("ahwEn9BozQOKSBXhe02qQtCOABvFu2hr").then(() => {
                            that.initAMap();
                            that.initMap()
                        })
                    })
                },
                deep: true, // 深度监听
                immediate: true // 会在监测开始时调用一次该处理函数
            }
        },
        methods:{
            initAMap(){
                //声明地图
                var mp = new BMapGL.Map(this.mapId,{minZoom: 10, maxZoom: 19});
                this.currentLat = this.markerArr[0].longitude
                this.currentLon = this.markerArr[0].latitude
                mp.centerAndZoom(new BMapGL.Point(this.currentLat,this.currentLon), this.zoom);
                mp.enableScrollWheelZoom();
                this.map = mp
                this.peopleMap()
            },
            /*** 画线*/
            drawPolyline(bMap, points) {
                if (points==null || points.length<=1) {
                    return;
                }
                bMap.addOverlay(new BMapGL.Polyline(points, {
                    strokeColor : "#D70028",
                    strokeWeight : 6,
                    strokeOpacity : 0.6
                })); // 画线
                // this.addArrow(points,10,Math.PI/7);
            },
            peopleMap(id){
                var that = this
                this.peopleLocus = this.map
                var data = this.markerArr;
                //第7步：绘制点
                for (var i = 0; i < data.length; i++) {
                    var point = new BMapGL.Point(Number(data[i].longitude), Number(data[i].latitude));
                    var myIcon;
                    if(data[i].type=='start'){
                        myIcon=require('../../assets/base/start.png');
                    }
                    else if(data[i].type=='end'){
                        myIcon=require('../../assets/base/end.png');
                    }
                    else{
                        myIcon=require('../../assets/base/ing.png');
                    }
                    var myIconA= new BMapGL.Icon(myIcon, new BMapGL.Size(36, 47));
                    var marker = new BMapGL.Marker(point,{
                        icon: myIconA
                    });
                    this.map.addOverlay(marker);   //添加标注点
                    //非弹框文字标注
                    let customOverlayA = new BMapGL.CustomOverlay(createDOMB, {
                        point: new BMapGL.Point(Number(data[i].longitude),Number(data[i].latitude)),
                        opacity: 0.5,
                        properties: {
                            index:i+1
                        },
                    });
                    customOverlayA.class='label'
                    // 自定义展示内容
                    function createDOMB() {
                        var div = document.createElement('div');
                        div.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
                        div.setAttribute('class','divLabelMApText')
                        var title = document.createElement('div');
                        div.appendChild(title);
                        title.appendChild(document.createTextNode(this.properties.index));

                        return div;
                    }
                    this.map.addOverlay(customOverlayA);
                    //弹框
                    let customOverlay = new BMapGL.CustomOverlay(createDOM, {
                        point: new BMapGL.Point(Number(data[i].longitude),Number(data[i].latitude)),
                        opacity: 0.5,
                        // offsetY: -40,
                        // offsetX: -120,
                        properties: {
                            imgSrc:data[i].imgurl,
                            longitude:data[i].longitude,
                            latitude:data[i].latitude,
                            id:data[i].id,
                            time:data[i].visitTime,
                            address:data[i].uptownName
                        },
                    });
                    //鼠标滑过
                    marker.addEventListener('mouseover', function () {
                        let all=that.map.getOverlays()
                        all.map(item=>{
                            if (item.toString() === "CustomOverlay"&&item.class==undefined) {
                                that.map.removeOverlay(item);
                            }
                        })
                        that.map.addOverlay(customOverlay);
                    });
                    marker.addEventListener('onmouseout', function () {
                        let all=that.map.getOverlays()
                        all.map(item=>{
                            if (item.toString() === "CustomOverlay"&&item.class==undefined) {
                                that.map.removeOverlay(item);
                            }
                        })
                    });
                    //添加标注位置
                    function createDOM() {
                        var div = document.createElement('div');
                        div.style.zIndex = BMapGL.Overlay.getZIndex(Number(this.properties.latitude));
                        div.setAttribute('class','divOutMapA')

                        //上方的top
                        var topDiv = document.createElement('div');
                        topDiv.setAttribute('class','mapFlexDiv')
                        //左侧图片
                        var topLeft = document.createElement('img');
                        topLeft.setAttribute('class','flexLeftImg')
                        topLeft.src = this.properties.imgSrc;
                        topDiv.appendChild(topLeft);
                        //右侧展示
                        var topRight = document.createElement('div');
                        topRight.setAttribute('class','flexRight')
                        topDiv.appendChild(topRight);
                        //创建右侧的list
                        var listOne = document.createElement('div');
                        listOne.setAttribute('class','flexRightListOne')
                        listOne.appendChild(document.createTextNode('时间：'+this.properties.time));
                        topRight.appendChild(listOne);
                        var listTwo = document.createElement('div');
                        listTwo.setAttribute('class','flexRightListTwo')
                        listTwo.appendChild(document.createTextNode('地址：'+this.properties.address));
                        topRight.appendChild(listTwo);

                        div.appendChild(topDiv);
                        return div;
                    }
                }
                //绘制线
                var points = new Array();
                for (var i = 0; i < data.length; i++) {
                    var p0 = data[i].longitude;
                    var p1 = data[i].latitude;
                    var thePoint1 = new BMapGL.Point(p0, p1);
                    points.push(thePoint1);
                }
                this.drawPolyline(this.peopleLocus, points);
            },
            // 回放按钮
            plackBack(){
                let that=this;
                that.suspedContinueShow = true;
                that.backShow = true;
                let mapData=that.markerArr;
                loadBaiDuLuShu().then((BMapGL)=>{
                    var marker;
                    let bmap = new BMapGL.Map(this.mapId,{minZoom: 1, maxZoom: 20});
                    let lng=mapData[0].longitude;
                    let lat=mapData[0].latitude;
                    if( (lng!=''&&lng!='undefind'&&lng!='null')&&(lat!=''&&lat!='undefind'&&lat!='null') ){
                        bmap.centerAndZoom(new BMapGL.Point(lng, lat), this.zoom);
                    }else{
                        bmap.centerAndZoom(new BMapGL.Point(118.595639, 37.462191), this.zoom);
                    }
                    bmap.enableScrollWheelZoom(true);
                    let path=[];
                    for(let i=0;i<mapData.length;i++){
                        let item={
                            lng: mapData[i].longitude,
                            lat: mapData[i].latitude
                        };
                        path.push(item)
                    }
                    //相关点位
                    var point = [];
                    for (var i = 0; i < mapData.length; i++) {
                        point.push(new BMapGL.Point(mapData[i].longitude, mapData[i].latitude));
                    }
                    //线
                    var polyline = new BMapGL.Polyline(point, {
                        strokeColor : "#D70028",
                        strokeWeight : 6,
                        strokeOpacity : 0.6
                    });

                    bmap.addOverlay(polyline);
                    this.trackAni = new BMapGLLib.LuShu(bmap,point,{
                        // defaultContent:"粤A30780",//"从天安门到百度大厦"
                        geodesic: true,
                        autoCenter: true,
                        autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                        // icon  : new BMap.Icon(this.iconPeople, new BMap.Size(40,45),{anchor : new BMap.Size(40, 45)}),
                        icon  : new BMapGL.Icon(this.iconPeople, new BMapGL.Size(31,36),{anchor : new BMapGL.Size(31, 36)}),
                        speed: 1500,
                        enableRotation:false,//是否设置marker随着道路的走向进行旋转
                        // tilt: 30,
                        // duration: 20000,
                        // delay: 300
                    });
                    this.trackAni.start();
                })
            },
            //暂停播放
            suspend(){
                this.suspedContinueShow = !this.suspedContinueShow
                this.trackAni.pause()
            },
            //继续播放
            continueMap(){
                this.suspedContinueShow = !this.suspedContinueShow
                // this.trackAni.continue()
                this.$nextTick(() => {
                    loadBMaOne("ahwEn9BozQOKSBXhe02qQtCOABvFu2hr").then(() => {
                        this.initAMap();
                        this.initMap()
                    })
                })
            },
            //异步调用百度js
            map_load() {
                var load = document.createElement("script");
                // load.src = this.$mapUrl;
                // load.src=require('./LuShu')
                // load.src = 'http://api.map.baidu.com/api?v=2.0&ak=OwlyYKUbMwazEII5oTmBRiqOurFZe6xO';
                document.body.appendChild(load);
            },
            initMap(){
                window.onload = this.map_load;
            },
        },
        //调用方法
        mounted() {
            let that=this;
            that.$nextTick(() => {
                loadBMaOne("ahwEn9BozQOKSBXhe02qQtCOABvFu2hr").then(() => {
                    that.initAMap();
                    that.initMap()
                })
            })
        }
    }
</script>

相关引用的map.js代码

import {messageBox} from '../../api/message'
export function loadBMap(ak) {
  return new Promise(function(resolve, reject) {
      if (typeof BMapGL !== 'undefined') {
          resolve(BMapGL)
          return true
      }
      window.onBMapCallback = function() {
          resolve(BMapGL)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src =
          "https://api.map.baidu.com/api?v=3.0&ak=ahwEn9BozQOKSBXhe02qQtCOABvFu2hr&__ec_v__=20190126&callback=onBMapCallback"
      script.onerror = reject
      document.head.appendChild(script)
  })
}

function loadBaiDuDrawMap() {
    return loadBMap().then(BMapGL => {
      let loaded = false
      try {
        loaded = (BMapGLLib && BMapGLLib.DrawingManager)
      } catch (err) {
        loaded = false
      }
      if (!loaded) {
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js'
        document.body.appendChild(script)
        let link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css'
        document.body.appendChild(link)
      } else {
      }
      return BMapGL
    })
  }
  export { loadBaiDuDrawMap }

  // function loadBaiDuTrack() {
  //   return loadBMapLu().then(BMapGL => {
  //     let loaded = false
  //     try {
  //       loaded = (BMapGLLib && BMapGLLib.TrackAnimation)
  //     } catch (err) {
  //       // alert('还未加载完成，请再次点击')
  //       messageBox({
  //         message: '轨迹动画加载中，请再次点击！',
  //         type: 'warning',
  //         callback: action => {

  //         }
  //       })

  //       loaded = false
  //     }
  //     if (!loaded) {
  //       let script = document.createElement('script')
  //       script.type = 'text/javascript'
  //       script.src = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js'
  //       // script.src = 'http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js'
  //       document.body.appendChild(script)
  //       let link = document.createElement('link')
  //       link.rel = 'stylesheet'
  //       // link.href = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.css'
  //       document.body.appendChild(link)
  //     } else {
  //     }
  //     return BMapGL
  //   })
  // }
  // export { loadBaiDuTrack }

  function loadBMaOne(ak) {
    return new Promise(function (resolve, reject) {
      try {
        resolve(BMapGL)
      } catch (err) {
        window.init = function () {
          resolve(BMapGL)
        }
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
        script.onerror = reject
        document.body.appendChild(script)
      }
    })
  }
  export { loadBMaOne }

  function loadBaiDuLuShu() {
    return loadBMaOne().then(BMapGL => {
      let loaded = false
      // console.log(BMapGL,loaded,'--==--')
      try {
        // console.log('00==',BMapGLLib)
        loaded = (BMapGLLib && BMapGLLib.LuShu)
      } catch (err) {
        // console.log(2)
        // alert('还未加载完成，请再次点击')
        // messageBox({
        //   message: '轨迹动画加载中，请再次点击！',
        //   type: 'warning',
        //   callback: action => {

        //   }
        // })

        loaded = false
      }
      if (!loaded) {
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = 'https://api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js'
        // script.src = 'http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js'
        document.body.appendChild(script)
        let link = document.createElement('link')
        link.rel = 'stylesheet'
        // link.href = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.css'
        document.body.appendChild(link)
      } else {
      }
      return BMapGL
    })
  }
  export { loadBaiDuLuShu }