React-Google-Map 여러 정보 창 열기

Question

현재 Google은 반응 Google지도를 사용하여 Google지도 API를 제작하고 있으며 전 세계 도시 정보를 표시하는 여러 마커를 정보 창에 표시하고 싶습니다. 하지만 그들은 모두 html 객체에서 왔습니다. 하나의 마커를 클릭 할 때마다 모든 정보창이 열립니다. 이 문제를 해결할 방법이 있다면? 샘플 코드 : 그냥 내가 토글에게 플래그를 희망 {props.onToggleOpen}를 호출 Marker의 onClick 코드에서

<GoogleMap 
    defaultZoom={3} 
    defaultCenter={{ lat: 40.452906, lng: 190.818206 }} 
    > 
    <Marker id = "mark1" 
     options={{icon: Mark1}} 
     position={{ lat: 34.4076645, lng: 108.742099 }} 
     onClick={props.onToggleOpen} 
    > 
     {props.isOpen && <InfoWindow id = "info1" 
        onCloseClick={props.onToggleOpen} 
        > 
        <div> content1 </div> 
     </InfoWindow>} 
    </Marker> 
    <Marker 
     options={{icon: Mark2}} 
     position={{ lat: 35.6958783, lng: 139.6869534 }} 
     onClick={props.onToggleOpen} 
    > 
     {props.isOpen && <InfoWindow 
        onCloseClick={props.onToggleOpen} 
        > 
        <div> content2 </div> 
     </InfoWindow>} 
    </Marker> 
</GoogleMap> 

Answer 1

. 여기에 당신은 당신이 위의 줄에

onClick={() => { props.onToggleOpen("mark1"); }} 

아래 Mark1 당신이 각각의 Marker를 식별하는 데 사용할 수있는 고유 한 값이어야처럼 뭔가로 onClick를 수정해야하므로 클릭하는 마커있는 보내야합니다. 이것을 마커 ID 또는 해당 Marker의 고유 한 것으로 대체 할 수 있습니다.

둘째로, 을 수정하여 수신 된 인수 (onClick에서 보낸 고유 한 값)로 식별되는 각각의 에 대한 플래그를 토글해야합니다. 데이터 구조와 같은 배열을 사용하여이 값을 저장할 수 있습니다.

그런 다음 Marker에 해당하는 플래그를 기반으로 InfoWindow을 표시해야합니다. isOpen을 감안하면 (위의 변경을 통합 후) 플래그의 배열 될 것입니다, 하나는 올바른 방향으로 당신을 인도

<Marker id = "mark1" 
    options={{icon: Mark1}} 
    position={{ lat: 34.4076645, lng: 108.742099 }} 
    onClick={() => { props.onToggleOpen("mark1"); }} 
> 
    {props.isOpen["mark1"] && <InfoWindow id = "info1" 
       onCloseClick={() => { props.onToggleOpen("mark1"); }} 
       > 
       <div> content1 </div> 
    </InfoWindow>} 
</Marker> 

아래 희망 같은 조건 뭔가를 사용하여 InfoWindow을 보여줄 것입니다.