React-Google-Map многократное окно информации открыто

Question

В настоящее время я создаю API-интерфейс Google Map с использованием response-google-maps и хотел бы создать несколько маркеров для отображения информации о городах по всему миру в информационном окне. Но так как они все из html-объекта. Всякий раз, когда я нажимаю на один маркер, все информационные окна будут открыты. Если есть способ это исправить? Образец кода:

<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 из Marker просто позвони {props.onToggleOpen}, который я надеюсь переключает флаг. Здесь вы должны отправить маркер, на который вы нажимаете, поэтому вам нужно изменить onClick что-то вроде ниже

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

В приведенной выше строке Mark1 должно быть уникальным значением, которое вы можете использовать для определения соответствующего Marker, Вы можете заменить это идентификатором маркера или чем-то, что будет уникальным для соответствующего Marker,

Во-вторых, вам нужно изменить onToggleOpen переключить флаг для соответствующего marker который определяется аргументом, который он получает (уникальное значение, которое вы отправляете из `onClick). Вы можете использовать массив, такой как структура данных, для хранения этого значения.

Тогда вам нужно показать свои InfoWindow на основе флага, соответствующего Marker, принимая во внимание isOpen будет массивом флагов (после включения вышеупомянутых изменений), можно было бы показать InfoWindow используя условие что-то вроде ниже

<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>

Надеюсь, что это приведет вас в правильном направлении.