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


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