Link 開發環境訂餐軟體：多級下拉選單聯動地址選擇與地圖定位實作

需求分析

在 Link 開發環境（推測為特定低代碼/行動開發框架）構建訂餐 App，需實現「省→市→區→街道」多級下拉選單聯動，選擇後自動在地圖上標記位置。

核心實作步驟

1. 資料來源準備
   取得標準行政區劃資料（國家統計局最新 CSV/JSON），建立四層關聯表：province → city → district → street。
2. 前端聯動邏輯
   使用框架提供的 onChange 事件，依序篩選下一層選項並重置後續層級。
   範例（偽代碼）：

   onProvinceChange(provinceId) {
       cityList = allCities.filter(c => c.provinceId == provinceId);
       districtList = []; streetList = [];
       refreshUI();
   }

3. 地圖定位整合
   選擇最終街道後，呼叫地圖 SDK（Google Maps / 高德 / 百度）
   geocode(addressString).then(loc => map.setCenter(loc))。
4. 快取與效能
   行政區資料量小（~5 萬筆），建議打包為本地 JSON 隨 App 發布，離線可用、零延遲。

參考資源

JB51 多級聯動下拉選單實作範例（jQuery + JSON 版，邏輯可移植至 Link 環境）。

擴充建議

• 加入關鍵字搜尋（如輸入「信義」直接過濾所有層級），提升使用者體驗。
• 整合 GPS 定位，「一鍵定位當前位置」自動填充四級下拉選單。
• 地圖標記點選後可微調，修正地址解析偏差。