车辆定位界面完善

@@ -31,60 +31,90 @@
         <div id="mapContainer" style="width: 100%; height: 500px;"></div>
         <div id="mapContainer" style="width: 100%; height: 500px;"></div>
     </div>
     </div>
 </template>
 </template>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
 <script>
 <script>
     import AMapLoader from '@amap/amap-jsapi-loader';
     import AMapLoader from '@amap/amap-jsapi-loader';
-    import {selectVehicle} from '../../api/consigner/vehicle';
-    import {list} from "../../api/consigner/check";
+    import { selectVehicle } from '../../api/consigner/vehicle';
 
 
     export default {
     export default {
         name: 'MapComponent',
         name: 'MapComponent',
         data() {
         data() {
             return {
             return {
                 mapInstance: null,
                 mapInstance: null,
-                queryInfo:{
-                    vno:'',
-                    vnocolor:''
+                queryInfo: {
+                    vno: '',
+                    vnocolor: ''
                 }
                 }
             };
             };
         },
         },
-        methods:{
+        methods: {
             getList() {
             getList() {
-                const _this = this
+                const _this = this;
                 selectVehicle(this.queryInfo).then((response) => {
                 selectVehicle(this.queryInfo).then((response) => {
-                    const res = response.data
-                    //console.log(response.data)
+                    const res = response.data;
                     if (res.code !== '200') {
                     if (res.code !== '200') {
-                        return _this.$message.error('获取消息收发记录，失败！')
+                        return _this.$message.error('获取车辆位置失败！');
+                    }
+                    if(res.data.data!=='' && res.data.data!=null){
+                        // 获取车辆位置信息
+                        const vehicle = res.data.data.firstVcl;
+                        // 在获取车辆位置成功的部分，创建信息窗口或者自定义标记
+                        const markerContent = document.createElement('div');
+                        markerContent.innerHTML = `
+                                        <div class="rounded-corner" STYLE="width: 200px;background-color: rgba(255,255,255,0.7);text-align: center">
+                                            <p>车牌号：${vehicle.vno}</p >
+                                            <p>已行驶距离：${vehicle.runDistance}公里</p >
+                                            <p>剩余距离：${vehicle.remainDistance}公里</p >
+                                        </div>
+                                    `;
+                        if (vehicle.lon && vehicle.lat) {
+                            const lon = parseFloat(vehicle.lon) / 600000.0; // 将经度字符串转换为数值并除以 600000.0
+                            const lat = parseFloat(vehicle.lat) / 600000.0; // 将纬度字符串转换为数值并除以 600000.0
+                            //const coords = wgs84togcj02(lon, lat);
+                            // 添加车辆位置标记
+                            const marker = new AMap.Marker({
+                                position: [lon, lat],
+                                map: _this.mapInstance,
+                                content: markerContent
+                            });
+                            const defaultMarker = new AMap.Marker({
+                                position: [lon, lat],
+                                map: _this.mapInstance,
+                            });
+                            // 移动地图中心到车辆位置
+                            _this.mapInstance.setCenter([lon, lat]);
+                            _this.$message.success('获取车辆位置成功！');
+                        } else {
+                            _this.$message.warning('车辆位置信息不完整！');
+                        }
+                    }else{
+                        return _this.$message.error('无相关车辆信息返回');
                     }
                     }
-                    // 获取列表数据
-                    console.log(res.data.data.firstVcl)
-                    _this.$message.success('获取消息收发记录，成功！')
                 }).catch(error => {
                 }).catch(error => {
-                    // 关闭加载
-                    _this.$message.error(error.toString())
-                })
+                    _this.$message.error('获取车辆位置失败：' + error.toString());
+                });
+            },
+            initMap() {
+                AMapLoader.load({
+                    key: 'fdb27c13681d084e85ff8457b5cbe540',
+                    version: '2.0',
+                    plugins: [], // 可以加载地图插件，比如定位、地图工具等
+                }).then((AMap) => {
+                    this.mapInstance = new AMap.Map('mapContainer', {
+                        zoom: 10,
+                        center: [116.397428, 39.90923], // 设置地图中心点
+                    });
+                }).catch((err) => {
+                    console.error(err);
+                });
             },
             },
         },
         },
         mounted() {
         mounted() {
-            AMapLoader.load({
-                key: 'fdb27c13681d084e85ff8457b5cbe540',
-                version: '2.0',
-                plugins: [], // 可以加载地图插件，比如定位、地图工具等
-            }).then((AMap) => {
-                this.mapInstance = new AMap.Map('mapContainer', {
-                    zoom: 10,
-                    center: [116.397428, 39.90923], // 设置地图中心点
-                });
-            }).catch((err) => {
-                console.error(err);
-            });
+            this.initMap();
         },
         },
     };
     };
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
-    /* 可以添加一些样式来设置地图容器的大小等 */
     .my-text-area .prepand{
     .my-text-area .prepand{
         float: left;
         float: left;
         width:89px;
         width:89px;
@@ -94,10 +124,17 @@
     }
     }
 </style>
 </style>
 <style>
 <style>
-    .my-text-area .el-textarea__inner{
-        min-height: 28px;
-        height: 28px;
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-    }
+      .my-text-area .el-textarea__inner{
+          min-height: 28px;
+          height: 28px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+      }
+      .rounded-corner {
+          border-radius: 10px; /* 设置圆角的半径为10像素 */
+          background-color: #f0f0f0; /* 背景颜色 */
+          padding: 10px; /* 内边距 */
+          margin: 10px; /* 外边距 */
+          box-shadow: 0 0 5px #ddd; /* 盒子阴影效果 */
+      }
 </style>
 </style>