react-google-maps umschalten Heatmap Sichtbarkeit

Question

Ich habe eine Google Map-Konfiguration mit react-google-maps und ich verwende die heatmap component, um eine Heatmap überlagert ontop der Karte anzuzeigen. Dies funktioniert gut beim ersten Laden, aber ich habe Schwierigkeiten, die Sichtbarkeit der Heatmap zu ändern.

In dem Beispiel gefunden https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap haben sie Zugriff auf eine heatmap Variable, um Dinge wie heatmap.setMap() und heatmap.getMap() zu tun.

Von dem, was ich sagen kann, bietet react-google-maps keine Methode für den Zugriff auf die Instanz der Karte oder Heatmap.

Also, wie geht man die Heatmap ein-/ausschalten?

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> 
)); 

Component Code: https://github.com/tomchentw/react-google-maps/blob/master/lib/components/visualization/HeatmapLayer.js

Answer 1

Anstatt wiederum Sichtbarkeit ein- und ausschalten, müssen Sie seine Präsenz machen abhängig von einer Eigenschaft oder Zustand, und wenn sie sich ändert, wird die Heatmap oder nicht entsprechend wiedergegeben werden.