使用JavaScript和Google時區API顯示任何城市的本地時間

JavaScript沒有短缺Date()自從該對象在很多生命週期前就被引入以來,相關的冒險就開始了,儘管它們在很大程度上侷限於檢索和操作用戶系統的本地時間。使用JavaScript獲取特定位置的日期和時間一直是一件難以捉摸的事情,因爲Date對象本身就對用戶計算機的時間進行操作。當有Date方法,例如Date.getTimezoneOffset()Date.getUTCDate()以幫助我們獲得世界時間,從這裏開始,在複雜的國際時間規則世界中航行,比如在特定時區的夏令節約時間,然後我們才能可靠地到達彩虹的盡頭,也就是世界上某個特定地點的時間,這是一個滑坡路。我們需要的是一個時區數據庫和夏令節約時間規則,以消除僅依靠用戶的本地時間來獲得地球上特定位置的時間的所有複雜性和錯誤性。那就是Google的時區API派上用場:


洛杉磯時間:下午10:08:38 (Wed)

多倫多時間:上午1:08:38 (Thur)

AM

巴黎時間


設置Google時區API

Google的Timezone API提供一個簡單的接口來獲取地球上任何位置的時區和DST(夏令時)偏移量。要使用它,只需請求:

https://maps.googleapis.com/maps/api/timezone/json/?parameters

哪裏“傑森“可以用字符串替換”XML“如果您希望返回的數據是XML格式,而不是JSON格式,那麼parameters應包括以下3條信息:

Google時區API調用的預期參數:

  • location以逗號分隔的緯度和經度元組(即:location=37.3711, -122.0375),表示要查找的確切位置。

  • timestamp:所需的日期和時間,以秒錶示,從1970年1月1日午夜開始。API使用 timestamp確定是否應用夏令節餘。1970年以前的時間可以表示爲負值。

  • key:應用程序的API密鑰。這個免費的密鑰是需要從您的網站向API提出請求。

我們將在下一節中詳細介紹如何定義前兩個參數,儘管在此之前,您需要首先獲得一個GoogleAPI密鑰才能從您的站點訪問時區API。要做到這一點,只需按照本頁。如果您已經設置了一個API鍵,並且希望再次修改或撤回它,那麼直接跳到Google控制檯頁面.

下面是一個完全正確的時區API調用字符串的示例加拿大溫哥華日期2016年11月4日:

https://maps.googleapis.com/maps/api/timezone/json?location=49.283436, -123.130429&timestamp=1478880000&key=YOUR_API_KEY

返回的數據:

例如,調用完成後,通過Ajax返回的數據以JSON字符串的形式出現:

1

2

3

4

5

6

7

{

   "dstOffset" : 3600,

   "rawOffset" : -28800,

   "status" : "OK",

   "timeZoneId" : "America/Vancouver",

   "timeZoneName" : "Pacific Daylight Time"

}

在加拿大溫哥華,2016年夏令時間將於3月13日至11月6日生效。由於所要求的日期2016年11月4日在這一範圍內,返回的數據反映了這一點。這,這個,那,那個"dstOffset"參數(以秒爲單位)告訴我們該時間和位置,DST(夏令節)偏移量相對於世界時是1小時(3600秒)。“rawOffset“屬性告訴我們此時區相對於世界時的標準偏移量(以秒爲單位),撇開從任何夏令節餘中抵消。

簡而言之,任何位置的本地時間都是通過添加timestamp“參數和返回的"dstOffset",和“rawOffset“共同的價值觀。但這只是一個太簡單的解釋,所以讓我們繼續挖掘。

爲地球上某一特定地點的當前日期/時間準備參數

讓我們把所有這些理論運用到實際中去,得到世界上某一特定地點的當前日期和時間。東京怎麼樣?曾經去過那裏,愛過一切,除了昂貴的交通!我們需要東京的緯度和經度座標,加上當前的世界日期和時間,從1970年1月1日午夜開始,世界協調時間爲“timestamp“參數以構造相應的時區請求:

1

2

3

4

5

6

var loc = '35.731252, 139.730291' // Tokyo expressed as lat,lng tuple

var targetDate = new Date() // Current date/time of user computer

