在前端开发中，使用 Google Maps 来展示地图信息是非常常见的需求。使用 with-google-maps npm 包可以方便地在项目中添加 Google Maps 功能，本文将介绍如何使用 with-google-maps。
安装 with-google-maps
安装 with-google-maps 可以使用 npm 命令，如下：
npm install with-google-maps
使用 with-google-maps
前置条件
在使用 with-google-maps 前，需要准备好 Google Maps API key，可以在 Google Cloud Console 中开通并获取。
代码实现
首先，我们需要引入 with-google-maps 包，并传入 Google Maps API key：
-- -------------------- ---- -------
------ ------------- ---- -------------------
----- ----- - ------------------- -- -
----------
---------------
---------------- ---- -------- ---- ------- --
--
---
------ ----------------------------------------------------------------------------
-------------------- -------- ------- ------ -- ---
---------------------- -------- ------- ------- -- ---
---------------- -------- ------- ------ -- ---
--上述代码中，我们通过 withGoogleMap 函数创建了一个名为 MyMap 的组件，并设置了地图的默认缩放等级以及中心点。googleMapURL 属性为必须传入的参数，用于指定 Google Maps API 地址，绑定我们的 API key。
运行代码后，页面上将会显示一个 Google Maps 地图，并且通过设置 defaultCenter，地图将默认展示在澳大利亚悉尼的位置。
设置地图标记
除了展示地图外，我们还可以在地图上添加标记点。下面是添加一个标记点的示例代码：
<MyMap googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${YOUR_API_KEY}`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
>
<Marker position={{ lat: -34.397, lng: 150.644 }} />
</MyMap>在上述代码中，我们通过添加 Marker 组件来显示一个标记点，设置了标记点的位置为澳大利亚悉尼的位置。
设置地图样式
可以通过 with-google-maps 支持的一个 props 属性 styles 来设置地图的样式，下面是设置地图样式的示例代码：
-- -------------------- ---- -------
----- ------ - -
-
-------------- ------
-------------- ----------------
---------- -
-
--------- ------
-
-
--
---
--
------ ----------------------------------------------------------------------------
-------------------- -------- ------- ------ -- ---
---------------------- -------- ------- ------- -- ---
---------------- -------- ------- ------ -- ---
---------------
--在上述代码中，我们通过 styles 属性设置了地图的样式，可以根据自己的需求进行设置。
总结
本文介绍了如何使用 with-google-maps npm 包快速地在项目中添加 Google Maps 功能，通过示例代码演示了如何展示地图，添加标记点以及设置地图样式。希望本文对广大前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671128dd3466f61ffe45c