代码之家 › 专栏 › 技术社区 › batt

显示InfoView React Google地图

infowindow marker maps google-maps reactjs

-1

batt · 技术社区 · 8 年前

我的代码有问题。我想在单击标记时显示信息窗口,但实际上所有标记都会自动打开(如果 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>
        )
    });

非常感谢。

1 回复 | 直到 8 年前

1

0

Tetsuya3850 8 年前

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