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

前言

当 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;

使用 JavaScript API 的其他 Maps 库

除了渲染地图之外，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 <></>;
};

参考资料

https://cloud.google.com/blog/products/maps-platform/introducing-react-components-for-the-maps-javascript-api/

https://github.com/visgl/react-google-maps

https://www.youtube.com/watch?app=desktop&v=Zxf1mnP5zcw

https://www.tam-tam.co.jp/tipsnote/javascript/post12851.html

https://phppot.com/php/draw-path-using-google-maps-javascript-api/