전에 버젼에 MarkerContent 를 이용해서 html Marker 를 만들 수 있었는데
이번에 그 기능이 빠져버진 것 같아요 ~ 아니면 다르게 변경된 것인가요~?

Firefox에서 잘 사용하고 있었는데

어느 순간 네이버 지도 Open API 인증이 실패했다고 나오면서 지도가 안나옵니다.

엣지나, 크롬으로 하면 잘 나오구요.

API는 클라우드 플랫폼에서 발급받아서 문제없는 키이고 다른 브라우저에서 잘 나오는 것 보면 파폭에서 버그가 있는 것 같습니다.

<NaverMap
mapDivId={'maps-getting-started-uncontrolled'} // default: react-naver-map
style={{
width: '100%', // 네이버지도 가로 길이
height: '40vh' // 네이버지도 세로 길이
}}
defaultCenter={{ lat: Number(props.ref_lat), lng: Number(props.ref_lng) }} // 지도 초기 위치
defaultZoom={props.defalt_zoom} // 지도 초기 확대 배율
>
<Marker
title="사용자의 현위치"
key={0}
position={new navermaps.LatLng(latitude, longitude)}
animation={2}
icon={icon}
/>

   <Overlay
      lat={35.705087}
      lng={128.457693}
      zIndex={200}
      onClick={e => {
        console.log('overclick')
        e.stopPropagation()
      }}>
      <MyMarker num={7} />
    </Overlay>

위의 소스를 실행시켰는데 Overlay 만 적용하면 아래와 같은 에러가 발생합니다.
원인을 못 찾겠어요.

TypeError: OverlayView is not a constructor
Overlay.createOverlay
D:/django_project/fe_robotaxi/node_modules/react-naver-maps/dist/react-naver-maps.esm.js:669
666 | OverlayView = _this$props.OverlayView,
667 | map = _this$props.map,
668 | registerEventInstance = _this$props.registerEventInstance;

669 | var overlay = new OverlayView({
| ^ 670 | map: map
671 | });
672 | registerEventInstance(overlay);
View compiled
Overlay.render
D:/django_project/fe_robotaxi/node_modules/react-naver-maps/dist/react-naver-maps.esm.js:690
687 | key: "render",
688 | value: function render() {
689 | if (!this.overlay) {
690 | this.overlay = this.createOverlay();
| ^ 691 | }
692 |
693 | this.updateOverlay(this.overlay);
View compiled
finishClassComponent
D:/django_project/fe_robotaxi/node_modules/react-dom/cjs/react-dom.development.js:17485
17482 | } else {
17483 | {
17484 | setIsRendering(true);
17485 | nextChildren = instance.render();
| ^ 17486 |
17487 | if ( workInProgress.mode & StrictMode) {
17488 | disableLogs();
View compiled

드래그시 이동한 위치의 좌표를 가져와 해당 지역의 주소를 불러오는 로직을 구현중입니다.

이 때 onCenterChanged 속성을 이용하면 이동하는 모든 동선에서 API 요청을 보내는 문제가 발생하는데,

네이버 지도 공식문서에서는 dragend 라는 속성을 지원하는 것 같더라고요 !

혹시 이 라이브러리에도 해당 기능을 지원하는지 궁금합니다 ! 제가 찾아보니 없는 것 같아서요 ㅠ

라이브러리에서
infoWindow 사용이 가능할까요?
https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-infowindow-simple.example.html

related #12

https://zeakd.github.io/react-naver-maps/#/Overlay%20Views/Circle

React Naver Maps Style Guide 문서를 보면 Circle뿐만 아니라 다른 컴포넌트 항목에서도 "SyntaxError: Identifier 'Circle' has already been declared" 라는 오류가 반복되는데 확인해주실 수 있나요?

안녕하세요, 덕분에 react에서 네이버지도를 사용하여 개발을 진행하고 있는데요.
먼저 감사드립니다!! :)

궁금한 점이 있어서요, 이번에 네이버지도 유료로 변경된다던데
기존에 개발된 것도 있고 4월 중순 이후로는 기존 사이트에서 맵자체가 깨질 것 같은데ㅠㅠ
혹시 관련되어 어떻게 진행하시고자 예정이신지 답변 부탁드려도 될까요?

mapTypeId propType이 number로 지정되어있으나,
현재 네이버클라우드플랫폼에서 제공하는 상수값은 string으로 되어있습니다.

<NaverMap
mapTypeId={navermaps.MapTypeId['HYBRID']
/>

• react-naver-maps.esm.js
  NaverMap.propTypes = {
  ...
  mapTypeId: PropTypes.string
  }
  로 변경하니 에러가 나지않습니다.

안녕하세요. 이렇게 좋은 라이브러리를 만들어 주셔서 정말 감사합니다.

현재 infowindow 기능이 지원되지않아 제가 따로 컴포넌트를 만들어준 뒤에 마우스 위치에 따라 컴포넌트를 보여주는 형식의 임시 infowindow를 만들었습니다. 하지만 onMouseover 이벤트 콜백 함수에서 받는 이벤트 객체안에서 마커의 위치를 못찾고있습니다.

 const infoWindow = (event, location) => {
    const { x, y } = event.domEvent;
    setRoomId(location.id);
    setShowInfoWindow({ x, y, display: 'block' });
  };

  const mouseOut = () => {
    setShowInfoWindow({ x: 0, y: 0, display: 'none' });
  };

  const marker = locations.map((location: IFindStayItems) => {
    const { latitude, longitude } = location.place;
    return (
      <>
        <Marker
          key={location.id}
          position={new navermaps.LatLng(latitude, longitude)}
          icon={renderMarker(location)}
          onMouseover={(event) => infoWindow(event, location)}
          title={location.place.name_kr}
        />
        {
          roomId === location.id &&
          <div style={{ position: 'absolute', left: showInfoWindow.x - 100, top: showInfoWindow.y - 170, display: showInfoWindow.display }} className="infoWindowContainer" onMouseLeave={mouseOut}>
            <InfoWindow room={location} />
          </div>
        }
      </>
    )
  });

마커 컴포넌트에서 onMouseover안에 있는 infoWindow라는 함수가 받는 event객체를 console.log 찍어보면

Object
coord: o.LatLng {y: 37.5796856, _lat: 37.5796856, x: 126.9865032, _lng: 126.9865032}
domEvent: MouseEvent {isTrusted: true, screenX: 2537, screenY: 751, stop: ƒ, pos: ƒ, …}
offset: o.Point {x: 1519.263995733345, y: -7121.669789823238}
overlay: o.Marker {OVERLAY_TYPE: "Marker", DEFAULT_OPTIONS: {…}, _wrapper: div, __targets: {…}, _nmarker_id: "nmarker-15B322CD-500C-49A5-A8C6-79E08AE910EE", …}
point: o.Point {x: 218.30151336840277, y: 99.12475492850558}
pointerEvent: MouseEvent {isTrusted: true, screenX: 2537, screenY: 751, stop: ƒ, pos: ƒ, …}

이렇게 보이는데요 mouseOver된 마커의 좌표를 객체에서 찾을수 있을까요?

Mark 아이콘에 숫자를 집어 넣을려고 하는데 Overlay 기능 사용법을 몰라서요?

ERROR in ./src/components/TextChart.js 20:0-64
Module not found: Error: Package path ./dist/hocs-018c38ad is not exported from package /Users///build/project-front/node_modules/react-naver-maps (see exports field in /Users///build/project-front/node_modules/react-naver-maps/package.json)

ERROR in ./node_modules/react-naver-maps/dist/chunk-AAMRD6HB.mjs 9:0-40
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users///build/project-front/node_modules/react-naver-maps/dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

"react-naver-maps": "^0.1.0" ~ 로 변경 후 발생한 에러로 해결 방법이 있을까요?

"dependencies": {
"@date-io/date-fns": "^2.10.8",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.61",
"@material-ui/pickers": "^3.3.10",
"@material-ui/styles": "^5.0.0-alpha.33",
"@material-ui/system": "^5.0.0-alpha.33",
"@mui/icons-material": "^5.0.5",
"@mui/material": "^5.2.4",
"@mui/utils": "^5.14.13",
"@nivo/bar": "^0.80.0",
"@nivo/colors": "^0.80.0",
"@nivo/core": "^0.80.0",
"@nivo/line": "^0.80.0",
"@nivo/pie": "^0.80.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.2",
"axios": "^0.21.1",
"axios-progress-bar": "^1.2.0",
"css-loader": "^6.7.1",
"geolocation-error-code-3": "^1.0.5",
"jquery": "^3.6.0",
"moment": "^2.29.1",
"node-sass": "^7.0.1",
"package.json": "^2.0.1",
"parse-url": "^6.0.5",
"postcss-loader": "^6.2.1",
"prop-types": "^15.7.2",
"qs": "^6.9.6",
"query-string": "^6.14.0",
"react": "^17.0.2",
"react-async": "^10.0.1",
"react-csv": "^2.0.3",
"react-datepicker": "^3.6.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-feather": "^2.0.9",
"react-full-screen": "^1.1.0",
"react-geolocated": "^3.1.0",
"react-grid-layout": "^1.3.0",
"react-helmet": "^6.1.0",
"react-kakao-login": "^2.0.3",
"react-loading": "^2.0.3",
"react-medium-image-zoom": "^3.1.3",
"react-modal": "^3.12.1",
"react-naver-maps": "^0.1.0",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.2",
"react-responsive": "^8.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",
"react-sizeme": "^3.0.2",
"react-table": "^7.6.3",
"react-toastify": "^7.0.4",
"react-validation": "^3.0.7",
"react-window": "^1.8.6",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-effects-geolocation": "^1.0.2",
"redux-form": "^8.3.7",
"redux-form-website-template": "^1.0.21",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "^5.0.0",
"sass-loader": "^12.6.0",
"useful-tools": "^0.2.6",
"web-vitals": "^0.2.4"
}

Fixed Center Example을 보고, 원하는 위치의 좌표를 찍으려 시도 중입니다.

handleCenterChanged를 통해 state를 변경하는 원리를 보고.

Component에 버튼 이벤트를 넣어 원하는 좌표(128.6521583, 34.9070498)로 이동하려 그러는데 잘 안되네요.

다른 방법이나, 구현해놓은 함수가 있을까요..?

컴포넌트 구성은 아래와 같습니다.

      <NaverMap
        style={{ width: "500px", height: "500px" }}
        naverEventNames={['zoom_changed', 'center_changed']}
        zoom={zoom}
        onZoomChanged={this.handleZoomChanged}
        
        center={center}
        onCenterChanged={this.handleCenterChanged}
        onClickButton={this.onClickButton}
      />

좌표 핸들러 이벤트를 모방한 버튼 이벤트입니다.

  handleCenterChanged(center) {
    // this.setState({ center })
    const navermaps = window.naver.maps;
    this.setState({ center: new navermaps.LatLng(37.3595704, 127.105399) }) ;
  }

  onClickButton(center) {
    const navermaps = window.naver.maps;
    this.setState(() => ({ center : new navermaps.LatLng(128.6521583, 34.9070498) }));
  }

버튼 이벤트를 받고, 실제 맵에 값이 적용이 되기는 하는 것 같은데..
맵에선 그저 회색 화면 밖에 안나오더군요.

꼭 좀 답변좀 부탁드리겠습니다...
@zeakd

안녕하세요 질문이 있습니다.

https://navermaps.github.io/maps.js/docs/naver.maps.Service.html

해당 객체를 불러올 방법이 있을까요?

Hi guys,

Is it possible to fetch address by term ?

input
연남장 3

expected result

[
 {
   "address": "연남장 로컬스티치점",
   "detail": "서울특별시 서대문구 연희로 5길 22"
 },
{
   "address": "연남장 연남방앗간",
   "detail": "서울특별시 서대문구 연희로 5길 22"
 }
]

thanks

개발자님, react 포팅 감사합니다. react 초보자인 저에게 큰 도움이 되고 있습니다. 그런데 질문이 있어서 이슈를 통해 남깁니다.

개발자님께서 올려주신 예제를 실행해보고 있는데 제대로 나타나지 않습니다. 예제소스

결과 화면
[아래 소스 코드 실행 결과 화면]

소스코드

import {  RenderAfterNavermapsLoaded,  NaverMap, Circle } from "react-naver-maps";

const cx = classNames.bind(styles);


class Map extends Component {

  render() {
    return (
      <div className={cx("map-panel")}>
        <Header>위치</Header>
        <div className={cx("body")}>
          <RenderAfterNavermapsLoaded ncpClientId="####">
          <NaverMap 
            naverRef={ref => { this.mapRef = ref }}
            id='maps-examples-map-simple'
            style={{
              width: '100%',
              height: '600px',
            }}
            defaultCenter={{x: 126.5343612, y: 33.3590625}}
          >
            <Circle 
              center={{x: 126.5343612, y: 33.3590625}}
              radius={100}
              fillOpacity={0.5}
              fillColor={'#FF0000'}
              strokeColor={'red'}
              console.log('');kable={true} // click event를 다루기 위해서는 true로 설정되어야함.
              onClick={() => {
                alert('여기는 한라산 입니다.')
              }}
            />
          </NaverMap>
          </RenderAfterNavermapsLoaded>
        </div>
        <Footer />
      </div>
    );
  }

}

export default Map;

위 소스코드는 제가 테스트 해본 코드 입니다. 혹시 어디가 문제인지 알 수 있을까요?

https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-drawing-simple.example.html

해당 예제를 따라가며 진행중인데 아직 해당부분이 이 라이브러리에 반영이 안된거같아서 혹시 언제 계획이 있으신지 알수 있을가요?

환경
version: [email protected]
"react-naver-maps": "^0.1.3"

expected:
route.push 로 정상적인 페이지 이동

actual
route.push 시 다음 에러 발생
react-dom.development.js:22834 Uncaught TypeError: Cannot read properties of null (reading 'isArray')
Link를 사용해도 같은 에러 발생

의견
naverMap 에서 history에 접근 하는 부분이 있는지 궁금합니다.
그러면 페이지 이동 전에 초기화 시키는 방법이 필요할 것 같습니다.

참조:

// NaverMap/index.tsx
import React from "react";
import { NaverMap, Marker, useNavermaps } from "react-naver-maps";

const NaverMapComponent = ({
  lat,
  long,
}: {
  lat: number;
  long: number;
}) => {
  const navermaps = useNavermaps();
  const location = new navermaps.LatLng(lat, long);

  return (
      <NaverMap
        defaultCenter={location}
        defaultZoom={15}
      >
        <Marker
          defaultPosition={location}
        />
      </NaverMap>
  );
};

export { NaverMapComponent };

// 컴포넌트 호출부분
<NavermapsProvider ncpClientId={Config.NCP_CLIENT_ID}>
  <NaverMapComponent lat={Number(latitude)} long={Number(longitude)} />
</NavermapsProvider>

개발자님, react-naver-maps 배포해주시면서 react를 쉽게 사용하고 있는데, Javascript하고도 같이 연동하고 싶어 몇가지 테스트를 해봤는데, 이에 대한 몇 가지 팁을 얻을 수 있을까요?

질문1

개발자님이 만들어주신 ref를 좀 손쉽게 사용을 하고 싶은데, 어떻게 연결을 해야 할까요?

참고 예제 사이트
위 예제 사이트를 보면 naverRef={ref => { this.mapRef = ref }} 를 받아서 this.naverMapRef.getBounds()으로 사용 하는 거 같은데, 제대로 동작을 하지 않고 아래 에러코드를 내뿜습니다. 어떻게 사용을 하면 되는건가요?

소스코드

import {  RenderAfterNavermapsLoaded,  NaverMap, Circle } from "react-naver-maps";

const cx = classNames.bind(styles);


class Map extends Component {

  render() {
    return (
      <div className={cx("map-panel")}>
        <Header>위치</Header>
        <div className={cx("body")}>
          <RenderAfterNavermapsLoaded ncpClientId="#####">
          <NaverMap 
            naverRef={ref => { this.mapRef = ref }}
            id='maps-examples-map-simple'
            style={{
              width: '100%',
              height: '600px',
            }}
            defaultCenter={{x: 126.5343612, y: 33.3590625}}
          >
          </NaverMap>
          </RenderAfterNavermapsLoaded>
        </div>
        <Footer />
      </div>
    );
  }

  componentDidMount() {
    // map이 생성될 때의 bounds를 알기 위해 method를 이용합니다.
    console.log(this.mapRef.getBounds());

  }


}

export default Map;

에러코드
Cannot read property 'getBounds' of undefined

질문2

질문1에 대한 추가적인 질문입니다. react에서 외부 라이브러리를 사용 할때 .js를 제공해주기 때문에 import 받아서 사용을 했는데, naver-map 불가능 한 것 같습니다. 그래서 <script></script>를 사용하려 했지만, 개발자님이 이러한 수고를 덜어 주기 위해 <RenderAfterNavermapsLoaded/>를 만든 것 같아서 사용해보려고 합니다. 아래와 같은 코드로 사용을 할 수 있는지 궁금합니다. this.mapRef를 통해 return에 있는 <NaverMap/>를 가져와 javascript와 같이 사용 할 수 있을까요?

소스코드

import {  RenderAfterNavermapsLoaded,  NaverMap, Circle } from "react-naver-maps";

const cx = classNames.bind(styles);

class Map extends Component {

  render() {
    return (
      <div className={cx("map-panel")}>
        <Header>위치</Header>
        <div className={cx("body")}>
          <RenderAfterNavermapsLoaded ncpClientId="####">
          <NaverMap 
            naverRef={ref => { this.mapRef = ref }}
            id='maps-examples-map-simple'
            style={{
              width: '100%',
              height: '600px',
            }}
            defaultCenter={{x: 126.5343612, y: 33.3590625}}
          >
          </NaverMap>
          </RenderAfterNavermapsLoaded>
        </div>
        <Footer />
      </div>
    );
  }

  componentDidMount() {
    var marker = new naver.maps.Marker({
        position: new naver.maps.LatLng(37.3595704, 127.105399),
        map: this.mapRef
    });
  }
}

export default Map;

Example을 onCenterChanged, onBoundsChanged에서 onIdle로 변경한다.

이번에 네이버에서 맵변경을 한다고 공지가 올라왔네요.
useStyleMap = true 요 부분이 필요한거 같은데 업데이트 계획이 있으신지 해서요.
소스 기여자가 3분이 더 늘으셨네요 ㅋㅋ

• 시/도 폴리곤 데이터를 센트리오 알고리즘을 이용해 중심좌표를 알아낸후 그 위치에 마커를 찍어습니다.
• 마커를 더블클릭하면 줌레벨을 올려주고 마커좌표가 화면의 center가되게 하려고 하는데 잘 안되네요
• 또한 궁금한점으로 마커더블클릭핸들시 setstate로 줌, 화면중심을 바꾼다면 naver의 zoom, center도 state값을 한번더 설정해줘야하나요?

`handleMouseClick = () => {
this.setState({ MapData: SIG.features, zoom: this.state.zoom + 2 });
};

// 지도 이동 멈추면 실행
handelDblclick = index => {
this.setState({
zoom: this.state.zoom + 1,
center: this.state.centerdata[index],
MapData: SIG.features
});
this.XYdata2();
};

changeBounds = bounds => {
this.setState({ bounds });
};

// render되고 실행
// 경계좌표 및 render 상태
componentDidMount() {
this.changeBounds(this.mapRef.getBounds());
this.setState({ mapstate: 1 });
this.XYdata2();
}

XYdata2 = () => {
const t = this.state.MapData.map(item => {
return item.geometry.coordinates.map((item2, index, array) => {
const a = this.centroid(item2);
const b = { lat: a[1], lng: a[0] };
return b;
});
});

this.setState({ centerdata: t.flat() });
return t;

};
//
centroid = item2 => {

centroid알고리즘 생략
};

// 최적화

render() {
const XYdata = this.state.centerdata.map((item, index, array) => {
return (
<Marker
position={item}
key={index}
animation={2}
onDblclick={this.handelDblclick.bind(this, index)}
title={"A"}
/>
);
});

return (
  <div>
    <NaverMap
      naverRef={ref => {
        this.mapRef = ref;
      }}
      id="maps-examples-polygon"
      style={{
        width: "80%",
        height: "500px"
      }}
      disableDoubleClickZoom={this.state.disableDoubleClickZoom}
      disableDoubleTapZoom={this.state.disableDoubleTapZoom}
      scrollWheel={this.state.scrollWheel}
      zoom={this.state.zoom}
      center={this.state.center}
    >
      {XYdata}
    </NaverMap>
  </div>
);

}
}`

• 렌더링 하는중에 setState(handleDblclick)을 해서 충돌이 일어나는거 같은데 해결방법을 모르겠습니다.

• 깃헙을 써본지 얼마안되서 잘못올린 이슈 지우려고 하니깐 안 지워지네요

안녕하세요.
개발자님 덕분에 라이브러리 잘 사용 하고 있습니다.
감사합니다.

다름 아니오라 네이버 맵 관련 오늘 공지가 올라 왔는데
https://openapi.map.naver.com --> 변경 후: https://oapi.map.naver.com 변경 된다고 하네요.
23년 연말까지만 유지되고 변경 되는것으로 보입니다.

참고 링크 :
https://www.ncloud.com/support/notice/all/1570

혹시 대응 해 주실 수 있으신지 문의 드립니다.

@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 #5 (comment)

• Typescript Support #38
• Use React Hook
• Update docs (with mdx)
  • create next-docz
  • brand new website
    • deploy
    • write react ver. examples for offical docs tutorials
    • legacy docs link
  • Migration guide from v0.0
    • NavermapsProvider
    • Container
    • Suspensed useNavermaps
• Update devtools (pnpm, husky, tsup)
• Add InfoWindow Overlay #30
• React 17, 18 Support (Drop 16)
• ESM Support
• Write tests
• Github Action
  • Website
  • npm publish
  • changesets

Fix

• #33
• #96

예제를 참고하면서 polygon그리는 것 까지 성공하였습니다. polygon내에서 event를 사용하는 방법을 알 수 있을까요??

네이버 지도 공식문서에 보면
아래와 같이 CustomControl을 사용해
지도에 버튼을 띄워서 클릭 시 설정된 위치로 이동하는 기능을 소개합니다.

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a>';
var map = new naver.maps.Map('map', {zoom: 13});

naver.maps.Event.once(map, 'init_stylemap', function() {
    //customControl 객체 이용하기
    var customControl = new naver.maps.CustomControl(locationBtnHtml, {
        position: naver.maps.Position.TOP_LEFT
    });

    customControl.setMap(map);

    naver.maps.Event.addDOMListener(customControl.getElement(), 'click', function() {
        map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971));
    });

    //Map 객체의 controls 활용하기
    var $locationBtn = $(locationBtnHtml),
        locationBtnEl = $locationBtn[0];

    map.controls[naver.maps.Position.LEFT_CENTER].push(locationBtnEl);

    naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() {
        map.setCenter(new naver.maps.LatLng(37.3595953, 127.1553971));
    });
});

