您可以使用 react-google-maps 在不同的缩放级别上显示不同的组件并在缩放时平滑过渡吗？答案

【问题标题】：Can you display different components on different zoom levels with react-google-maps and have smooth transitions when zooming?您可以使用 react-google-maps 在不同的缩放级别上显示不同的组件并在缩放时平滑过渡吗？
【发布时间】：2020-10-27 04:15:50
【问题描述】：

我正在使用 React 和 react-google-maps，我想以不同的缩放级别显示不同的组件。这些组件就像不同的数据层。我想把代码写成这样：

<GoogleMap
    ref={this.ref}
    onZoomChanged={this.zoomHandler}
>
   { this.state.showComponent1 && <Component1 /> }
   { this.state.showComponent2 && <Component2 /> }
</GoogleMap>

我这样做的方式是，我的 zoomHandler 函数将检查地图的缩放级别，然后一旦它通过某个点，我想切换正在查看的组件。

zoomHandler() {
    ...
    // If zoom level is >= 13, then change component view
    const zoom = this.ref.current.getZoom();
    const bool1 = zoom >= 13;
    if (this.state.showComponent1 !== bool1) {
        this.setState({ showComponent1: bool1, showComponent2: !bool1 });
    }

    ...
}

问题是我必须调用 setState，它会重新渲染整个地图。有没有办法让我有一个平滑的过渡，旧组件会淡出，新组件会进来？这些组件是相当静态的，所以没有很多更新。或者是否有不同的地图库可以使这变得容易？这是图书馆：https://www.npmjs.com/package/react-google-maps

【问题讨论】：

标签： javascript reactjs google-maps react-google-maps

【解决方案1】：

我在 sample code 的 Hooks 中使用 UseState，它在达到某个缩放级别时显示不同的组件。在这段代码中，我使用了 react-google-maps 库的 Circle 和 Polygon 组件。当缩放级别达到 13 或更高时，它将渲染到多边形组件，但是低于 13 的缩放级别将显示圆形组件。这不会只重新渲染地图的圆形和多边形组件。

这是我声明状态变量的地方：

 const [center, setCenter] = useState({ lat: 40.7290705, lng: -74.0105223 });
  const [zoom, setZoom] = useState(11);
  const [bool1, setBool1] = useState(null);
  const refMap = useRef(null);

这是我的 handleZoomChanged 函数，我在其中获取缩放级别的当前值，并根据我的缩放级别将 bool1 变量设置为 true 或 false：

 const handleZoomChanged = () => {
    const newZoom = refMap.current.getZoom(); //get map Zoom
    setZoom(newZoom);
    console.log("this is new zoom: " + { zoom }.zoom);

    if (newZoom >= 13) {
      setBool1(true);
    } else {
      setBool1(false);
    }
  };

在返回中，我使用下面的代码根据我的 bool1 值渲染多边形或圆形组件：

 {bool1 ? (
        <Polygon.../>
      ) : (
        <Circle..../>
      )
 }

注意：请更改 index.js 文件中 YOUR_API_KEY 的值，以便代码运行。

【讨论】：