如果您正在开发一个电商网站或者与小区商铺相关的应用，那么您一定会需要一个地图来展示商铺的地理位置。而 react-retailer-map 就是一个非常好用的 npm 包，可以帮助您快速地在应用中引入谷歌地图，并展示商铺的位置信息。
安装
在开始使用 react-retailer-map 前，您需要先安装它。您可以使用 npm 来安装：
npm install react-retailer-map --save
引入组件
在您的 React 应用中，使用 import语句来引入 ReactRetailerMap 组件：
import ReactRetailerMap from 'react-retailer-map';
使用示例
接下来，我们来看一个使用 ReactRetailerMap 的示例，来展示商铺的位置信息。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------
------ ---------------- ---- ---------------------
------ - ------ - ---- --------------------
-------- ----- -
----- ------- --------- - ----------
- --- -- ----- -------- --------- - ---- -------- ---- --------- - --
- --- -- ----- -------- --------- - ---- -------- ---- --------- - --
- --- -- ----- -------- --------- - ---- -------- ---- --------- - --
- --- -- ----- -------- --------- - ---- -------- ---- --------- - --
---
----- ------------- - -------- -- -
-------------------------
--
------ -
-----
-----------------
-----------------------
---------------- ---- ---------- ---- ----------- --
----------------
-
----------------- -- -
-------
-------------
----------------
------------------------
----------- -- --------------------
--
---
-------------------
------
--
-
------ ------- ----在上面的示例中，我们通过 useState hook 来定义商铺的位置信息，并在 ReactRetailerMap 组件内部使用了 Marker 来展示商铺的位置信息。在点击商铺位置时，我们通过 onMarkerClick 回调函数来打印商铺名称。
您需要将 { apiKey: 'YOUR_API_KEY' } 中的 YOUR_API_KEY 替换成您自己谷歌地图的 API Key。
参数
ReactRetailerMap 组件支持以下可选参数：
- apiKey: 谷歌地图的 API Key。
- defaultCenter: 地图默认中心点的位置信息。
- defaultZoom: 地图默认的缩放比例。
结语
使用 react-retailer-map，您可以非常轻松地在 React 应用中引入谷歌地图，并展示商铺的位置信息。希望这个小教程对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c181e8991b448e8d93