什么是 google-maps-promise?
google-maps-promise 是一个基于 Promise 的 Google Maps JavaScript API 封装器，可以让您更轻松地使用 Google 地图 API。该 npm 包是为前端开发人员开发的，目的是为了简化 Google 地图 API 的使用。
安装
在安装 google-maps-promise 之前，您需要首先安装 Google 地图 JavaScript API。如果您不知道如何安装 Google 地图 API，请先查阅相关文档。
在安装完 Google 地图 API 后，您可以在您的项目中安装 google-maps-promise :
npm install google-maps-promise
示例代码
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------ - ---------------
----- ------ - - ---- -------- ---- ------ --
----- ---- - ---
-------------------------
------------------ -- -
----- --- - --- ---------------------------------------------- -
-------
-----
---
--
-------------- -- -
------------------- ---- ------ -- ------- -------
---使用方法
初始化
在使用 google-maps-promise 之前，您需要先初始化它。您需要传入您的 Google 地图 API 密钥，然后 google-maps-promise 会返回一个 Promise，该 Promise 将在 Google 地图 API 成功加载时解决。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------ - ---------------
-------------------------
------------------ -- -
-- -------- ------ -- --- --
--
-------------- -- -
------------------- ---- ------ -- ------- -------
---加载地图
在 google-maps-promise 中，您可以使用 Google 地图对象并加载一个地图。您可以通过指定一个 HTML 元素的 ID 来创建一个地图。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------ - ---------------
----- ------ - - ---- -------- ---- ------ --
----- ---- - ---
-------------------------
------------------ -- -
----- --- - --- ---------------------------------------------- -
-------
-----
---
--
-------------- -- -
------------------- ---- ------ -- ------- -------
---添加标记
通过使用 google-maps-promise，您可以添加标记并在地图上显示。只需指定标记的位置即可。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------ - ---------------
----- ------ - - ---- -------- ---- ------ --
----- ---- - ---
-------------------------
------------------ -- -
----- --- - --- ---------------------------------------------- -
-------
-----
---
----- -------- - - ---- -------- ---- ------ --
----- ------ - --- -------------------
--------- ---------
----
---
--
-------------- -- -
------------------- ---- ------ -- ------- -------
---搜索位置
在 google-maps-promise 中，您可以搜索位置并在地图上标记它。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------ - ---------------
----- ------ - - ---- -------- ---- ------ --
----- ---- - ---
-------------------------
------------------ -- -
----- --- - --- ---------------------------------------------- -
-------
-----
---
----- -------- - --- ----------------------
----- ------- - ------------
------------------ ------- -- --------- ------- -- -
-- ------- --- ----- -
--------------------------------------------
----- ------ - --- -------------------
----
--------- -----------------------------
---
- ---- -
-------------------- --- --- ---------- --- --- --------- ------- ------------
-
---
--
-------------- -- -
------------------- ---- ------ -- ------- -------
---显示街景
在 google-maps-promise 中，您可以创建一个街景视图。您可以指定地理位置并在地图上显示它。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------ - ---------------
----- ------ - - ---- -------- ---- ------ --
----- ---- - ---
-------------------------
------------------ -- -
----- -------- - --- -------------------------------------------------------------- -
--------- -------
---- -
-------- ----
------ ----
--
---
--
-------------- -- -
------------------- ---- ------ -- ------- -------
---结语
google-maps-promise 是一个非常有用的 npm 包，可以让您更轻松地使用 Google 地图 API。通过这篇文章，您已经了解了 google-maps-promise 的基础知识，可以在您的项目中使用它了。祝您成功！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e72255dee6beeee750b