如何為Google地圖創建打開和關閉切換按鈕以響應熱圖

Question

我想創建一個用於打開和關閉此地圖的熱圖部分的按鈕。 我在響應javacript時遇到了麻煩。 不確定將邏輯放置在何處以及將按鈕放置在何處？ 任何幫助，這都是google提供的代碼示例[Google HeatMap切換按鈕] [1]。 我想將其與此代碼集成

export class MapContainer extends Component{

    state = {
        showingInfoWindow: false,  //Hides or the shows the infoWindow
        activeMarker: {},          //Shows the active marker upon click
        selectedPlace: {},
        isHeatVisible : true ,  
        isMarkerVisible: true       //Shows the infoWindow to the selected place upon a marker
    };
    handleToggle1 = () => {
        this.setState({isMarkerVisible: !this.state.isMarkerVisible})
      }
    handleToggle = () => {
        this.setState({isHeatVisible: !this.state.isHeatVisible});
      }
    onMarkerClick = (props, marker, e) =>
        this.setState({
            selectedPlace: props,
            activeMarker: marker,
            showingInfoWindow: true
        });

    onClose = props => {
        if (this.state.showingInfoWindow) {
            this.setState({
                showingInfoWindow: false,
                activeMarker: null
            });
        }
    };
          render() { 

            const gradient = [
                "rgba(0, 255, 255, 0)",
                "rgba(0, 255, 255, 1)",
                "rgba(0, 191, 255, 1)",
                "rgba(0, 127, 255, 1)",
                "rgba(0, 63, 255, 1)",
                "rgba(0, 0, 255, 1)",
                "rgba(0, 0, 223, 1)",
                "rgba(0, 0, 191, 1)",
                "rgba(0, 0, 159, 1)",
                "rgba(0, 0, 127, 1)",
                "rgba(63, 0, 91, 1)",
                "rgba(127, 0, 63, 1)",
                "rgba(191, 0, 31, 1)",
                "rgba(255, 0, 0, 1)"
              ];

         let heat =     <HeatMap
              gradient={gradient}
              opacity={3}
              positions={this.props.policeCall.map(({M,N}) => {
                  return { lat: M, lng: N};
              })}
              radius={30}
              />
        let marker = {this.props.policeCall.map(({ A, B, M, N, L,O }) => {
            return (
              <Marker
                onClick={this.onMarkerClick}
                name={A}
                info={B}
                priority={L}
                position={{ lat: M, lng: N }}
                story={O}
              />
            );
          })}


        return (
            <div>
        <div className="floating-panel">
          <button onClick = {this.handleToggle}>Toggle</button>
        </div>
        <div className="map-container">

            <Map
                google={this.props.google}
                zoom={14}
                style={mapStyles}
                scrollwheel={true}
                initialCenter={{
                    lat: 32.71573699,
                    lng: -117.16108799



                }}
            >


        {this.state.isMarkerVisible? marker:null}
        {this.state.isHeatVisible ? heat: null}



                <InfoWindow
                    marker={this.state.activeMarker}
                    visible={this.state.showingInfoWindow}
                    onClose={this.onClose}
                >

                <React.Fragment> 
            <h4 style={h4style}>ID: {this.state.selectedPlace.name}</h4>
            <h4 style={h4style}>Date: {this.state.selectedPlace.info}</h4>

            {/* <h4 style={h4style}>
              Priority: {this.state.selectedPlace.priority}
            </h4> */}
            <h4 style={h4style}>
              Crime Level: {this.state.selectedPlace.story}
            </h4>
          </React.Fragment>


                </InfoWindow>
</Map>
</div>
</div>

        );
    }
}


const Mcontainer = GoogleApiWrapper({
    apiKey: '',
    libraries: ["visualization"]
})(MapContainer);

const mapStateToProps = (state) => ({
    policeCall: state.policeCall.policeCall
});

export default connect(mapStateToProps)(Mcontainer);

我想為標記創建一個單獨的切換

Answer 1

添加一個名為isHeatmapVisible: false的狀態變量isHeatmapVisible: false

然后在<Map>標記內

<div id="floating-panel">
  <Button onclick="toggleHeatmap()">Toggle Heatmap</Button>
</div>

toggleHeatMap()將為：

function toggleHeatmap() {
    this.setState({isHeatmapVisible: !this.state.isHeatmapVisible})
}

最后，與其直接顯示熱圖，不如將其分配給變量：

let map = <HeatMap
    gradient={gradient}
    opacity={3}
    positions={this.props.policeCall.map(({M,N}) => {
        return { lat: M, lng: N};
    })}
    radius={30}
    />

在render（）中：

{this.state.isHeatmapVisible ? map : null}