今天是第三階段的整合日，要把「即時公車到站資料」跟「Google Maps 路線規劃」放進同一個畫面，讓兩份原本各自獨立的資料開始產生關聯。

目標畫面

使用者輸入起點與目的地後，畫面應該同時呈現：

1. 地圖上的建議路線
2. 該路線會經過的公車站牌即時到站資訊

修改 main.js，整合兩份資料

// src/main.js
import { fetchBusArrivals, normalizeArrivals } from './api/tdx.js';
import { getRoute } from './api/googleMaps.js';
import { initMap, addMarker, drawRoute } from './components/Map.js';
import { renderArrivalList } from './components/ArrivalList.js';

const mapContainer = document.getElementById('map');
const arrivalContainer = document.getElementById('arrival-list');

async function planJourney(origin, destination, busRoute) {
  // 1. 初始化地圖並畫出路線
  await initMap(mapContainer);
  const route = await getRoute(origin, destination);
  await drawRoute(route.path);
  await addMarker(origin, '起');
  await addMarker(destination, '訖');

  // 2. 抓取沿途公車即時資料
  const rawArrivals = await fetchBusArrivals('Taipei', busRoute);
  const arrivals = normalizeArrivals(rawArrivals);
  renderArrivalList(arrivalContainer, arrivals);

  // 3. 顯示 Google Maps 估計時間，作為對照基準
  console.log(`Google Maps 預估：${route.durationText}`);

  return { route, arrivals };
}

planJourney(
  { lat: 25.0478, lng: 121.5170 },
  { lat: 25.0421, lng: 121.5079 },
  '0100000A00'
);

為什麼要「對照」兩種時間估計？

這裡值得停下來想一下：Google Maps 給的是「路網平均估計時間」，比較穩定但不即時；TDX 給的是「該班次真實的即時到站時間」，更即時但只涵蓋公車本身，不含步行、轉乘等環節。

這兩份資料其實是互補的——這也正是研究上「機率式推薦」想解決的核心問題：如何把多個不確定來源的時間資訊，整合成一個使用者可以信任的建議。

我們會在第四階段用簡化的方式碰觸這個問題。

今天先求「資料同框」

現階段的目標還不是做出智慧推薦，只是先確保兩份資料能在同一個畫面、同一個查詢流程中一起呈現。明天我們會替這個「即時查詢版本」做一次階段性收尾與畫面優化。