Question

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

我可以看到问题是什么，我原本没有告诉它要加载什么窗口。我已经尝试将其传递给索引，但这对我不起作用。

这就是我目前的情况：

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

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

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

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

1 个答案: