---
# System prepended metadata

title: TDX 自行車 API 教學 Demo

---

# TDX 自行車 API 教學 Demo


### API 帶 header 驗證範例程式碼
* [範例程式碼](https://codepen.io/hexschool/pen/RwgvZEZ?editors=0010)

> 不帶 APP ID、KEY 還是可以練習，但會有請求次數限制


## TDX 自行車 API 講解

1. [基礎、進階 API 講解](https://tdx.transportdata.tw/api-service/swagger)
2. 如何取得自己的座標？
3. axios + 文字列表顯示離自己最近的自行車列表

# leaflet 教學

## leaflet 簡述
1. 申請 mapbox 流程
2. [從 Quick Start 了解 leaflet 地圖套件](https://leafletjs.com/examples/quick-start/)
3. leaflet 有圖層概念，[概念](https://www.androidpit.com/google-maps-gesture-controls)
    * **Raster Layers** - 
        * **TileLayer** - 圖磚方式呈現
        * TileLayer.WMS
        * ImageOverlay
        * VideoOverlay
    * UI Layers
        * **Marker** (單點)
        * **Popup** (彈跳冒泡視窗 - 可放多內容)
        * Tooltip (彈跳冒泡視窗 - 可放少內容)
    * 其他圖層
        * **GeoJSON**
        * LayerGroup
        * FeatureGroup
        * GridLayer
    * Vector Layers (向量圖層)
4. Leaflet 可以客製化[地圖樣式](https://docs.mapbox.com/api/maps/styles/)， third Party > Developer resources > Carto

```
L→ Layer 圖層
```


**map 地圖的設定**
https://leafletjs.com/reference-1.7.1.html#map-example

```
L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});
```

### 移動座標
居中座標在中間
```
map.panTo(new L.LatLng(22.6047344,120.2979626))
```

marker 座標圖示

```
marker([50.5, 30.5])
```

bindPopup 綁定彈出窗到圖層

```
bindPopup()
```

setView 設定觀看位置

```
setView()
```

addto 加入

```
addto()
```

removeLayer 移除 layer

```
`removeLayer()`
```

fitBounds 設定觀看位置＋放大到最大

```
`fitBounds()`
```


chain 用法：

```
`L.marker([50.5, 30.5]).addTo(map);`
```

geoJSON
https://leafletjs.com/examples/geojson/

```
var myLayer = L.geoJSON().addTo(map);
myLayer.addData(geojsonFeature);
```




## 載入地圖流程

* [範例程式碼](https://codepen.io/liao/pen/gOpOgzg)
* [官網參數](https://leafletjs.com/reference-1.6.0.html#map-example)
* 自我練習：換成自己的座標，做成自己的地圖

### 語法

* .setView - 佈置場景，可以想像成建立一個空的容器地圖
* tileLayer - 拉進圖資，以 [OpenStreetMap](https://www.openstreetmap.org/#map=8/23.611/120.768)， [mapbox](https://docs.mapbox.com/) 為例
* .setZoom(18) - Zoom 地圖
* getZoom() - 取得 Zoom 

## leaflet 範例教學
* 插入地圖，顯示位置
* [固定座標 + marker 教學](https://codepen.io/hexschool/pen/PoJjxqG?editors=1010)
* [個人座標定位，搭配 Leaflet marker 標記效果](https://codepen.io/hexschool/pen/OJxbEMg?editors=1010)


## 插入 marker 教學

* [Marker 顏色 PNG](https://github.com/pointhi/leaflet-color-markers)
* [兩個點以上](https://codepen.io/liao/pen/dyoyvop)
* [倒真正資料](https://codepen.io/liao/pen/abObPQm)
* [下 if 判斷改變樣式](https://codepen.io/liao/pen/poJoqmz)

## 套件教學
* [效能處理](https://codepen.io/liao/pen/rNVNoGN)
    * [插件網址](https://github.com/Leaflet/Leaflet.markercluster) Leaflet.markercluster

## 自行車 CC BY 設計稿
* [Shiaohan](https://2021.thef2e.com/users/6296427084285739387?week=2&type=1)：圖文列表、找景點、找餐廳、找自行車路線
* [早餐](https://2021.thef2e.com/users/6296427084285739247?week=2&type=1)：依縣市搜尋各個列表
* [YUN](https://www.figma.com/file/lguo4e9pNw7y7ZZ9zzzA3D/THE-F2E-2021-WEEK2?node-id=1239%3A27063)：自行車資訊、路線搜尋依縣市、借車還車按鈕控制
* [ching](ching)：自行車可租還
## TDX API + leaflet  UI 實作流程

2. [畫線顯示自行車道路線](https://codepen.io/hexschool/pen/dyVOjVm?editors=1011)
3. [自行車租借、歸還資料處理](https://codepen.io/hexschool/pen/VwMPPGx?editors=1010)
4. 切換不同 marker
5. 多個 API 搜尋，promise all 語法
6. Google 連結外部導航




