feat: 地图组件新增真实路线规划配置，需要哪条线路就规划哪条线路

src/components/TongzhouTrafficMap.vue

@@ -37,6 +37,7 @@ export default {
     return {
       AMap: null,
       map: null,
+      drivingInstances: [], // 存储路径规划实例
       infoWindow: null,
       initialized: false,
       searchQuery: '', // 搜索内容绑定
@@ -63,7 +64,7 @@ export default {
   },
   mounted() {
     this.initAMap();
-    
+
     // 自定义首页地图搜索和图例位置样式
     if (this.$route.path === '/home') {
       this.privateStyle.search = { top: "100px", left: "25%", right: "25%" };
@@ -77,45 +78,75 @@ export default {
   },
   methods: {
     async initAMap() {
-      window._AMapSecurityConfig = { securityJsCode: this.securityJsCode };
+      // 1. 配置安全密钥（必须在 load 之前）
+      window._AMapSecurityConfig = {
+        securityJsCode: this.securityJsCode,
+      };
+
       try {
+        // 2. 加载地图核心及插件
         const AMap = await AMapLoader.load({
           key: this.amapKey,
           version: "2.0",
-          plugins: ['AMap.InfoWindow', 'AMap.Polyline', 'AMap.Marker']
+          plugins: ['AMap.Driving']
         });
 
         this.AMap = AMap;
+
+        // 3. 实例化地图
         this.map = new AMap.Map(this.$refs.mapContainer, {
-          zoom: 13,
-          center: [116.6612, 39.9125],
+          zoom: 14,
           mapStyle: "amap://styles/darkblue",
-          viewMode: "3D"
+          viewMode: "3D",
+          center: [116.661132, 39.902996], // 通州火车站中心
         });
 
-        //实时路况图层
-        var trafficLayer = new AMap.TileLayer.Traffic({
-            zIndex: 10
+        // 4. 等待地图加载完成后执行路径规划
+        this.map.on('complete', () => {
+          console.log("地图加载完成，开始绘制真实路网...");
+          this.drawStaticRoutes();
         });
 
-        trafficLayer.setMap(this.map);
+      } catch (err) {
+        console.error('地图加载失败：', err);
+      }
+    },
+
+    drawStaticRoutes() {
+      // 定义 3横 3纵 坐标（确保起终点大致跨越通州核心区，让 Driving 自动找路）
+      const routeConfigs = [
+        // --- 横向 3 条 ---
+        { name: "新华大街", start: [116.642, 39.910], end: [116.680, 39.911], color: "#32c5ff" },
+        { name: "玉带河大街", start: [116.642, 39.902], end: [116.680, 39.903], color: "#3ee68d" },
+        { name: "运河西大街", start: [116.642, 39.894], end: [116.680, 39.895], color: "#ffcc33" },
+        // --- 纵向 3 条 ---
+        { name: "车站路", start: [116.652, 39.915], end: [116.653, 39.889], color: "#fc8c23" },
+        { name: "新华南路", start: [116.661, 39.916], end: [116.661, 39.889], color: "#8ca1ff" },
+        { name: "东关大道", start: [116.671, 39.916], end: [116.671, 39.890], color: "#cc8d66" }
+      ];
 
-        this.infoWindow = new AMap.InfoWindow({
-          isCustom: true,
-          offset: new AMap.Pixel(0, -15)
+      routeConfigs.forEach(config => {
+        // 为每一条路创建一个 Driving 实例
+        const driving = new this.AMap.Driving({
+          map: this.map,              // 直接展现结果在地图上
+          hideMarkers: false,         // 显示起终点 Marker
+          autoFitView: false,         // 禁止自动缩放（防止多条线时地图乱跳）
+          outlineColor: '#000',       // 路线描边
+          // 默认样式是蓝色，由于 Driving.search 不直接支持自定义颜色，
+          // 这里我们先渲染默认路线。
         });
 
-        this.map.on("complete", () => {
-          this.initialized = true;
-          this.activeLegends = this.legendConfig.map(l => l.type);
-          this.drawTrafficScene();
+        // 执行搜索
+        driving.search(config.start, config.end, (status, result) => {
+          if (status === 'complete') {
+            console.log(`${config.name} 绘制成功`);
+          } else {
+            console.error(`${config.name} 绘制失败:`, result);
+          }
         });
 
-        this.map.on('click', () => this.infoWindow && this.infoWindow.close());
-
-      } catch (e) {
-        console.error("地图加载失败:", e);
-      }
+        // this.drivingInstances.push(driving);
+      });
     },
 
     // 搜索查询逻辑