前言
如果你正在做一个与地图相关的前端项目，那么你一定会用到谷歌街景（Google Street View）的 API。谷歌街景提供了全球各地的街景图像，可以方便地用在地图上展示地标建筑等内容。但是，如果要在项目中使用谷歌街景，就需要通过 API 调用后端接口，这对于前端来说是一件比较麻烦的事情。
为了解决这个问题，有一个 npm 包叫做 google-streetview-images，它提供了一种简单的方式在前端中使用谷歌街景，省去了繁琐的后端接口调用。本文将介绍如何使用 google-streetview-images。
安装
google-streetview-images 是一个 npm 包，因此需要在项目中使用 npm 或者 yarn 安装。
# 使用 npm 安装 npm install google-streetview-images # 使用 yarn 安装 yarn add google-streetview-images
用法
初始化
在使用 google-streetview-images 之前，我们需要先进行初始化。
import { GoogleStreetViewImages } from 'google-streetview-images';
const sv = new GoogleStreetViewImages({
apiKey: 'YOUR_GOOGLE_API_KEY',
});在初始化的时候，需要传入一个对象，其中包括一个名为 apiKey 的键，值为你自己的 Google API Key。如果你还没有 Google API Key 的话，可以参考 这里 进行获取。
获取街景图像
在进行了初始化之后，就可以开始使用 google-streetview-images 提供的 fetch 方法获取街景图像了。
const lat = 48.8584;
const lng = 2.2945;
const imgUrls = await sv.fetch({
lat,
lng,
});在这个例子中，我们传入了一个包含 lat 和 lng 两个键的对象，值分别为自己想要获取街景图像的位置的经纬度。执行 fetch 方法之后，返回的是一个包含了多张街景图像的 URL 的数组。
如果我们想要获取一个固定方向（朝向）的街景图像，也可以传入 direction 参数。
const lat = 48.8584;
const lng = 2.2945;
const imgUrls = await sv.fetch({
lat,
lng,
direction: 45,
});在这个例子中，我们传入了一个额外的 direction 键，值为 45。这代表我们想要获取以 lat、lng 位置为中心，朝向 45 度方向的街景图像。
更多参数
除了 lat、lng 和 direction 之外，还可以传入一些参数来对请求的街景图像进行调整。
const imgUrls = await sv.fetch({
lat,
lng,
heading: 180,
fov: 120,
size: '640x640',
pitch: -10,
});在这个例子中，我们传入了四个额外的参数：
heading：街景图像的方向，范围为 0-360。fov：街景图像视野的大小，范围为 10-120。size：街景图像的像素大小，以宽度x高度的格式表示。pitch：街景图像的视角高度，范围为 -90-90。
示例代码
下面是一个在网页中显示谷歌街景的完整示例，可以用来进一步学习 google-streetview-images 的使用方法。
-- -------------------- ---- -------
--------- -----
------
------
------------- ---------- ---------------
-------
----------- -
------ -----
------- ------
-
--------
-------
------
---- ----------------------
------- --------------
------ - ---------------------- - ---- --------------------------------------------------------
----- -- - --- ------------------------
------- ----------------------
---
----- -------- ---------------- -
----- --- - --------
----- --- - -------
----- ------- - ----- ----------
----
----
-------- ----
---- ----
----- ----------
------ ----
---
----- ---------- - --------------------------------------
-------------------------------- - ---------------------
-
-----------------
---------
-------
-------在这个示例中，我们先在网页中创建了一个 div 元素，设置了其宽度和高度。然后在脚本中，初始化了 GoogleStreetViewImages 对象，并在 initStreetView 函数中使用 fetch 方法获取街景图像。最后，将获取到的第一张街景图像的 URL 设置为 div 的背景图片。这样，我们就可以在网页中以背景图片的形式展示街景图像了。
总结
google-streetview-images 是一个非常方便的 npm 包，让我们可以在前端代码中使用谷歌街景的 API，避免了后端 API 调用的繁琐。通过本文的介绍，相信大家已经可以很好地掌握 google-streetview-images 的使用方法了，希望对大家的项目有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590781e8991b448d65fd