Question

我之前已经意识到这一点，但是，我无法弄清楚我在这里做错了什么。我有一个显示多个标记的地图，当我点击一个标记时，它应显示有关该标记的InfoWindow。当我点击标记时，会弹出所有InfoWindow框而不是我点击的那个框。

const MapWithAMarkerClusterer = compose(
  withProps({
    googleMapURL: "MY KEY",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withHandlers({
    onMarkerClustererClick: () => (markerClusterer) => {
      const clickedMarkers = markerClusterer.getMarkers()
    }
  }),
  withStateHandlers(() => ({
    isOpen: false,
    markerId: ''
  }), {
    onToggleOpen: ({ isOpen }) => (markerId) => ({
      isOpen: !isOpen,
      markerId: markerId
    })
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={4}
    defaultCenter={{ lat: -23.696248, lng: 133.880731 }}
  >
    <MarkerClusterer
      onClick={props.onMarkerClustererClick}
      averageCenter
      enableRetinaIcons
      gridSize={60}
    >
      {props.companies.map(company => (
        <span key={company.company_name}>
          <Marker
            position={company.google_maps.geometry_location}
            onClick={() => props.onToggleOpen(company.company_name)}
          >
            {props.isOpen[props.markerId] && <InfoWindow onCloseClick={props.onToggleOpen}>
              <p>Test</p>
              </InfoWindow>}
          </Marker>
        </span>
      ))}
    </MarkerClusterer>
  </GoogleMap>
);

Answer 1

好的，这是一个愚蠢的错误。我已经在下面更新了我的代码并且它有效。

{props.isOpen && (props.markerId == company.company_name) && <InfoWindow onCloseClick={props.onToggleOpen}>
  <p>Test</p>
</InfoWindow>}

仅显示一个InfoWindow

1 个答案: