使用 Google Maps API 在 Vanilla JavaScript 中构建地理定位应用

最近，我开发了一款基于地理位置的应用，利用Navigator、Google Maps API和Transport For London API获取并绘制伦敦 Santander Bikes的实时可用性地图。全部使用原生 JavaScript 编写。

💻你可以在这里看到我的工作💻

我认为分享一个逐步构建指南会很不错。只要地方政府或您想要使用的服务有 API，您可以轻松地在自己的城市复制此方法。类似的做法是从 Google Places API 获取本地商店或餐馆，并获取评论或其他数据。

首先，我们要将计划分解成小任务，因此我们需要执行以下操作：



步骤

1.从浏览器获取用户位置

2. 渲染 Google 地图并使用用户位置向 Google 地图创建请求

3. 向伦敦交通局 (TfL) 提交自行车信息请求

4. 解析 Tfl API 响应并将数据添加到地图

5. 检索特定信息并创建信息窗口

6. 在信息窗口添加自行车点信息和图像元素

7.添加自定义标记

1.从浏览器获取用户位置

为了让这款应用更贴近伦敦居民，我们希望检索用户的位置并显示附近可用的自行车。
“没错，但我们到底该怎么做呢？”你问道。🧐

我们将使用 Navigator 对象来实现这一点。Navigator 对象位于浏览器底层，它允许脚本查询状态并注册自身以执行某些活动。Navigator
对象有很多属性，您可以在这里阅读更多相关信息，但为了实现此目的，我们想使用 Geolocation。

该Navigator.geolocation只读属性返回一个 Geolocation 对象，该对象允许 Web 内容访问设备的位置。这使得网站或应用能够根据用户的位置提供定制结果。

一旦我们调用navigator.geolocation，它将提示用户允许共享其位置信息。如果您使用的是 Google Chrome，则会看到以下警告：

例如，在 Firefox 中，您可能必须在设置中更改地理位置共享权限。

这将在页面加载时完成，以便我们可以处理成功案例（例如，获取用户的当前位置）。

我们将它作为参数接收createMap。这将是我们将在步骤 2 中创建的函数。
如果不允许共享位置，我们将在控制台上收到错误。

2. 渲染 Google 地图并向 Google 地图创建请求

下一步，我们要在页面上渲染一张 Google 地图，并将其封装在一个函数中。
您需要注册 Google 地图平台并获取 API 密钥。以下是入门指南。

获得 API 密钥后，您必须按照文档将其添加到您的 Maps JavaScript API 请求中。请将 Googlescript标签添加到您的 html 文件中。

然后，我们使用用户的位置信息向 Google 地图发起请求。这些信息position.coords是从navigator.geolocation.getCurrentPosition()步骤 1 中检索到的。

map只是一个赋给 a 的 ID，<div>所以我们可以把它用作选择器。我们希望地图基于当前位置居中，所以我们使用center: { lat: latitude, lng: longitude }which 来存储我们的position.coords。我们还想调整zoom属性，使其比默认值更加放大。

如果您想尝试不同的方法，这里有更多有关使用 Google Maps API 进行地理定位的信息。

在函数中，createMap我们还想调用getBikeData()，我们将在下一步中创建它。

解构对象

const { latitude, longitude } = position.coords;

如果你从未见过这种看起来很奇怪的语法，它叫做解构。这是 ES6 新增的功能，你可以在这里阅读更多相关信息。
对象解构允许你将变量绑定到对象的不同属性。你需要指定要绑定的属性，然后指定要将其值绑定到的变量。

3. 向伦敦交通局 API 创建自行车信息请求。

现在我们将编写我们的getBikeData()函数，我们将创建一个向伦敦交通局 API 发送的获取请求以获取实时自行车数据的请求。

我们不需要 API 密钥即可从 TfL API 获取数据，因此我们只需使用提供的端点即可检索自行车点数据。我们将以 JSON 格式接收数据。

一旦获取响应成功，我们就需要添加自行车标记。我们稍后会为此创建一个函数。

您可以从 TfL 获取几种类型的数据，您可以在此处访问。

4. 解析 TfL API 响应并将自行车位置添加到地图

我们希望解析我们的 TfL API 响应，其中我们将自行车点作为我们函数的参数。

我们需要解析相当多的自行车点，因此需要对每个自行车点运行一个 forEach 循环。我们想将 存储bikeLocation为一个变量，用于存储每个自行车点的经纬度。

然后，我们要为每个标记创建一个 Google 标记，因此我们将使用 Google 的某个函数来实现。标记的相关文档请见此处。Google 标记实际上是一个对象，它具有position、map和icon属性。Position 参数将包含自行车点的经纬度。Map 参数将引用我们之前创建的地图。最后，icon 参数指的是标记图像，它将在最后一步中出现。

