车辆定位界面完善

@@ -31,42 +31,69 @@
         <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());
+                });
             },
             },
-        mounted() {
+            initMap() {
                 AMapLoader.load({
                 AMapLoader.load({
                     key: 'fdb27c13681d084e85ff8457b5cbe540',
                     key: 'fdb27c13681d084e85ff8457b5cbe540',
                     version: '2.0',
                     version: '2.0',
@@ -80,11 +107,14 @@
                     console.error(err);
                     console.error(err);
                 });
                 });
             },
             },
+        },
+        mounted() {
+            this.initMap();
+        },
     };
     };
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
-    /* 可以添加一些样式来设置地图容器的大小等 */
     .my-text-area .prepand{
     .my-text-area .prepand{
         float: left;
         float: left;
         width:89px;
         width:89px;
@@ -100,4 +130,11 @@
           border-bottom-left-radius: 0;
           border-bottom-left-radius: 0;
           border-top-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>