react-google-maps 切换删除热图

Question

我目前正在努力使用react-google-maps-api 中的 heatMapLayer 组件。

在下面的热图组件中，我传递从 api 调用接收的数据，并在地图上创建热图，但我有一个切换选项，我想在其中显示不同的数据，并且

heatMapTracks

将是 null或和空数组[]。我希望 heatmapplayer 然后消失或显示新数据，但它总是在地图上显示旧数据。有没有办法删除热图图层？

import { HeatmapLayerF } from '@react-google-maps/api';

interface IHeatMap {
  heatMapTracks: { location: google.maps.LatLng; weight: number }[];
}

export const HeatMap = (props: IHeatMap) => {
  const { heatMapTracks } = props;

  if (heatMapTracks.length === 0) {
    return null;
  }

  return (
    <HeatmapLayerF
      data={heatMapTracks}
      options={{
        radius: 15,
        opacity: 1,
      }}
    />
  );
};

编辑：我也尝试过有条件地渲染组件，但没有任何作用。一些虚拟数据：

  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)
                ]}

我这是我尝试过的条件检查

 return (
      <>
        {this.data.track.polylineData && filteredElements}
        {this.data.isMobile ? <HeatMap heatMapTracks={heatMapTracks} /> : null}
        {this.data.poiState && poiElements}
        {machine && machineElement()}
      </>

Answer 1

使用

HeatmapLayer

而不是

HeatmapLayerF

。 我也遇到了同样的问题，通过这样做，我解决了它。