设备定位地图，打点展示

src/views/controlCenter/historyjectory/trackplayback.vue

@@ -50,14 +50,26 @@
 <script setup lang="ts">
 import api from "@/api/controlCenter/historyjectory/index"
 import { formatTimestampToHM } from "@/utils/function"
+import { useRoute } from "vue-router"
+import { ref, onMounted, onUnmounted, watch } from "vue"
+import { ElMessage } from "element-plus"
+
+// 添加AMap类型声明
+declare global {
+  interface Window {
+    AMap: any;
+  }
+}
+
+declare var AMap: any;
 const route = useRoute();
 // -------------------------- 状态管理 --------------------------
 // 地图实例
-const mapRef = ref<AMap.Map | null>(null);
+const mapRef = ref<any>(null);
 // 轨迹线实例
-const polylineRef = ref<AMap.Polyline | null>(null);
+const polylineRef = ref<any>(null);
 // 移动标记点实例
-const markerRef = ref<AMap.Marker | null>(null);
+const markerRef = ref<any>(null);
 // 轨迹数据（初始为空，从设备列表动态获取）
 const trackPoints = ref<[number, number][]>([]); // 移除硬编码默认值
 // 设备分组数据（包含各设备的轨迹点）
@@ -92,21 +104,19 @@ const initMap = () => {
         polylineRef.value = polyline;
         // 创建标记点（初始位置临时设为 [0, 0]，播放时会覆盖）
         const marker = new AMap.Marker({
-            position: [0, 0],
+            position: [20, 20],
             icon: new AMap.Icon({
                 size: new AMap.Size(40, 40),
-                image: 'https://webapi.amap.com/images/car.png',
+                image: '/src/assets/images/position_ico.png',
                 imageSize: new AMap.Size(40, 40),
             }),
             anchor: 'center',
         });
         map.add(marker);
         markerRef.value = marker;
-
         isLoading.value = false;
         fetchTrackData(); // 数据请求移到地图初始化后
     } catch (error) {
-        console.error('地图初始化失败：', error);
         isLoading.value = false;
     }
 };
@@ -254,11 +264,11 @@ watch(trackPoints, (newPoints) => {
 
 <style scoped>
 /* 样式保持不变 */
-:deep .el-timeline-item__tail {
+:deep(.el-timeline-item__tail) {
     border-left: 1px solid rgba(0, 198, 250, 0.2);
 }
 
-:deep .el-timeline-item__timestamp {
+:deep(.el-timeline-item__timestamp) {
     color: rgba(2, 124, 251, 1);
     font-size: 16px;
 }
@@ -446,4 +456,4 @@ watch(trackPoints, (newPoints) => {
     color: #666;
     padding-top: 20px;
 }
-</style>
+</style>