Question

我使用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

Answer 1

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

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

1 个答案: