0

我在地图上有多个标记，但每次单击标记以获取信息窗口时，所有标记信息窗口都会打开！

我可以看到问题所在，我最初并没有告诉它要加载哪个窗口。我已经尝试将索引传递给它，但这对我不起作用。

这是我目前拥有的：

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;
4

1 回答 1

2

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

这样做的另一种方法可能是将单击标记的索引存储在状态中。例如。clickedMarkerIndex = x。然后，

{props.markers.map((marker, index) => {
  return (
    <Marker onClick={() => this.handleMarkerClick(index)}>
      {clickedMarkerIndex === index &&
        <InfoWindow />
      }
    </Marker>
  )
})
于 2018-02-17T12:26:08.890 回答