谷歌地图中标记的打开和关闭切换按钮反应 [英] A toggle button on and off for markers in google maps react

问题描述

我想创建一个按钮，以删除所有Google地图反应的标记，我已经将其用于热图，但是它不允许我对标记做相同的策略吗?是因为正在完成映射吗?比起您，我已经设置了所有其他功能，并且仅说明了最后一个步骤

I want to create button that removes all markers for the google maps react, i already have it working for the heatmap but it does not let me do the same strategy for the markers ? is it because the mapping that is being done ? than you i already set up all the other functions and states just one last step

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker, HeatMap } from 'google-maps-react';
import { connect } from 'react-redux';


const mapStyles = {
    width: '45%',
    height: '54%'
};
const h4style = {
    color: "black"
  };


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}
              />





        return (
            <div>
        <div className="floating-panel">
          <button onClick = {this.handleToggle}>HeatMap</button>
          <button onClick = {this.handleToggle1}>Markers</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.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}
            />
          );
        })}

        {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);
```[my map application][1]


  [1]: https://i.stack.imgur.com/NfSJV.png

推荐答案

由于您已经具有handleToggle1函数，设置了 isMarkerVisible 标志，然后在render()上具有以下功能:

As you already have handleToggle1 function setting the isMarkerVisible flag then on render() you can have this:

render() { 
    const markers = this.state.isMarkerVisible ? this.props.policeCall : []
    ... <your code>
    return <div> 
    ... <your code>
       {markers.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}
            />
          );
        })}
    ... <your code>
    </div>
}

所有的省略号都是您的代码，但为了简洁起见，我仅添加了您需要进行更改以切换标记的地方.

All the ellipsis is your code but for brevity I only added where you will need to make changes to toggle markers.

这篇关于谷歌地图中标记的打开和关闭切换按钮反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！