大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

前言

当 Maps JavaScript API 于 2005 年推出时，Web 的表现与现在有很大不同。 从那时起，前端 Web 框架出现了，极大地简化了前端开发人员创建用户友好界面的方式。 如今，React.js 是最流行的前端 Web 框架，超过一半的前端 Web 开发人员在使用。

在最初的支持的基础上，最近 Google 宣布发布 @vis.gl/react-google-maps 的 alpha 版本，这是第一个由 Google 赞助的库，用于将 Maps JavaScript API 组件集成到 React Web 应用程序中。

@vis.gl/react-google-maps 包含与 Maps JavaScript API 中的元素相对应的 React 组件以及用于访问地图实例和其他库的钩子，从而加快了加载时间并使整个代码库更易于管理。 该软件包将使开发人员能够快速轻松地创建具有地理空间体验的 Web 应用程序，同时放心该库将保持最新状态。

如何使用 vis.gl react-google-maps 库

该库可在 npm 上以 @vis.gl/react-google-maps 的形式获取。在代码中，导入 API 提供程序以加载 Maps JavaScript API 以及需要的任何其他组件，例如 Map 组件。

基础用法

导入 APIProvider 并将其包装在所有应有权访问 Google Maps API 的组件周围，APIProvider 上下文中的任何组件都可以使用该库提供的挂钩和组件。

要渲染简单的地图，请在 APIProvider 中添加 Map 组件。 在地图组件中，可以添加其他组件例如： Marker、AdvancedMarker 或 InfoWindow 以在地图上渲染内容。

对于更高级的用例，甚至可以将自己的组件添加到使用 google.maps.OverlayView 或 google.maps.WebGlOverlayView 的地图中。

import { APIProvider, Map, Marker } from '@vis.gl/react-google-maps';function App() {  const position = { lat: 53.54992, lng: 10.00678 };  return (    <APIProvider apiKey={'YOUR API KEY HERE'}>      <Map center={position} zoom={10}>        <Marker position={position} />      </Map>    </APIProvider>  );}export default App;

除了渲染地图之外，Maps JavaScript API 还有许多其他库，用于地理编码、路由、Places API、街景等。 默认情况下不会加载这些库，这就是为什么该模块提供 useMapsLibrary() Hooks 来处理其他库的动态加载。

例如，如果想在组件中使用 google.maps.places.PlacesService 类可以这样实现：

import { useMapsLibrary } from '@vis.gl/react-google-maps';const MyComponent = () => {  // triggers loading the places library and returns true once complete (the  // component calling the hook gets automatically re-rendered when this is  // the case)  const placesLib = useMapsLibrary('places');  const [placesService, setPlacesService] = useState(null);  useEffect(() => {    if (!placesLib) return;    setPlacesService(new placesLib.PlacesService());  }, [placesLib]);  useEffect(() => {    if (!placesService) return;    // ...use placesService...  }, [placesService]);  return <></>;};