显示InfoView React Google Maps

Posted 2021-04-09

我的代码有问题。我想在单击标记时显示InfoWindow，但实际上所有标记都会自动打开（如果showInfo属性设置为false），而不是当我点击它们时。

有返回方法，因为我需要将所有这些代码放在我的组件的render方法中。

const markers = this.props.markers.map((venue, i) => {

        const marker = {

            showInfo: false,

            position: {
                lat: venue.location.lat,
                lng: venue.location.lng
            },

            name: venue.name,

            handleMarkerTap(marker) {

                if (marker.showInfo === false) {
                    marker.showInfo = true
                } else if (marker.showInfo === true) {
                    marker.showInfo = false
                }

                console.log(marker.showInfo);
            }
        };


        return(

            <Marker key={i} onClick={marker.handleMarkerTap(marker)} {...marker} >

                {marker.showInfo && (

                    <InfoWindow
                        onCloseClick={marker.handleMarkerTap(marker)} >

                            <div>
                                <b>{marker.name}</b>
                            </div>


                    </InfoWindow>
                )}

            </Marker>
        )
    });

谢谢。

答案

您是否过滤了哪个标记infowindow与id切换？你需要做这样的事情。

  onToggleInfo = id => {
    const new_locations = this.state.locations.map(
      location =>
        id === location.id
          ? { ...location, info_open: !location.info_open }
          : { ...location, info_open: false }
    );
    this.setState({ locations: new_locations });
  };