0

グローバルに定義された配列 salesPropertyInfoWindowOut を割り当てることにより、 salesPropertyInfoWindowIn の状態を変更しようとしています。

の初期値

salesPropertyInfoWindowIn : 
[false,false,false,false,false,false,false,false,false,false]

onMarkerClick メソッドは、パラメーターとして渡された index の値を変更し、その値を salesPropertyInfoWindowIn に割り当てます。ただし、これはマップを再レンダリングしません。いくつかの解決策を提案して助けてください。

const MapWithAMarkerClusterer = compose(
withProps({
  googleMapURL:
    "https://maps.googleapis.com/maps/api/js?key=AIzaSyDlMypBHZKOOgwp7PBHrQSvf75Y1sM2gnU&v=3.exp&libraries=geometry,drawing,places",
  loadingElement: <div style={{ height: `100%` }} />,
  containerElement: <div style={{ height: `390px` }} />,
  mapElement: <div style={{ height: `100%` }} />
}),

withStateHandlers(
  () => ({
    salesPropertyInfoWindowIn: salesPropertyInfoWindowOut,
    isOpen: false,

  }),
  {
    onToggleOpen: ({isOpen}) => () => ({
      isOpen: !isOpen
    }),
    onMarkerClick: ({salesPropertyInfoWindowIn}) => (marker, i) => (
      salesPropertyInfoWindowOut[i] = !salesPropertyInfoWindowOut[i], 
      {salesPropertyInfoWindowIn: salesPropertyInfoWindowOut}
      )
  }),
withScriptjs,
withGoogleMap)(props => (
<GoogleMap
  defaultZoom={15}
  defaultCenter={
    home.currentProperty != null
      ? {
          lat: parseFloat(home.currentProperty.property.location.lat),
          lng: parseFloat(home.currentProperty.property.location.lon)
        }
      : ""
  }
>
  <MarkerClusterer averageCenter enableRetinaIcons gridSize={10}>
    {home.propSalesData != undefined || home.propSalesData != null
      ? props.markers.map((marker, i) => (
          <Marker
            icon={salesPropertyMarkerImage}
            onClick={() => props.onMarkerClick(marker, i)}
            key={i}
            position={{
              lat: parseFloat(marker.location.lat),
              lng: parseFloat(marker.location.lon)
            }}
          >
           {(props.salesPropertyInfoWindowIn[i] == true) ? 
             (console.log('Inside', props.salesPropertyInfoWindowIn[i]),
             <InfoWindow>
               <text>
                 {home.propSalesData[i].agent.name != undefined ||
                 home.propSalesData[i].agent.name != null
                   ? "Agent: " + home.propSalesData[i].agent.name
                   : "Purchaser: " +
                     home.propSalesData[i].saleParticipants
                       .purchasersSummary}
               </text>
             </InfoWindow>
           ) : ""} 
           </Marker>
        ))
      : ""}
4

1 に答える 1

0

2 つの配列 salesPropertyInfoWindowIn / salesPropertyInfoWindowOut を使用する代わりに、クリックされたマーカーのインデックスを格納してみることができます。

onMarkerClick(index) {
  this.setState({clickedMarkerIndex: index})
}

次に、クリックされたマーカーのみに InfoWindows をレンダリングするには:

{props.markers.map((marker, index) => {
  <Marker onClick={() => props.onMarkerClick(index)}>
    {props.clickedMarkerIndex === index &&
      <InfoWindow> etc etc
    }
  </Marker>
})
于 2018-02-17T12:46:22.293 に答える