zeakd / react-naver-maps

React Navermaps API integration for modern development.
https://zeakd.github.io/react-naver-maps/
119 stars 23 forks source link

Circle 관련 error입니다. #75

Closed tjfruddnjs1 closed 2 years ago

tjfruddnjs1 commented 2 years ago

image

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>
tjfruddnjs1 commented 2 years ago

제목에서 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