search

JaeSeoKim / react-kakao-maps-sdk

React components for using kakao map api
https://react-kakao-maps-sdk.jaeseokim.dev
MIT License
277 stars 30 forks source link

MapInfoWindow에 style 적용 어떻게 하는 걸까요? #11

Closed hoyuenkim closed 2 years ago

hoyuenkim commented 2 years ago

<MapMarker position={{ lat: result.location.coordinates[1], lng: result.location.coordinates[0], }} infoWindowOptions={{ style: { textAlign: 'center' }, removable: true, }} onClick={() => router.push(/menu/${result.id})}

<> <div style={{ display: 'inline', textAlign: 'center' }}> {result.name}

</>

나름 이런저런 시도를해봤는데... infoWindowOptions에서 style 옵션이 안먹힙니다.

윈도우 폭을 inline-block 하고 싶어요...

JaeSeoKim commented 2 years ago

헛 이메일이 많이 밀려서 이슈가 생성되어 있는 것을 확인하지 못하고 있었네요.

일단 결론만 이야기 하자면, InfoWindow 를 사용하는 것 보다는 Customoverlay 를 이용하여 직접 인포윈도우를 구현하는 것을 추천드립니다. KakaoMap에서 제공하는 Native Dom을 제어 하는 것과 해당 오픈 및 close 상태를 제어하는 것이 React에서는 적합하지 않기 때문에 커스텀 오버레이를 통해 구현하는 것을 추천드립니다. 해당 스타일 제어하는 부분은 한번 확인해보겠습니다.

JaeSeoKim commented 2 years ago

v1.1.0 버전 부터는 InfoWindow 내부로직에서 사용하던 div 객체를 props 전달을 통해 스타일링 사용하는 것이 아닌, children 부분으로 넣은 것이 바로 infoWindow의 root로 들어 가도록 수정 작업 중입니다.