var timestamp = targetDate.getTime()/1000 + targetDate.getTimezoneOffset() * 60 // Current UTC date/time expressed as seconds since midnight, January 1, 1970 UTC

var apikey = 'YOUR_TIMEZONE_API_KEY_HERE'

 

var apicall = 'https://maps.googleapis.com/maps/api/timezone/json?location=' + loc + '&timestamp=' + timestamp + '&key=' + apikey

讓我們來看看我們是如何導出上述值的:

-獲取位置的緯度和經度

要使用GoogleMaps獲取位置的緯度和經度,請在GoogleMaps中輸入所需的地址(在本例中爲“東京日本”)並按下進入。然後右擊在地圖上的位置名稱(“東京”)上顯示上下文菜單。選擇並單擊菜單項“這是什麼“拿出一張位置卡,上面顯示着它的緯度和經度:

或者,您也可以使用類似於latlong.net得到那些神祕的數字。

-得到timestamp任何日期的值

這,這個,那,那個timestampGoogle時區API的參數期望所需的日期和時間從1970年1月1日午夜開始以秒爲單位表示。對於當前時間,計算方法是先實例化Date對象以獲取用戶計算機的當前本地時間,然後使用以下方法添加UTC偏移量(以分鐘爲單位)Date.getTimezoneOffset():

1

2

var targetDate = new Date() // Current date/time of user computer

var timestamp = targetDate.getTime()/1000 + targetDate.getTimezoneOffset() * 60 // Current UTC date/time expressed as seconds since midnight, January 1, 1970 UTC

因爲timestamp參數應該以秒爲單位,我們做一個小的數學把當前的日期和它的UTC偏移到那個單位。這裏有一個時間戳,代表從1970年世界協調時1月1日午夜開始的時間和日期,正如醫生所吩咐的。

如果您感興趣的目標日期不是當前日期/時間,只需將特定日期字符串傳入new Date()實例化它時,例如:

1

var targetDate = new Date('December 25, 2025')

這對於未來或過去的相關應用都是有用的,比如追溯到2025年的聖誕節東京時間。見在這裏實例化日期對象的各種方法.

在最後apicall變量現在包含我們可以發出的Google時區請求,以獲取一些有用的信息:

1

var apicall = 'https://maps.googleapis.com/maps/api/timezone/json?location=' + loc + '&timestamp=' + timestamp + '&key=' + apikey

打那個電話-爲地球上的某個特定地點爭取時間

現在,我們已經準備好使用Ajax來接電話,並使用前面構建的請求字符串調用時區API。返回的數據爲我們提供了東京的正確時區和DST偏移量,然後我們可以使用這些數據來確定該城市的正確日期和時間:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

var loc = '35.731252, 139.730291' // Tokyo expressed as lat,lng tuple

var targetDate = new Date() // Current date/time of user computer

var timestamp = targetDate.getTime()/1000 + targetDate.getTimezoneOffset() * 60 // Current UTC date/time expressed as seconds since midnight, January 1, 1970 UTC

var apikey = 'YOUR_TIMEZONE_API_KEY_HERE'

var apicall = 'https://maps.googleapis.com/maps/api/timezone/json?location=' + loc + '&timestamp=' + timestamp + '&key=' + apikey

 

var xhr = new XMLHttpRequest() // create new XMLHttpRequest2 object

xhr.open('GET', apicall) // open GET request

xhr.onload = function(){

    if (xhr.status === 200){ // if Ajax request successful

        var output = JSON.parse(xhr.responseText) // convert returned JSON string to JSON object

        console.log(output.status) // log API return status for debugging purposes

        if (output.status == 'OK'){ // if API reports everything was returned successfully

            var offsets = output.dstOffset * 1000 + output.rawOffset * 1000 // get DST and time zone offsets in milliseconds

            var localdate = new Date(timestamp * 1000 + offsets) // Date object containing current time of Tokyo (timestamp + dstOffset + rawOffset)

            console.log(localdate.toLocaleString()) // Display current Tokyo date and time

        }

    }

    else{

        alert('Request failed.  Returned status of ' + xhr.status)

    }

}

xhr.send() // send request


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章