위의 코드를 활용하여 내위치가기 버튼을 지도에 띄울려고하는데,
해당 라이브러리에서 사용을 어떻게 하는지 찾다가 막혀서 질문을 남깁니다.
혹시 가능하다면 방법을 알려주시면 감사하겠습니다!

오류:
Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0-0 || ^16.0.0-0" from [email protected]

: 상위 react 버전으로 설치가 불가한 오류가 있습니다.
force로는 설치가 가능합니다!
혹시 업데이트가 가능할까요??

현재 저는 이렇게 사용을 하고있는데 지금 당장 사용하고 싶으면 말씀하신것처럼 ref 로 참조해서쓰구 이런식으로 네이버맵 객체를 생성해서 드로잉매니저를 사용할려면 팔월 말정도에 시작할수 있다고 이해를 하면될가요?

Originally posted by @siosio34 in #21 (comment)

네이버 지도의 InfoWindow 는 어떻게 사용할 수 있을까요? 아래 예제를 구현하고 싶은데 react 에서는 어떻게 하면 되는지 여쭤보고 싶어서요;

https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-infowindow-simple.example.html

좋은 라이브러리 만들어주셔서 감사합니다!!

안녕하세요.
react-naver-maps를 이용해 개발하려고 합니다.
최근 ncp에서만 naver-maps를 이용하게 바뀌어서 그렇게 사용 중인데요.

