react-google-map切换热图可见性

Question

我有一个使用react-google-maps的谷歌地图设置，我正在使用heatmap component来显示覆盖在地图顶部的热图。这在初始加载时工作得很好，但我在切换热图的可见性时遇到了一些困难。

在https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap中的示例中，它们可以访问heatmap变量来执行heatmap.setMap()和heatmap.getMap()之类的操作。

据我所知，使用react-google-maps并没有提供访问map或heatmap实例的方法。

那么如何打开/关闭热图呢？

import HeatmapLayer from "react-google-maps/lib/visualization/HeatmapLayer";

const MapaPerfilW = withGoogleMap(props => (
    <GoogleMap
        defaultZoom={15}
        position={{ lat: 37.782551, lng: -122.445368 }}
    >
        <HeatmapLayer
            data={[
                new google.maps.LatLng(37.782551, -122.445368),
                new google.maps.LatLng(37.782745, -122.444586),
                new google.maps.LatLng(37.782842, -122.443688),
                new google.maps.LatLng(37.782919, -122.442815),
                new google.maps.LatLng(37.782992, -122.442112),
                new google.maps.LatLng(37.783100, -122.441461)
            ]}
        />
    </GoogleMap>
));

组件代码：https://github.com/tomchentw/react-google-maps/blob/master/lib/components/visualization/HeatmapLayer.js

Answer 1

而不是打开和关闭可见性，您必须使其存在依赖于属性或状态，当它更改时，热图将相应地呈现或不呈现。