Marker, Polygon 생성예시

zeakd commented 5 years ago

@lotty02cho

현재 제가 하고 있는 것, 하고싶은 것에 대해 몇 가지 질문을 드리고자 합니다.

궁극적으로는 react앱안의 네이버 지도에 행정구역의 폴리곤이나 마커를 찍고 싶은데요. doc에는 구성만 되어있고, 이에 대한 예제가 없어서 질문 드립니다ㅠㅠ

현재까진 네이버api에서 express.js를 활용해서 도로명을 입력했을 때, 이와 근접한 데이터를 받아오는 데 까지 성공을 했습니다.

일례로 input값에 '종로 101' 이라고 치면,
{
  "total": 2,
  "userquery": "종로 101",
  "items": [
      {
          "address": "서울특별시 종로구 종로 99 탑골공원",
          "addrdetail": {
              "country": "대한민국",
              "sido": "서울특별시",
              "sigugun": "종로구",
              "dongmyun": "종로",
              "ri": "",
              "rest": "99 탑골공원"
          },
          "isRoadAddress": true,
          "point": {
              "x": 126.9882868,
              "y": 37.5713464
          }
      },
      {
          "address": "대구광역시 중구 종로 101",
          "addrdetail": {
              "country": "대한민국",
              "sido": "대구광역시",
              "sigugun": "중구",
              "dongmyun": "종로",
              "ri": "",
              "rest": "101"
          },
          "isRoadAddress": true,
          "point": {
              "x": 128.5906435,
              "y": 35.8750586
          }
      }
  ]
}
다음과 같은 json 데이터를 받아오는 것 까지는 성공했습니다.

이 데이터를 기반으로 마커를 찍는데든지, 더 나아가, 행정구역의 폴리곤을 구성하는 것도 알려주시면 감사하겠습니다. 아래는 네이버 api example 부분을 캡처해보았습니다.

Originally posted by @lotty02cho in https://github.com/zeakd/react-naver-maps/issues/5#issuecomment-438092063

zeakd commented 5 years ago

일단 Naver maps 모듈은 행정구역 폴리곤 좌표를 제공하지 않으므로 폴리곤으로 행정구역을 그리기 위해서는 좌표를 넘겨주는 데이터는 직접구성하셔야합니다.

0.0.9 버전의 경우는 <Marker />와 <Polygon />컴포넌트가 있는데 props는 naver maps에서 제공하는 option들과 동일합니다.

그리고 이 컴포넌트들을 children으로 넘겨주면 됩니다. 예를들면 37.3595704, 127.105399 에 마커를 찍고싶다고 하면

...
<NaverMap
  style={{ width: "400px", height: "500px" }}

  zoom={zoom}
  onZoomChanged={this.handleZoomChanged}

  center={center}
  onCenterChanged={this.handleCenterChanged}
>
  <Marker
    position={new navermaps.LatLng(37.3595704, 127.105399)}
  />
</NaverMap >

이처럼 됩니다. 사용할 수 있는 다른 옵션들은 Naver Maps 문서를 참고해주세요

Marker Options Polygon options

넣을 수 있는 값, 형식 모두 naver maps docs에 있는 것과 동일합니다.

참고로 이벤트의 경우는 onCamelCasedEvent 의 형태로 관리합니다. 문서에 적혀있는 이벤트는 모두 사용가능합니다.

그런데 0.0.10 버전을 준비중이고 Api가 변경되며 문서도 곧 업데이트 될 예정이기 때문에, 혹시 production용으로 개발 중이시라면 조금 기다려주세요.

lotty02cho commented 5 years ago

친절한 답변 감사드립니다. 말씀하신대로 적용하여, marker 생성까진 완료되었습니다. close해주셔도 될 것같습니다.

혹시 0.0.10 버전은 언제 올라올 지 알 수 있을까요?!

zeakd commented 5 years ago

@lotty02cho 제가 지금 쪼금 바쁜상태라 확답은 못드리겠네요. 혹시 주로 쓰시는 컴포넌트 등을 먼저 얘기해주시면 먼저 반영하겠습니다.

zeakd / react-naver-maps

Marker, Polygon 생성예시 #6