React-Google-Maps-SW是一个使用React编写的谷歌地图API的Javascript库。它简化了与谷歌地图API的交互，并允许在React应用程序中快速创建交互式和响应式地图。在本文中，我们将探讨如何使用React-Google-Maps-SW来构建一个实时的地图应用程序。
安装React-Google-Maps-SW
React-Google-Maps-SW可以从npm库中安装。在您的项目中，可以使用以下命令来安装这个包：
npm install --save react-google-maps-sw
安装完成后，我们需要在React组件中导入这个包：
import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps-sw';现在我们已经成功安装了React-Google-Maps-SW，并且准备开始构建我们的地图应用程序。
创建谷歌地图
在我们开始写代码之前，我们需要一个谷歌地图引用，并且确认已经获取到API密钥。您可以从谷歌开发者控制台中创建API密钥，然后将其用于引用Google地图API。
在我们开始编写代码之前，我们还需要了解一些React-Google-Maps-SW的基础概念。下面是一些必要的概念。
withGoogleMap()
withGoogleMap是一个高阶组件，它接受一个自定义React组件，并返回一个新的React组件。这个新的组件包含一个GoogleMap，它可以自动渲染我们的地图。
GoogleMap
GoogleMap是一个React组件，用于渲染谷歌地图。
withScriptjs()
withScriptjs是另一个高阶组件，它接受一个自定义React组件，并返回一个新的React组件。这个新的组件包含一个Script，用于加载必要的Google Map API脚本。
有了这些知识，我们可以开始创建我们的谷歌地图。在下面的代码中，我们将使用withGoogleMaps和GoogleMap来创建我们的地图。我们还需要将withScriptjs用于Script加载，以确保我们加载了必要的API脚本。
-- -------------------- ---- -------
----- --- - -------------------------------- --
----------
---------------
---------------- ---- -------- ---- ------- --
-
-------------------- -- ------- ----------- ---- -------- ---- ------- -- ---
------------
--
----
-------------
--------------------------------------------------------------------------------------------------------------
-------------------- -------- ------- ------ -- ---
---------------------- -------- ------- ------- -- ---
---------------- -------- ------- ------ -- ---
--我们设置了Zoom和DefaultCenter属性来设置初始地图的缩放级别和中心位置。isMarkerShown属性表示是否在地图上显示一个标记。最后，我们使用GoogleMap和Marker组件来渲染地图和标记。在Map组件上，我们传递一个谷歌地图API密钥和其他必要的属性来加载和渲染地图。
在地图上添加标记
现在我们已经创建了一个简单的谷歌地图，让我们添加一些标记。在下面的代码中，我们添加了一个Mark组件来渲染标记。我们还添加了一个state属性来存储我们的标记位置。
-- -------------------- ---- -------
----- --- ------- --------- -
------------------ -
------------
---------- - -
--------------- ----
-
-
-------------- - ------- -- -
----- - ------ - - -----
---------------
--------------- - ---- ------------- ---- ------------ -
--
-
-------- -
----- - -------------- - - ----------
------ -
-----
----------
---------------
---------------- ---- -------- ---- ------- --
-----------------------------
-
--------------- -- ------- ------------------------- ---
------------
------
-
-
-我们首先在constructor中设置了一个空的markerPosition状态属性。在handleMapClick()方法中，我们使用事件的latLng属性来获取标记位置，并将其存储在markerPosition状态属性中。
我们现在已经成功地在地图上添加了标记！我们还可以定义可以处理MarkerClick事件的回调函数，并在地图上添加其他自定义组件。使用React-Google-Maps-SW，我们可以很容易地创建交互式地图，并快速集成谷歌地图API！
结论
在本教程中，我们学习了如何使用React-Google-Maps-SW来构建一个实时的谷歌地图应用程序。我们涵盖了必要的概念，并展示了如何在地图上添加标记。把这些知识应用到您的下一个项目中，并创建自己的交互式和响应式地图应用程序！
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------- -------------- ---------- ------ - ---- -----------------------
----- --- - -------------------------------- --
----------
---------------
---------------- ---- -------- ---- ------- --
-----------------------
-
--------------------- -- ------- ------------------------------- ---
------------
--
----- --- ------- --------- -
------------------ -
------------
---------- - -
--------------- ----
-
-
-------------- - ------- -- -
----- - ------ - - -----
---------------
--------------- - ---- ------------- ---- ------------ -
--
-
-------- -
----- - -------------- - - ----------
------ -
----
---------------------------------------------------------------------------------------------------------------
-------------------- -------- ------- ------ -- ---
---------------------- -------- ------- ------- -- ---
---------------- -------- ------- ------ -- ---
-------------------------------
-----------------------------
--
-
-
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bae81e8991b448d94b3