0

我想创建一个按钮来打开和关闭此地图的热图部分。我在反应 javacript 时遇到了麻烦。不确定将逻辑放在哪里以及按钮放在哪里？任何帮助，这是 google 提供的代码示例 [Google HeatMap Toggle 按钮][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);

我想为标记创建一个单独的切换

4

1 回答 1

1

添加一个名为的状态变量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}
    />

在渲染（）中：

{this.state.isHeatmapVisible ? map : null}
于 2019-03-13T16:41:48.887 回答