<RenderAfterNavermapsLoaded ncpClientId={my_cliet_id}>
          <NaverMap id="naver_maps" style={{ width: "100%" }} height="300px" />
        </RenderAfterNavermapsLoaded>

위 코드처럼 작성할 경우 다음과 같은 에러가 발생합니다.
loadNavermapsScript: clientId is required

제 생각에 ncpClientId를 props로 추가하더라도 clientId를 required로 요구하는 것 같은데,
혹시 해결할 수 있는 방법이 있을까요?

초기 버전을 받아서 사이클이나 폴리곤 등의 기능이 없었던거 같은데 직접 만들어서 넣었는데
그 기능까지 추가가 되었네요 ~ ^^

질문한가지 드려보아요
초기 버젼의 문제는 아닌것 같은데 맵을 빠르게 이동하다보면
이동이 되지 않고 다시 원래 자리로 튕기듯이 돌아오는 문제가 있는데
이건 리액트의 비동기 문제인가요?
아니면 저만의 문제인지..
조언 좀 부탁드립니다.

현재 한 페이지에서 두개의 지도를 생성하여 구현하는 중에 페이지가 언마운트 시 destory 관련 오류가 발생하고 있습니다. (버전 0.1)
(지도를 1개만 생성했을 경우 오류 없음.)

