使用JavaScript和Google时区API显示任何城市的本地时间

发布时间:2020-07-23 07:26:35 作者:二哈少爷
来源:网络 阅读:4302

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调用的预期参数:

我们将在下一节中详细介绍如何定义前两个参数,尽管在此之前,您需要首先获得一个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中输入所需的地址(在本例中为“东京日本”)并按下进入。然后右击在地图上的位置名称(“东京”)上显示上下文菜单。选择并单击菜单项“这是什么“拿出一张位置卡,上面显示着它的纬度和经度:

使用JavaScript和Google时区API显示任何城市的本地时间

或者,您也可以使用类似于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


推荐阅读:
  1. juniper 设置系统时区和时间
  2. 创建的docker容器时间显示错误/date错误/时区错误

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript google时区api avascript

上一篇:Lync Server 2013 共享PPT经过一段时间报演示错误(ID32402、61045)

下一篇:66、VLAN、Trunk、VTP简介

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》