지도에 여러 마커를 표시 할 때 마커를 클릭 할 때 하나의 정보창을 여는 방법은 무엇입니까?

Question

마커가있는지도를 표시하는 데 react-google-maps을 사용하고 마커를 클릭하면 모든 정보 창이 열립니다. 하나의 마커의 정보 창을 클릭 할 때만 표시하고 다른 창은 닫힌 상태로 유지하려고합니다.

여기 내 코드입니다 :

<GoogleMap 
     defaultZoom={15} 
     defaultCenter={{ lat: 51.508530, lng: -0.076132 }} 
    > 
     {props.places && props.places.map((place, i) => 
      <Marker onClick={props.onToggleOpen} key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }} > 
       {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}> 
        <div>{place.name}</div> 
       </InfoWindow>} 
      </Marker> 
     )} 
    </GoogleMap> 

그리고 열고 나는 모든 마커를 통해 매핑있어이

import { compose, withProps, withStateHandlers, withHandlers, withState } from "recompose"; 

... 

withStateHandlers(() => ({ 
    isOpen: false, 
}), { 
    onToggleOpen: ({ isOpen, id }) =>() => ({ 
    isOpen: !isOpen, 
    }) 
}), 

으로 정보창을 종료하고지도에 표시하고 있습니다. InfoWindow 마커를 하나만 열려면 어떻게해야합니까? Here is a related question이지만 React로 만들지 않았으며 react-google-maps를 사용하지 않습니다.

Answer 1

더 많은 것이 React입니다. 클릭 한 Marker의 색인을 onToggleOpen에 전달할 수 있으며 isOpen 대신 selectedPlace 상태를 사용하면 클릭 한 색인 Marker을 보유하고이 색인을 사용하여 오른쪽 InfoWindow을 렌더링 할 수 있습니다. 여기

은 예입니다 (완전히 테스트되지 않은,하지만 당신은 아이디어를 얻을 수 있습니다) : 나는 정보창이 열려 여부의 참/거짓 상태를 전환하려면 어떻게

/*global google*/ 
import React from "react" 
import { compose, withProps, withHandlers, withState, withStateHandlers } from "recompose" 
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps" 

const MyMapComponent = compose(
    withProps({ 
     googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places", 
     loadingElement: <div style={{ height: `100%` }} />, 
     containerElement: <div style={{ height: `400px` }} />, 
     mapElement: <div style={{ height: `100%` }} />, 
    }), 
    withScriptjs, 
    withGoogleMap, 
    withState('places', 'updatePlaces', ''), 
    withState('selectedPlace', 'updateSelectedPlace', null), 
    withHandlers(() => { 
     const refs = { 
      map: undefined, 
     } 

     return { 
      onMapMounted:() => ref => { 
       refs.map = ref 
      }, 
      fetchPlaces: ({ updatePlaces }) => { 
       let places; 
       const bounds = refs.map.getBounds(); 
       const service = new google.maps.places.PlacesService(refs.map.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED); 
       const request = { 
        bounds: bounds, 
        type: ['hotel'] 
       }; 
       service.nearbySearch(request, (results, status) => { 
        if (status == google.maps.places.PlacesServiceStatus.OK) { 
         console.log(results); 
         updatePlaces(results); 
        } 
       }) 
      }, 
      onToggleOpen: ({ updateSelectedPlace }) => key => { 
       updateSelectedPlace(key); 
      } 
     } 
    }), 
)((props) => { 
    console.log(props); 
    return (
     <GoogleMap 
      onTilesLoaded={props.fetchPlaces} 
      ref={props.onMapMounted} 
      onBoundsChanged={props.fetchPlaces} 
      defaultZoom={15} 
      defaultCenter={{ lat: 51.508530, lng: -0.076132 }} 
     > 
      {props.places && props.places.map((place, i) => 
       <Marker onClick={() => props.onToggleOpen(i)} key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }}> 
        {props.selectedPlace === i && <InfoWindow onCloseClick={props.onToggleOpen}> 
         <div> 
          {props.places[props.selectedPlace].name} 
         </div> 
        </InfoWindow>} 
       </Marker> 
      )} 
     </GoogleMap> 
    ) 
}) 

export default class MyFancyComponent extends React.PureComponent { 
    render() { 
     return (
      <MyMapComponent /> 
     ) 
    } 
}