显示 InfoView React Google 地图

Question

我的代码有问题。我想在单击标记时显示信息窗口，但实际上所有标记都会自动打开（如果 showInfo 属性设置为 false 也是如此），而不是在我单击每个标记时显示。

有 return 方法，因为我需要将所有这些代码放在组件的渲染方法中。

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

谢谢。

Answer 1

您是否正在筛选要使用 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 });
  };

显示 InfoView React Google 地图

Display InfoView React Google Maps

maps

google-maps

infowindow

marker

reactjs