Wiener Linien 是一个为奥地利维也纳地铁和公交系统提供实时到站和路线信息的平台。通过 npm 包 wienerlinien，前端开发者可以在项目中轻松地调用维也纳公交信息的 API，并获取实时数据。
通过本文，您将学习如何使用 wienerlinien 包，并在您的前端应用程序中显示奥地利维也纳地铁和公交系统的实时信息。
安装 wienerlinien 包
首先，让我们使用 npm 安装 wienerlinien 包：
--- ------- ------------
使用 wienerlinien 包获取实时数据
接下来，我们将学习如何使用该包来获取实时的维也纳公交信息。wienerlinien 包提供了一个名为 monitor 的方法，该方法接收一个JSON 格式的配置文件作为参数，并返回实时数据的 Promise。
以下是一个示例配置文件，显示如何查找 ID 为 1 的车站的实时信息。
- ------- ------ ---------------------- ----- --------------- ----- ------------------- ----- ---------------- ---- -
我们将使用以下代码从 API 中获取实时数据：
--- ------------ - ------------------------ ------------------------------------------ ------ - ------------------ -- --------------- ------- - ------------------- ---
在这个例子中，我们将 config 对象作为参数传递给 monitor 方法，并将数据打印到控制台。
显示获取的数据
现在，我们已经成功地从 API 获得了数据。 但是，我们将如何在前端应用程序中显示这些数据？
为了演示如何在前端应用程序中显示数据，我们可以使用简单的 HTML 页面，如下所示：
--------- ----- ------ ------ ------------- ------ ------------ ------- ------ ---------- ------ --------- ---- ---------------- ------- ------------------------ ------- -------
在页面中我们添加一个用于展示数据的 div，数据在 index.js 中获取并填充到 div 中。
--- ------------ - ------------------------ --- ------ - - ------- ------ ---------------------- ----- --------------- ----- ------------------- ----- ---------------- ---- -- ------------------------------------------ ------ - --- ------- - -------------------------------- ----------------- - --------------------- -- --------------- ------- - ------------------- ---
在这个例子中，我们获取数据并将其显示在页面上的 data div 中。我们可以通过更改配置对象中的值来获取其他的公交信息。
结论
我们已经演示了如何使用 wienerlinien 包来获取维也纳公交信息的实时数据，并在前端应用程序中显示该数据。通过这篇文章，我们可以学习到如何使用 wienerlinien 包并了解到如何调用维也纳公交信息的 API。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006710a8dd3466f61ffe0ab