style: 修改航线中为air时的图标，加上loading加载动画

src/components/VLoading/src/VLoading.vue

@@ -46,11 +46,11 @@ const props = withDefaults(defineProps<internalProps>(), {
 }
 
 .v-loading-spinner {
+  position: sticky;
   top: 50%;
-  margin-top: -24px;
+  transform: translateY(-50%);
   width: 100%;
   text-align: center;
-  position: absolute;
 }
 
 .circular {

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -221,6 +221,7 @@ const openShareDialog = () => {
         :_schemas="allData?._schemas"
         :serial_no="allData?.serial_no"
         :uncode="allData?.uncode"
+        :mode="allData?.transportInfo?.mode"
       ></MapView>
       <TransportStep class="transport-step" :data="allData"></TransportStep>
     </div>

src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue

@@ -5,6 +5,7 @@
     style="width: 100%; height: 448px"
     class="tracking-map"
     :class="{ 'dark-mode': themeStore.theme === 'dark' }"
+    v-vloading="loading"
   ></div>
 </template>
 <script setup lang="ts">
@@ -14,6 +15,7 @@ import OriginIcon from '../images/originIcon.png'
 import TransferIcon from '../images/transferIcon.png'
 import * as turf from '@turf/turf'
 import { useThemeStore } from '@/stores/modules/theme'
+import { transportationMode } from '@/components/TransportationMode'
 
 const themeStore = useThemeStore()
 
@@ -21,6 +23,7 @@ const props = defineProps<{
   serial_no?: string
   uncode?: string
   _schemas?: string
+  mode?: string
 }>()
 
 const markerPositions = ref([])
@@ -287,6 +290,14 @@ const setCenterAndZoom = () => {
         initialCenter = map!.getCenter()
         initialZoomLevel = map!.getZoom()
         isFirstRender = false
+        // 定义最小缩放等级  缩放等级数值越小，地图显示的区域越大
+        const minZoom = 5 // 示例：最小缩放等级为 5
+
+        // 如果当前缩放等级大于最小缩放等级，则调整缩放等级
+        if (initialZoomLevel > minZoom) {
+          map!.setZoom(minZoom)
+          initialZoomLevel = minZoom
+        }
       }
       // 获取东北角和西南角的经纬度
       const curLatLon = map.getBounds()
@@ -382,7 +393,7 @@ const addShipMarker = (x: number) => {
       html: `
         <div class="container">
           <div class="circle"></div>
-          <span style="padding: 0; color:white; border:1px solid white" class="font_family icon-icon_ocean_b"></span>
+          <span style="padding: 0; color:white; border:1px solid white" class="font_family icon-${transportationMode?.[props?.mode]}" ></span>
         </div>
         `,
       className: 'arrow-icon',
@@ -457,11 +468,13 @@ const updateVisibleMarkers = (isInit?: boolean) => {
   // 计算当前视图中的标记，包括多地球的情况
   while (x >= cc1 && x <= cc2 && cc > 0) {
     if (x === 0) {
-      addShipMarker(x)
+      // 初始化时不添加当前轮船位置标记
+      if (!isInit) addShipMarker(x)
       x++
       cc--
       continue
     }
+
     Object.values(initMarksObj.value).forEach((marker: any) => {
       const latLng = marker.getLatLng()
       const key = `${latLng.lat},${latLng.lng + x * 360}`
@@ -524,8 +537,10 @@ const handleData = (data) => {
 
 const allMapData = ref()
 const viewData = ref([])
+const loading = ref(false)
 // 请求接口并处理标记
 const getMarker = () => {
+  loading.value = true
   $api
     .getTrackingDetailMapData({
       serial_no: props.serial_no,
@@ -580,6 +595,9 @@ const getMarker = () => {
         }
       }
     })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 // 监听 `serial_no` 变化