關於 Geolocation

在實作之前，我大致上知道 Google Map 有個定位的 API （廢話）但我一直以為它叫做 location API。
所以在這邊對 Location 跟 Geolocation 的差別做個筆記：

在找 API 的時候，location API 通常是一個廣泛的跟位置有關的 API 類別，比方說 Google 有個 Location and Context API 的列表如下

像是 Places API 是 Google Map 裡面對於各個定點（店家、景點等）的各種資料等可以做各種有趣的應用。
Geolocation 則是一種定位的技術。
特此跟大家說明一下我的發現。（好吧這個可能只有我不知道吧）

在寫這系列文章時，我通常都是先找到 API 再想要拿 API 來做什麼事情，畢竟找到 30 個 API 比 想出 30 個 APP 還簡單許多。所以當我選好要使用 Google Map Geolocation API 的時候，我突然才想到，如果要定位的話，瀏覽器裡面就有內建的 geolocation api 了，好像沒必要用到第三方 API 呀？
（但我還是要用啦。）

瀏覽器的 geolocation api

// 改寫自 MDN 範例
navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position.coords.latitude, position.coords.longitude);
});

所以如果瀏覽器就有內建定位功能，那為什麼要接第三方 API ? 差別在哪裡？

Google Geolocation API 跟 Browser geolocation API的差別

在看過這個 StackOverflow 的答案 之後，做筆記如下：

• Google Geolocation API
  是透過客戶端的 user data 得到附近的 WIFI 跟基地台的資訊去推導出使用者的位置，使用此 API 會得到一組經緯度以及 accuracy radius ，一個以公里為單位的準確定位範圍數字。

• Browser Geolocation API
  navigator.geolocation 物件則是瀏覽器運用各種手段去推算出使用者的位置，比方說裝置裡的 GPS 、藍芽、WIFI訊號、IP 位置等資訊，有時甚至會利用到第三方 API 如 Google Geolocation API 。

翻譯自上面 StackOverflow 回答者的話：
「Google Geolocation API 基本上是說『給你我的 WIFI 跟基地台資訊，告訴我我在哪裡』，而 navigator.geolocation 則是跟瀏覽器說『我裝置裡的東西你都拿去用，網路你也有，不管怎樣告訴我我在哪裡』」

瀏覽器定位的方法有點模糊，所以很難說到底用哪一個會比較準確或比較好。瀏覽器或許因為有更多不同資訊可以使用所以能夠得到較準確的結果，但定位並不是瀏覽器的主要功能，準確程度也很可能因不同瀏覽器而異，Google 則是比較可能給出相較之下較為一致的結果。

Geolocation API 實作

昨天寫了一個過於陽春而且對住在台北以外的人非常不友善（基本上是無用吧）的天氣APP，今天就用 Google Map 的 Geolocation API 來給她加上一個定位的功能，讓這個天氣APP能夠直接定位客戶端的所在位置然後顯示當地天氣。

先來試用看看這個 API ，首先先取得 API Key。

因為 Google 的 API 眾多，他們有個很大的 API 管理平台 Google API Console 讓你選擇各種 API 來啟用跟監控個別 API 的使用狀況。

要記得啟用 API:

然後在 Credentials 頁面找到 API Key

Geolocation 的使用非常簡單，複製 Geolocation API 文件如下

// 使用 'POST' HTTP METHOD
https://www.googleapis.com/geolocation/v1/geolocate?key=YOUR_API_KEY

來隨便寫個 request：

function makeRequest(){
  xhr = new XMLHttpRequest();
  xhr.open( 'POST','https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyDIHHXeYB_Hsf21AAaQX8qd5Y2NDsckUbI');
  xhr.onload = function(){
    // do something
    var response = JSON.parse(this.responseText);
    console.log(response)
  }
  xhr.send();
}

makeRequest();

然後非常順利地得到以下結果：

接著只要把這邊得到的經緯度放進昨天的 API Key 裡面就好啦。

var lat;
var lon;

function getWeather() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    var city = response.city.name + ", " + response.city.country;
    var weatherTitle = response.list[0].weather[0].main;
    var temp = response.list[0].main.temp + "°";

    var weatherContainer = document.querySelector("#weather");
    weatherContainer.innerHTML = city + "<br/>" + weatherTitle + "<br/>" + temp;
  };
  xhr.open(
    "GET",
    "https://api.openweathermap.org/data/2.5/forecast?APPID=9c39fa3ce9d953fdd507d7d9f77093ef&units=metric" + lat + lon, 
    true
  );
  xhr.send();
}

function getLocation() {
  xhr = new XMLHttpRequest();
  xhr.open(
    "POST",
    "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyDIHHXeYB_Hsf21AAaQX8qd5Y2NDsckUbI",
    true
  );
  xhr.onload = function() {
    // do something
    var response = JSON.parse(this.responseText);
    lat = "&lat=" + response.location.lat;
    lon = "&lon=" + response.location.lng;
    getWeather();
  };
  xhr.send();
}

getLocation();

在這裡附上Codepen Demo