addBikeMarkers在我们的函数中，我们还调用了createBikeInfo()bikepoint 和 marker 作为参数。你猜对了，我们现在就开始讲解。

现在你的应用应该看起来是这样的，每个桑坦德自行车点都有漂亮的标记。太棒了！

5. 检索特定的 TfL 信息，并在用户选择自行车点时创建信息窗口

将所有自行车停放点都映射到地图上固然很好，但我们需要向用户提供更多信息。点击标记时会发生什么？我们希望显示一个窗口，其中包含所有信息，例如每个自行车停放点的可用自行车数量、可用停车位数量以及停靠点数量。

我们创建一个函数来检索并存储这些数据，以便能够以用户友好的格式显示它们。每次点击标记时，都会弹出此窗口。

您会在 JSON 数据中看到，该Place对象包含一个addtionalProperties包含nbBikes、nbDocks和 的数组nbSpaces。这实际上为我们提供了实时值，因此我们可以显示伦敦所有自行车点的准确状态。

如果您注意到这些数字不匹配（例如nbDocks - (nbBikes + nbSpaces) != 0），则表示自行车点已损坏。
为了找到我们想要的确切属性（nbBikes、nbDocks、nbSpaces），我们使用了find()数组方法，以便它可以在该对象中找到确切的键。
我在这里记录了一些数据，以确认所提取的数据是正确的。

最后，我们为每个 添加一个事件监听器marker。请注意，这实际上是使用了一个 Google 方法，它取代了addEventListener。在这里，我们使用来与 Google 标记进行交互。有关事件的更多信息，请参阅addListenerGoogle Maps API 文档。 我们调用函数（我们将在下一步中创建），并将、和作为参数传入其中。
createInfoWindowForMarker()markerbikepointbikeInfo

6. 在信息窗口添加自行车点信息和图像元素

快完成了！在这个函数中，我们将创建一个信息窗口来显示我们的自行车点数据。

信息窗口是 Google 地图提供的一种叠加层。它会在地图上方的指定位置以弹出窗口的形式显示内容（通常是文本或图片）。您可以点击此处了解更多关于信息窗口的信息

首先，我们infoWindow在函数外部声明变量，使其处于全局作用域内，并在函数内部使用 new.google.maps.InfoWindow 赋值。此 Google Maps 函数将接受一个对象字面量，该字面量指定用于显示信息窗口的参数。
我们将使用的对象字面量是content，它相当于JavaScript 中的innerHtml/ 。 在这里，我们希望将 html 传递给 DOM，创建一个 div 来保存图片和从 TfL API 获取的数据（自行车点名称、可用自行车数量、可用停车位数量、停靠点数量以及自行车可用百分比）。我们在上面的单独变量中计算此百分比。innerText

您会看到，此处代码块的第一行指示关闭一个已打开的 infoWindow。我们一次只想显示一个 infoWindow，因此这可以保证，如果已经有一个 infoWindow 打开，则该 infoWindow 会被关闭，以便显示新的 infoWindow。

infoWindow.open(map, marker);
map.setCenter(marker.getPosition());

最后，我们要打开一个新的 infoWindow 来显示实时自行车点信息。我们将map和marker作为参数传入，以便它与用户点击触发的标记关联。我们还希望将 infoWindow 置于地图的中心。同样，我们使用 ，setCenter这是一个内置方法，可以与 Google 地图一起使用，然后将其getPosition()链接到marker。getPosition()是一个与 关联的 Google 地图方法marker。如果您想了解更多关于 Google 地图和标记方法的信息，请访问此处。

瞧！多么漂亮啊。

7.添加自定义标记

这完全是可选的，因为我们已经有一个功能齐全的基于地理位置的应用程序，可以告诉我们伦敦公共自行车的可用性。🤩

作为我们的最后一步，我们只想赋予它一点个性化色彩并添加我们自己的自定义标记图像。

还记得我们在第 4 步创建标记时的操作吗？标记对象采用的属性之一是icon。该google.maps.Icon接口是一个表示标记图标图像的结构体。 有很多与 相关的属性，您可以在这里icon了解更多信息。

对于我们的信息窗口，我们将使用url（提取您选择的图像文件）、scaledSize（立即将原始图像缩放到所需大小）和origin（anchor将标记图像定位在与地图上标记的位置相对应的位置）。

我们现在有了它，一个使用 Navigator、Google Maps API 并从伦敦交通局自行车 API 获取数据的地理位置驱动应用程序。

-

这是我的第一篇技术博文，很想知道它是否对您使用 Google Maps API 的项目有所帮助！期待您的建设性反馈。