---
# System prepended metadata

title: API

---

# API 
###### tags: independent study

## Google Map API
### 1.Basics
1. simple map 
center : 地圖的中心位址
zoom : 縮放大小比例
2. show pixel tile coord info windows
3. **geolocation - 定位使用者當前位置**
4. localizing the map- html設定介面語言
5. sync loading
6. gall-peter projection
7. lat/lng object- 替代api 的marker
### 2.events 
1. **simple click - 點擊marker 拉近距離**
2. **using closures - 點擊可自訂彈出視窗文字**
3. **accesse arg in UI - marker on click**
4. **get lat/lng on click**
5. listen to DOM events - 監聽click map
6. **POI (point of interests) click-  目的至地標路徑**

### 3.control and interaction
1. default controls 
2. disabling the default UI
3. **replacing default controls**
4. adding cotrols to the map
5. **control options - 下拉列表**
6. **control position - ui 位置設置**
7. custom controls - ex: back to center
8. adding state to controls- set center
9. **gesture handling - 添加快捷手勢**
10. restrivting map bounds- 自訂地圖邊
11. resizable split map panes分割客製地圖
12. **inset overview map - 內嵌概要地圖**
13. **delay loading dynamic map **
 
### 4.drawing on maps and customizing the map
* marker label (新增移除 自訂圖案 彈出視窗 動畫)
* 畫線  動態新增刪除點線
* 匡列地圖上的區塊 (幾何圖形) 編輯 移動
* overlap 自訂義圖片
* 自定義 type、mode(黑夜模式 衛星模式 地形等)

### 5.Layers
1. Traffic Layer : 
    可以創建一個顯示即時的交通情況的地圖(壅塞程度)
    用法: const trafficlayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);

2. Transit Layer :
    可以創建一個顯示大眾運輸系統的地圖
    用法: const transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);

3. Bicycle Layer :
    可以創建一個特別給腳踏車使用的地圖，例如可以看到腳踏車道或是建議的腳踏車路線
    用法: const bikeLayer = new google.maps.BicyclingLayer();
    BikeLayer.SetMap(map);

#### Deck.gl : 用來視覺化的工具
* deck.gl Trips Layer
可以看到交通工具的動態地圖

* deck.gl ScatterPlot GeoJsonLayer
可以利用點的分布看到最近發生地震的地方



### 6.vector map feature (beta) 炫炮功能
1. webGL overlays - 3d 立體大樓城鎮
2. tilt and rotation - 3d 立體建物 支援旋轉放大
3. move camera easing - 3d立體 視角zoom in

### 7.其餘服務及library 
    街景 支援衛星某些角度圖片 支援導航功能等 各式library encode method等


## Place

## Route




