Foursquare 是一個以定位為主的社交媒體，他旗下的產品分為 Foursquare City Guide 跟 Foursquare Swarm。前者正如其名，提供使用者關於一個地區的資訊，像是各種有趣的活動或是好吃的餐廳，而這些資訊都是來自他們的使用者透過後者的 APP Swarm 所提供。Swarm 裡面遊戲化的打卡機制鼓勵許多使用者幫忙增建關於地點的資料。

今天就來使用 Foursquare Places API 來拿到 Foursquare 資料庫裡面關於各地點的資訊。

來看看 Foursquare 的開發者頁面。

來按右上角 Create Account 註冊帳號，然後 Create APP。

這麼一來我們就得到了一組 Client ID 跟 Client Secret。
現在來好好看看文件。
Endpoints 這個頁面列出了所有的 Endpoint 跟它們所需要的 Authentication 方式。

所有的 Endpoint ：

• venues ：一個景點的資料集合，包括地點、小提示（tips)、跟分類
• users：使用者
• photos：照片
• tips：小提示（使用者對於景點的評論或建議其他使用者做的事情）
• checkins：打卡
• lists：清單，使用者製作的景點集合

Foursquare 的 Authentication 分為兩種，一種是 Userless Auth 另一種是 User Auth。前者是給伺服器端的 APP 或沒有要取得 Foursquare 使用者同意的，後者則是需要同意的，比方說取得特定使用者的打卡記錄。

Userless Authentication 的方法是在 URL 裡面放進你的 Client ID 跟 Client Secret。

現在來說說 API Request 所需要的參數。

• 首先是剛剛提過的 client_id={client id} 跟 client_secret={client secret}
• v=YYYYMMDD：設定一個時間，表示 API 版本如果在此時間之後有更改，你還是能使用到舊版（在指定時間之前）的API 版本

今天我要使用 Search for venues 的 endpoint 來搜尋景點。
Request URL 如下

"GET", "https://api.foursquare.com/v2/venues/search"

必要的參數有：

• ll (latitude&longtitude)：使用者地點的座標
• near ： 使用者地點的範圍，舉例：taipei,taiwan

(以上兩個參數二選一即可）

可選的參數，挑幾個比較重要的：

• radius：推薦景點的範圍半徑，如果沒有指定 server 會根據那地點的景點密度來推算一個適當的半徑

• section：推薦景點的種類，像是food、drinks、coffee、outdoors、trendting、nextVenues(去過特定景點之後大家都會去的下個景點)、topPicks(混合不同分類的推薦景點)

• limit：回傳結果數量

• offset：回傳結果的起始點

• time ＆day ：取得指定時間結果，如果沒有這參數，就自動使用當下時間

現在來實做看看：

var clientId = "1OW03YAI3MG3I2OXU0A0DR5NN14DWNZY2SE2DRY4SLXLRPEU";
var clientSecret = "5RVGI2VRTDDJJCF2QOPZ0R0INQDMBJXJKU5OYM3JMFZFH343";

var url =
    "https://api.foursquare.com/v2/venues/search?near=taipei,taiwan&client_id=" + clientId + "&client_secret=" + clientSecret + "&v=20180101";
    
function makeRequest() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    console.log(response);
  };
  xhr.open("GET", url, true);
  xhr.send();
}
makeRequest();

回傳結果：

最後把它放進 HTML 裡面：

不是每個 venue 都有提供電話號碼跟地址就是了，不過我沒有處理這個問題 :P

Codepen 連結