0

我知道以前曾在 SO 上提出过类似的问题，但我已经尝试在答案中实施解决方案，但似乎没有任何效果。

所以，这就是我遇到的问题：我正在使用 react-google-maps 生成地图。地图有多个标记。每次单击特定标记时，我都希望弹出一个信息窗口。问题是，现在，每次我单击标记时，都会弹出所有标记的信息窗口，如下所示：

在此处输入图像描述

您是否愿意浏览一下我的代码并告诉我问题所在：

  render() {


const MapWithAMarker = compose(
  withStateHandlers(() => ({
    isOpen: false,
  }), {
    onToggleOpen: ({ isOpen }) => () => ({
      isOpen: !isOpen,
    })
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
  defaultZoom={7}
  defaultCenter={{ lat: 37.468319, lng: -122.143936 }}
  containerElement={<div style={{ height: `300px`, width: `400px`, position: `absolute` }} />}
  mapElement={<div style={{ height: `300px` }} /> }
  containerElement={
   <div style={{height: 300, width: 600}}></div>
 }
  loadingElement={<div style={{ height: `100%` }} />}
  googleMapURL={"https://maps.googleapis.com/maps/api/js?key=AIzaSyCk55BnGfoigxDUwDaiYiyn9tFThcJVsPA"}
  >

   {store.results.data.map( (result, index) => {
                                if(result.status.color=='success'){
                                return <Marker
                                key={ index }
                                position={{ lat: result.contract_location.lat, lng: result.contract_location.lng }}    
                                icon={ '/img/darkgreen_MarkerA.png' } 
                                onClick={() => props.onToggleOpen(index)}                 
                                >
                                   {props.isOpen && <InfoWindow onCloseClick={() => props.onToggleOpen(index)}>
                                   <div>hi</div>
                                   </InfoWindow>}
                                </Marker>
                                }

                                if(result.status.color=='warning'){
                                  return <Marker
                                  key={ index }
                                  position={{ lat: result.contract_location.lat, lng: result.contract_location.lng }}    
                                  icon={ '/img/yellow_MarkerA.png' } 
                                  onClick={() => props.onToggleOpen(index)}                 
                                  >
                                    {props.isOpen && <InfoWindow onCloseClick={() => props.onToggleOpen(index)}>
                                    <div>hi</div>
                                    </InfoWindow>}
                                  </Marker>
                                  }

                                if(result.status.color=='danger'){
                                  return <Marker
                                    key={ index }
                                    position={{ lat: result.contract_location.lat, lng: result.contract_location.lng }}    
                                    icon={ '/img/red_MarkerA.png' }
                                    onClick={() => props.onToggleOpen(index)}                  
                                    >
                                       {props.isOpen && <InfoWindow onCloseClick={() => props.onToggleOpen(index)}>
                                       <div>hi</div>
                                       </InfoWindow>}
                                    </Marker>
                                    }


                                 }
                                )}


  </GoogleMap>
);
4

1 回答 1

0

您已将 InfoWindows 映射出来并使用props.isOpen.

InfoWindow 的 onClick 事件接受索引参数。但是...在您的onClick函数中，任何单击事件都会将 isOpen 切换为 true （无论索引如何）

由于所有 InfoWindows 仅依赖于布尔值 isOpen，因此单击一个将设置isOpen为true，并且它们都打开 :)

解决此问题的一种方法是存储单击标记的索引。例如：clickedMarkerIndex = x。然后，{props.clickedMarkerIndex === index }仅当其索引与单击标记的索引匹配时才检查并呈现 InfoWindow。

于 2018-03-12T02:07:01.960 回答