Closed tjfruddnjs1 closed 2 years ago
NaverMap에 Circle도 잘 표시되고 기능 수행도 잘되는데 사진 오른쪽과 같이 error가 발생합니다.
아래는 제가 사용한 key를 제외한 코드 부분입니다.
<RenderAfterNavermapsLoaded ncpClientId={"key"}> <ContextMenuTrigger id="map"> <NaverMap mapDivId={"map"} // default: react-naver-map style={{ width: "100%", height: "800px", }} defaultCenter={{ lat: 35.81904, lng: 127.1162 }} defaultZoom={13} onRightclick={(e) => rightClick(e)} > <div> {latlng !== undefined ? ( <Marker position={{ lat: latlng.y, lng: latlng.x, }} title={`경도 : ${latlng.x}\n위도 : ${latlng.y}`} animation={1} /> ) : null} </div> {chatList.map((ele, idx) => { return ( <div key={`${idx}marker`}> <div> <Marker position={{ lat: ele.latitude, lng: ele.longitude, }} onClick={() => { handleRouter(ele.id); }} title={`채팅방이름 : ${ele.name}\n경도 : ${ele.longitude}\n위도 : ${ele.latitude}\n반경 : ${ele.radius}`} /> </div> <div> <Circle center={{ x: ele.longitude, y: ele.latitude, }} radius={ele.radius} /> </div> </div> ); })} </NaverMap> </ContextMenuTrigger> <ContextMenu id="map"> <MenuItem> <Link to={{ pathname: `${process.env.PUBLIC_URL}/chat/public/create`, state: latlng, }} style={{ color: "black" }} > <RiSendPlaneFill /> <span style={{ marginLeft: "10%" }}>채팅방 생성</span> </Link> </MenuItem> </ContextMenu> </RenderAfterNavermapsLoaded>
제목에서 Circle관련 에러라고 말한 이유는 부분을 제거했을때는 에러가 표시되지 않았습니다. 검색해본 결과 예상되는 이유는 지도를 zoom out할 경우 circle이 전부 표시되지 않아서 인 것같습니다. 관련 에러 : https://stackoverflow.com/questions/23767160/how-to-position-a-svg-imagewhich-its-path-has-negative-values-onto-google-map?rq=1
NaverMap에 Circle도 잘 표시되고 기능 수행도 잘되는데 사진 오른쪽과 같이 error가 발생합니다.
아래는 제가 사용한 key를 제외한 코드 부분입니다.