react-google-maps 中的多个信息 windows 无法传递标记 ID

Question

我在地图上有多个标记，但每次我单击一个标记以获取信息时 window 所有标记信息 windows 打开！

我看出来是什么问题了，我本来是没告诉它要加载什么window。我试过将索引传递给它，但这对我不起作用。

这是我目前拥有的：

import React from "react";
const { compose, withProps, withStateHandlers } = require("recompose");
const {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    Marker,
    InfoWindow,
} = require("react-google-maps");

const MapsJson = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withStateHandlers(() => ({
    isOpen: false,
  }), {
    onToggleOpen: ({ isOpen }) => () => ({
      isOpen: !isOpen,
    })
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={6}
    defaultCenter={{ lat: parseFloat(props.setLat, 10), lng: 
parseFloat(props.setLng, 10) }}
  >

      {props.markers.map((marker, index)=> {
        let lat = parseFloat(marker.location.latitude, 10);
        let lng = parseFloat(marker.location.longitude, 10)
        //console.log(index);
        return (
          <Marker
            id = {index}
            key={index}
            position={{ lat: lat, lng: lng }}
            title="Click to zoom"
            onClick={() => { props.onToggleOpen({index}); }}
            >
          {props.isOpen[{index}] && 

                  <InfoWindow onCloseClick={props.onToggleOpen({index})}>
                    <div>
                       {marker.category}
                    </div>
                  </InfoWindow>
              }
          </Marker>
          )
        }
      )}
  </GoogleMap>
);

export default MapsJson;

Answer 1

State isOpen 似乎不是一个数组。它在 true/false 值之间切换。你能检查一下 props.isOpen[{index}] 正在评估什么吗？如果所有标记都打开，那么它可能永远是真实的。

执行此操作的另一种方法可能是将单击标记的索引存储在状态中。例如。点击标记索引 = x。那么，

{props.markers.map((marker, index) => {
  return (
    <Marker onClick={() => this.handleMarkerClick(index)}>
      {clickedMarkerIndex === index &&
        <InfoWindow />
      }
    </Marker>
  )
})

react-google-maps 中的多个信息 windows 无法传递标记 ID

Multiple info windows in react-google-maps can't pass marker id

google-maps

reactjs

react-google-maps