新增多车定位界面

@@ -23,3 +23,5 @@ export const DoneTask = params => { return http.post(`${baseServiceURL}/map/loca
 //根据用户查询所属出勤车辆
 export const selectNameList = params => { return axios.get(`${baseServiceURL}/map/location/selectNameList`, { params: params }); };
 
+//多车定位
+export const queryMulVel = params => { return axios.get(`${baseServiceURL}/map/location/queryMulVel`, { params: params }); };

+<template>
+    <div id="mapContainer"></div>
+</template>
+
+<script>
+    import AMapLoader from '@amap/amap-jsapi-loader';
+    import {queryMulVel} from '../../api/consigner/vehicle';
+
+    export default {
+        data() {
+            return {
+                mapInstance: null,
+                markers:[]
+            };
+        },
+        methods: {
+            fetchDataAndUpdateMap() {
+                // 请求后端数据
+                queryMulVel().then((response) => {
+                    const res = response.data;
+                    const firstVcl = res.data.data.firstVcl; // 获取首个车辆信息
+                    const others = res.data.data.others; // 获取其他车辆信息
+
+                    // 清除之前的标记
+                    this.markers.forEach(marker => {
+                        marker.setMap(null);
+                    });
+                    this.markers = [];
+
+                    // 添加首个车辆标记
+                    if (firstVcl && firstVcl.lon && firstVcl.lat) {
+                        const marker = new AMap.Marker({
+                            position: [firstVcl.lon / 600000.0, firstVcl.lat / 600000.0],
+                            map: this.mapInstance,
+                            title: firstVcl.vno,
+                            label: {
+                                content: firstVcl.vno,
+                                offset: new AMap.Pixel(0, -20) // 偏移量，使标题显示在标记的上方
+                            }
+                        });
+                        this.markers.push(marker);
+                    }
+                    if (others) {
+                        others.forEach(vehicle => {
+                            if (vehicle.lon && vehicle.lat) {
+                                const marker = new AMap.Marker({
+                                    position: [vehicle.lon / 600000.0, vehicle.lat / 600000.0],
+                                    map: this.mapInstance,
+                                    title: vehicle.vno,
+                                    label: {
+                                        content: vehicle.vno,
+                                        offset: new AMap.Pixel(0, -20) // 偏移量，使标题显示在标记的上方
+                                    }
+                                });
+                                this.markers.push(marker);
+                            }
+                        });
+                    }
+                    // 自动调整地图视野，确保所有标记都可见
+                    /*if (this.markers.length > 0) {
+                        const bounds = new AMap.Bounds();
+                        this.markers.forEach(marker => {
+                            bounds.extend(marker.getPosition());
+                        });
+                        this.mapInstance.setBounds(bounds);
+                    }*/
+                    if(firstVcl && firstVcl.lon && firstVcl.lat){
+                        this.mapInstance.setCenter([firstVcl.lon / 600000.0,firstVcl.lat / 600000.0])
+                    }
+                }).catch(error => {
+                    console.error('Failed to fetch data:', error);
+                });
+            }
+        },
+        mounted() {
+            AMapLoader.load({
+                key: 'fdb27c13681d084e85ff8457b5cbe540',
+                version: '2.0',
+                plugins: [],
+            }).then((AMap) => {
+                this.mapInstance = new AMap.Map('mapContainer', {
+                    zoom: 5,
+                    center: [116.397428, 39.90923], // 默认中心点位置
+                    //viewMode: '3D', // 使用3D视图
+                    //showIndoorMap: false,
+                    //showLabel: false,
+                    // mapStyle: 'amap://styles/dark',
+                    //mapStyle: 'amap://styles/fresh',
+                });
+
+                // 首次加载数据并更新地图
+                this.fetchDataAndUpdateMap();
+
+                // 启动定时器，每10分钟刷新一次数据并更新地图
+                setInterval(() => {
+                    this.fetchDataAndUpdateMap();
+                }, 10 * 60 * 1000);
+            }).catch((err) => {
+                console.error('Failed to load AMap:', err);
+            });
+        },
+    };
+</script>
+<style>
+    #mapContainer {
+        width: 100%;
+        height: 100vh;
+    }
+</style>