【腾讯地图】实现汽车、人员沿轨迹运动js源代码

星海设计

已于 2023-06-09 10:54:15 修改

阅读量389

点赞数

分类专栏： H5 Map 文章标签：汽车 javascript 开发语言

于 2023-06-02 16:49:46 首次发布

本文链接：https://blog.csdn.net/FormatRain/article/details/131009989

版权

H5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Map

1 篇文章 0 订阅

订阅专栏


```csharp
<script>
    var map = null;
    //所有师傅的最新位置信息
    var work_List = []
    //定时器
    var setIntervalTime
    var that = this
    window.onload = function () {
        //调用初始化函数地图
        init()
        setIntervalTime = setInterval(() => {
            that.init();
        }, 3600000)
        //3600000
    }
    //初始化地图函数  自定义函数名init
    function init() {
        $.ajax({
            type: "GET",
            url: "/api/sms/worker/GetWorkOrderLocation", //获取人员的地理坐标信息
            data: {},
            dataType: "json",
            success: function (data) {
                var mapCenter;
                console.log(data)
                console.log("that", that)
                work_List = data
                if (data.length > 0)
                    mapCenter = new TMap.LatLng(data[0].Lat, data[0].Lng);
                else
                    mapCenter = new TMap.LatLng(30.2084, 120.21201)

                //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                that.initializeMap(mapCenter, 11)
                that.mapSign(data, false)
            }
        });
    }
    var mapMarker = [];
    var mapMarker_Label = []
    var markerList = null;
    var markerList_Label = null;
    var InfoWindowList = [];//信息窗口
    //初始化地图
    function initializeMap(mapCenter, size) {
        map = new TMap.Map("container", {
            center: mapCenter,      // 地图的中心地理坐标。
            zoom: size
        });
    }
    //渲染地图上的点
    function mapSign(datas, flag) {
        //清除上一波标记
        for (i in mapMarker) {
            mapMarker[i].setMap(null);
        }
        for (i in mapMarker_Label) {
            mapMarker_Label[i].setMap(null);
        }
           //清除窗体
        for (i in InfoWindowList) {
            InfoWindowList[i].setMap(null);
        }
        var path = [[]]
        var path_index = 0
        for (var i = 0; i < datas.length; i++) {
            //地图第一次打开的时候获取师傅的最新地理位置信息
            if ((i == 0 || (datas[i].Lat != datas[i - 1].Lat && datas[i].Lng != datas[i - 1].Lng)) && !flag) {
                mapMarker_Label.push(that.marker_Label(datas[i]))
            }
            if (flag) {
            //师傅的轨迹信息
                mapMarker.push(that.marker(datas[i]));
                //连线的数组
                path[path_index].push(new TMap.LatLng(datas[i].Lat, datas[i].Lng))
            }
        }

        var path_List = {
            "path": path

        }
        if (flag) {
            return path_List
        }
    }
    //腾讯地图图标覆盖物
    function marker(data) {
        if (data != undefined) {
            markerList = new TMap.MultiMarker({
                map: map,
                geometries: [{
                    "id": 'marker1',
                    "styleId": 'car-down',
                    "position": new TMap.LatLng(data.Lat, data.Lng)
                }],
                styles: {
                    'car-down': new TMap.MarkerStyle({
                        'width': 25,
                        'height': 35,
                        'anchor': {
                            x: 30,
                            y: 30,
                        },
                        'faceTo': 'map',
                       // 'rotate': 180,
                        'src': 'https://service.fzxinhaixu.cn/Img/dang.png',
                    })
                },
            });
            var info = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(data.Lat, data.Lng),
                offset: { x: 0, y: -32 }
            });
            info.close();//初始关闭信息窗体
            //监听对标记的点击事件
            markerList.on("click", function (evt) {
                //设置监听到点击事件时信息窗体如何显示
                info.open(); //点击时，打开信息窗体
                info.setPosition(evt.geometry.position); //点击时，信息窗体的位置
                info.setContent("<div style='line-height:20px;text-align:left;white-space:nowrap;margin:10px;'>工单:" + data.WorkOrderID + "<br>地址:" + data.AddressBid + "<br>打卡时间:" + data.Createdate + "<br>完工时间:" + data.finishdate + "</div>"); //点击时，信息窗体将显示坐标
                 InfoWindowList.push(info); //加入数据组 方便清理
            })
            return markerList
        }
    }

    //腾讯地图图标下面的名字覆盖物
    function marker_Label(data) {
        if (data != undefined) {
            markerList_Label = new TMap.MultiMarker({
                map: map,
                geometries: [{
                    "id": 'marker1',
                    "styleId": 'car-down',
                    "position": new TMap.LatLng(data.Lat, data.Lng),
                    "content": data.WorkerName,
                }],
                enableCollision: true,
                styles: {
                    'car-down': new TMap.MarkerStyle({
                        'width': 25,
                        'height': 35,
                        'anchor': {
                            x: 30,
                            y: 30,
                        },
                        'faceTo': 'map',
                        // 'rotate': 180,
                        'src': 'https://service.fzxinhaixu.cn/Img/worker.png',
                        'color': '#1131df', // 标注点文本颜色
                        'size': 16, // 标注点文本文字大小
                        'direction': 'bottom', // 标注点文本文字相对于标注点图片的方位
                        'offset': { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
                        'strokeColor': '#fff', // 标注点文本描边颜色
                        'strokeWidth': 2, // 标注点文
                    })
                },
            });
            var info = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(data.Lat, data.Lng),
                offset: { x: 0, y: -32 }
            });
            info.close();//初始关闭信息窗体
            //监听对标记的点击事件
            markerList_Label.on("click", function (evt) {
                //设置监听到点击事件时信息窗体如何显示
                info.open(); //点击时，打开信息窗体
                info.setPosition(evt.geometry.position); //点击时，信息窗体的位置
                info.setContent("<div  style='line-height:20px;text-align:left;white-space:nowrap;margin:10px;'>师傅:" + data.WorkerName + "</div>"); //点击时，信息窗体将显示坐标
                InfoWindowList.push(info); //加入数据组 方便清理
            })
            return markerList_Label
        }
    }
</script>

以上代码是默认加载的时候，通过接口自动获取最新人员的打卡位置信息，在地图上门进行展示。

   $("#check").click(function () {
        var work = $("#workList option:selected").val();
        var work_two = $("#workClick_two option:selected").val();
        var workerValue = workerClick()
        var startDate = $("#startDate").val()
        var endDate = $("#endDate").val()
        var dateTime = $("#dateTime").val()
        if (work == '请选择') {
            alert("请选择一级部门")
            return
        }
        if (work_two == '请选择') {
            alert("请选择二级部门")
            return
        }
        if (workerValue == '请选择') {
            alert("请选择师傅")
            return
        }
        if (!startDate || !endDate) {
            alert("请选择时间")
            return
        }

        var worker_list = []
        clearInterval(setIntervalTime)
        var _index;
        layui.use('layer', function () {
            var layer = layui.layer;

            _index = layer.load();
        });
        $.ajax({
            type: "GET",
            url: "/api/sms/worker/GetWorkOrderLocationCondition",
            data: {
                "workerCode": workerValue,
                "start": startDate,
                "end": endDate
            },
            dataType: "json",
            success: function (data) {
                console.log("师傅位置", data)
                layui.use('layer', function () {
                    var layer = layui.layer;

                    layer.close(_index)
                });
                if (data.length == 0) {
                    alert("该时间段师傅没有位置信息")
                    return
                }
                $("#Back").css({
                    "display": "block"
                })
                //map.();   //初始化地图中心
                map.panTo(new TMap.LatLng(data[data.length - 1].Lat, data[data.length - 1].Lng));   //初始化地图中心

                if (polylineLayer) {
                    polylineLayer.setMap(null);
                }
                if (markerStartEnd) {
                    markerStartEnd.setMap(null);
                }
                if (markerList_Label) {
                    markerList_Label.setMap(null);
                }
                //that.initializeMap(new TMap.LatLng(data[data.length - 1].Lat, data[data.length - 1].Lng), 12)

                var pathList = that.mapSign(data, true)
                console.log("path_List", pathList.path)
                console.log("path_List.path[0].lat", pathList.path[0][0].lat)
              
                polylineLayer = new TMap.MultiPolyline({
                    map, // 绘制到目标地图
                    // 折线样式定义
                    styles: {
                        'style_blue': new TMap.PolylineStyle({
                            'color': '#3777FF', //线填充色
                            'width': 8, //折线宽度
                            'borderWidth': 1, //边线宽度
                            'borderColor': '#FFF', //边线颜色
                            'showArrow': true,
                            'lineCap': 'butt' //线端头方式
                        })
                    },
                    geometries: [{
                        styleId: 'style_blue',
                        paths: pathList.path
                    }],
                });

                 markerStartEnd = new TMap.MultiMarker({
                    map,
                    styles: {
                        'car-down': new TMap.MarkerStyle({
                            'width': 40,
                            'height': 40,
                            'anchor': {
                                x: 20,
                                y: 20,
                            },
                            'faceTo': 'map',
                            'rotate': 180,
                            'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
                        }),
                        "start": new TMap.MarkerStyle({
                            "width": 25,
                            "height": 35,
                            "anchor": { x: 16, y: 32 },
                            "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
                        }),
                        "end": new TMap.MarkerStyle({
                            "width": 25,
                            "height": 35,
                            "anchor": { x: 16, y: 32 },
                            "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
                        })
                    },
                     geometries: [{
                         "id": 'car',
                         "styleId": 'car-down',
                         "position": new TMap.LatLng(pathList.path[0][0].lat, pathList.path[0][0].lng)
                     },
                         { "id": 'start',
                        "styleId": 'start',
                            "position": new TMap.LatLng(pathList.path[0][0].lat, pathList.path[0][0].lng)
                    }, {
                        "id": 'end',
                            "styleId": 'end',
                            "position": new TMap.LatLng(pathList.path[0][pathList.path[0].length - 1].lat, pathList.path[0][pathList.path[0].length - 1].lng)  
                    }]
                });
                markerStartEnd.moveAlong({
                    'car': {
                        path: pathList.path[0],
                        speed: 2000
                    }
                }, {
                        autoRotation: true
                    })
            }
        });
    })