点击单个标记时，React Google地图InfoWindow显示所有信息

Question

出现了一个问题，当我点击单个标记时，所有的信息窗口都会弹出。我期望只有一个信息窗口在我点击一个单独的标记时弹出。

有人能够解释一下为什么所有标记中的所有信息窗口都会弹出吗？当我关闭它时，信息窗口也会关闭。

期望的行为是，在我点击目标标记时，信息窗口打开。

class VenuesMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
    };
  }

  handleToggleOpen = () => {
    this.setState({
      isOpen: true,
    });
  };

  handleToggleClose = () => {
    this.setState({
      isOpen: false,
    });
  };

  render() {
    const venues = this.props.venues;

    let markers;
    let userMarkers = (
      <Marker
        position={{
          lat: Number(latCurrentLocation),
          lng: Number(lngCurrentLocation),
        }}
      />
    );
    if (venues !== null) {
      markers = venues.map((location, i) => {
        const lat = location.venue.location.lat;
        const lng = location.venue.location.lng;
        const index = i + 1;
        return (
          <Marker
            key={i}
            position={{ lat: lat, lng: lng }}
            label={index.toString()}
            onClick={() => this.handleToggleOpen()}
          >
            {this.state.isOpen && (
              <InfoWindow onCloseClick={() => this.handleToggleClose()}>
                <span>Something</span>
              </InfoWindow>
            )}
          </Marker>
        );
      });
    }

    const MapWithAMarker = withGoogleMap(props => (
      <GoogleMap
        defaultZoom={this.state.zoom}
        defaultCenter={{
          lat: Number(latCurrentLocation) || 40.7128,
          lng: Number(lngCurrentLocation) || -74.006,
        }}
      >
        {markers}
        {userMarkers}
      </GoogleMap>
    ));

    const googleMap = (
      <MapWithAMarker
        containerElement={
          <div style={{ height: this.props.containerElement }} />
        }
        mapElement={<div style={{ height: this.props.mapElement }} />}
      />
    );

    return <div>{googleMap}</div>;
  }
}

- Pak Chu

---

快速进行现场演示怎么样？ - Deepak Kamat

Answer 1

您需要为每个信息窗口单独设置isOpen状态，否则如果isOpen为true，则所有信息窗口都会打开。

选项1：您可以创建一个组件，在其中维护它自己的isOpen状态。这仍然允许多个信息窗口同时打开，通过逐一点击它们来实现。

选项2：如果您想保持结构相同（以便可以关闭一个信息窗口，如果另一个打开），您可以在状态中存储一个openInfoWindowMarkerId，类似于这样。

this.state = {
        openInfoWindowMarkerId: ''
    }

那么你可以这样做：

handleToggleOpen = (markerId) => {
    this.setState({
        openInfoWindowMarkerId: markerId
    });
}

你可以像这样调用它

<Marker
    key={i}
    position={{ lat: lat, lng: lng}}
    label={index.toString()}
    onClick={() => this.handleToggleOpen(i)} // marker ID is the key here. 
>

- Palash Karia

---

嗨，Palash，感谢你回复我。我正在尝试你的建议选项一。我仍然不明白它如何知道在点击标记时显示哪个元素。此外，Mark控制InfoWindow状态是true还是false。如果我要在InfoWindow组件中维护状态，那么这是否会与Marker中的单击处理程序发生冲突？ - Pak Chu

问题已经解决。感谢您给我提供的见解！ - Pak Chu

Answer 2

我按照上述说明解决了问题。

我将每个标记提取为一个单独的组件。

我将标记和信息窗口合并为一个组件。

import React, {Component} from 'react';
import { Marker, InfoWindow } from "react-google-maps";


class InfoWindowMap extends Component {

    constructor(props){
        super(props);

        this.state = {
            isOpen: false
        }

    }

    handleToggleOpen = () => {

        this.setState({
            isOpen: true
        });
    }

    handleToggleClose = () => {
        this.setState({
            isOpen: false
        });
    }


  render() {

    return (
            <Marker
                key={this.props.index}
                position={{ lat: this.props.lat, lng: this.props.lng}}
                label={this.props.index.toString()}
                onClick={() => this.handleToggleOpen()}
            >

            {
                this.state.isOpen &&
             <InfoWindow onCloseClick={this.props.handleCloseCall}>
                 <span>Something</span>
             </InfoWindow>
            }


            </Marker>

        )
  }
}

export default InfoWindowMap;

- Pak Chu

Answer 3

try this: 

{props.nhatro.map((nhatro, index) =>
        <Marker
          key={index}
          options={{icon: 'https://i.imgur.com/9G5JOp8.png'}}
          position={nhatro}
          onClick={()=>{ props.showInfo(index)} }
        >
          { (props.showInfoIndex == index ) && 
          <InfoWindow  onCloseClick={props.onToggleOpen}>
            <div>
              <div>nhà trọ cho thuê</div>
              <div >1.500.000đ</div>
            </div>
          </InfoWindow>}
        </Marker>
    )}

and then :

showInfo(a){
 setState({showInfoIndex: a })
}

- Nguyễn Phúc