react-google-maps 切换热图可见性答案

【问题标题】：react-google-maps toggle Heatmap visibilityreact-google-maps 切换热图可见性
【发布时间】：2018-04-22 21:22:39
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript

【解决方案1】：

与其打开和关闭可见性，不如让它的存在取决于属性或状态，当它发生变化时，热图将相应地呈现或不呈现。

【讨论】：