Question

我试图通过分配一个来改变salesPropertyInfoWindowIn的状态数组salesPropertyInfoWindowOut是全局定义的。

的初始值

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

onMarkerClick方法更改作为参数传递的索引值，然后在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>
        ))
      : ""}

Answer 1

您可以尝试存储所点击标记的索引，而不是使用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>
})

无法在状态更改时呈现Google地图

1 个答案: