Web API 简介

2024-07-13 14:13| 来源: 网络整理| 查看: 265

API 使用一个或多个 JavaScript objects 在你的代码中进行交互，这些对象用作 API 使用的数据（包含在对象属性中）的容器以及 API 提供的功能（包含在对象方法中）。

备注：如果你不熟悉对象如何工作，则应继续学习 JavaScript objects 模块。

让我们回到 Geolocation API 的例子 - 这是一个非常简单的 API，由几个简单的对象组成：

Geolocation, 其中包含三种控制地理数据检索的方法 Position, 表示在给定的时间的相关设备的位置。 — 它包含一个当前位置的 Coordinates 对象。还包含了一个时间戳，这个时间戳表示获取到位置的时间。 Coordinates, 其中包含有关设备位置的大量有用数据，包括经纬度，高度，运动速度和运动方向等。 jsnavigator.geolocation.getCurrentPosition(function (position) { var latlng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude, ); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN, disableDefaultUI: true, }; var map = new google.maps.Map( document.querySelector("#map_canvas"), myOptions, ); });

备注：当你第一次加载上述实例，应当出现一个对话框询问你是否乐意对此应用共享位置信息（参见它们在适当的地方有额外的安全机制这一稍后将会提到的部分）。你需要同意这项询问以将你的位置于地图上绘制。如果你始终无法看见地图，你可能需要手动修改许可项。修改许可项的方法取决于你使用何种浏览器，对于 Firefox 浏览器来说，在页面信息 > 权限中修改位置权限，在 Chrome 浏览器中则进入设置 > 隐私 > 显示高级设置 > 内容设置，其后修改位置设定。

我们首先要使用 Geolocation.getCurrentPosition() 方法返回设备的当前位置。浏览器的 Geolocation 对象通过调用 Navigator.geolocation 属性来访问。

jsnavigator.geolocation.getCurrentPosition(function(position) { ... });

这相当于做同样的事情

jsvar myGeo = navigator.geolocation; myGeo.getCurrentPosition(function(position) { ... });

但是我们可以使用 "点运算符" 将我们的属性和方法的访问链接在一起，减少了我们必须写的行数。

Geolocation.getCurrentPosition() 方法只有一个必须的参数，这个参数是一个匿名函数，当设备的当前位置被成功取到时，这个函数会运行。这个函数本身有一个参数，它包含一个表示当前位置数据的 Position 对象。

备注：由另一个函数作为参数的函数称为 (callback function "回调函数").

仅在操作完成时调用函数的模式在 JavaScript API 中非常常见 - 确保一个操作已经完成，然后在另一个操作中尝试使用该操作返回的数据。这些被称为 **asynchronous **“异步”操作。由于获取设备的当前位置依赖于外部组件（设备的 GPS 或其他地理定位硬件），我们不能保证会立即使用返回的数据。因此，这样子是行不通的：

jsvar position = navigator.geolocation.getCurrentPosition(); var myLatitude = position.coords.latitude;

如果第一行还没有返回结果，则第二行将会出现错误，因为位置数据还不可用。出于这个原因，涉及同步操作的 API 被设计为使用 callback functions“回调函数”，或更现代的 Promises 系统，这些系统在 ECMAScript 6 中可用，并被广泛用于较新的 API。

我们将 Geolocation API 与第三方 API（Google Maps API）相结合， — 我们正在使用它来绘制 Google 地图上由 getCurrentPosition()返回的位置。我们通过链接到页面上使这个 API 可用。 — 你会在 HTML 中找到这一行：

html

要使用该 API, 我们首先使用google.maps.LatLng()构造函数创建一个LatLng对象实例，该构造函数需要我们的地理定位 Coordinates.latitude 和 Coordinates.longitude值作为参数：

jsvar latlng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude, );

该对象实例被设置为 myOptions对象的center属性的值。然后我们通过调用google.maps.Map()构造函数创建一个对象实例来表示我们的地图，并传递它两个参数 — 一个参数是我们要渲染地图的元素的引用 (ID 为 map_canvas), 以及另一个参数是我们在上面定义的myOptions对象

jsvar myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN, disableDefaultUI: true, }; var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);

这样做一来，我们的地图呈现了。

最后一块代码突出显示了你将在许多 API 中看到的两种常见模式。首先，API 对象通常包含构造函数，可以调用这些构造函数来创建用于编写程序的对象的实例。其次，API 对象通常有几个可用的 options(如上面的myOptions对象)，可以调整以获得你的程序所需的确切环境 (根据不同的环境，编写不同的Options对象)。API 构造函数通常接受 options 对象作为参数，这是你设置这些 options 的地方。

备注：如果你不能立即理解这个例子的细节，请不要担心。我们将在未来的文章中详细介绍第三方 API。

【本文地址】

公司简介

联系我们