一直想在【關於】頁面加一個地圖，由於種種原因（懶）始終沒有行動，今天比較閒就搞一下吧。
開始想用高德地圖之類的，但是有註冊開發者帳號、實名驗證等等繁瑣的事情。
所以我把目光投向了國外的地圖服務提供商，
GoogleMap 因為眾所周知的原因首先就排除了，後來挑了很久，我決定使用 Mapbox 的服務。
註冊 / 登錄 Mapbox 帳戶#
點擊連結進入官網註冊並登錄帳戶
登錄後界面應該是這樣的
安裝 Mapbox SDK#
- 我們用於網頁所以選擇 Web
- 選擇使用 Mapbox CDN
- 包含 GL JS 文件
- 複製 CSS 和 JS 文件
- 在
<head>中貼上（這裡要根據自己的實際情況哦）
- 將地圖添加到您的網站，也是複製貼上，大同小異大同小異
使用 Mapbox Studio#
-
訪問 Mapbox Studio 並點擊 New Style
-
這裡的 template 根據自己的需要選擇，這裡我勾選 Satelllte Streets ，也就是衛星圖
然後 Customize -
根據自己的需要調整地圖，層次，顏色，圖塊等各種信息，最後 publish（我這裡以使用北京天安門的衛星圖為例）
-
回到 Studio 界面 share 剛才的地圖，複製 Style URL 和 Access token ，用它替換掉剛才 Add the map to your site 中的 URL 和 token
好了 (●°u°●) 」，通常情況下此時地圖已經可以加載了：