1. 程式人生 > >使用JavaScript和Google時區API顯示任何城市的本地時間

使用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'

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

-獲取位置的緯度和經度

要使用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時區請求,以獲取一些有用的資訊:

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

現在,我們已經準備好使用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 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