한 페이지에서 여러개의 지도를 생성하는 예제 코드를 제공 받을 수 있을까요?

참고로 아래는 디버깅 시 콘솔 내용입니다.
[콘솔]

react-create-app으로 만든 상태에서

produnction env로 bundle 파일 생성 시 아래 와 같은 에러가 납니다.

Failed to minify the code from this file:

        ./node_modules/react-naver-maps/dist/react-naver-maps.esm.js:78

위 에러 라인 찾아가 아래 코드 처럼 수정하면 잘 묶이긴 합니다.

수정전
var _lazyUpdateKVO = _asyncToGenerator(function* (_ref) {
수정후
var _lazyUpdateKVO = _asyncToGenerator(function (_ref) {

https://navermaps.github.io/maps.js.ncp/docs/tutorial-marker-cluster.example.html

여기에 나오는 클러스터 기능을 사용하고 싶은데 아무리 찾아봐도 없는것같아서요..혹시 방법이 있을까요?

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>

next js 사용하고 모달창에서 맵을 렌더하고 있습니다.
최초 모달창 오픈시에는 문제가 없으나
모달을 다시 오픈하면 맵 타일이 쏠리는 문제가 있습니다.
우측 하단에 지도 축척이 제위치에 있는걸 보면 맵 컴포넌트 위치는 문제 없는것 같고
타일만 이동된것 처럼 보입니다.
마우스를 가져가 봐도 타일 이미지 위치가 좀 틀어진 것 같고요.

어떤 문제일까요?