NAVER 지도 API 사용법

NAVER 지도 API

NAVER 지도 API 중 Web Dynamic Map의 기능입니다.

• 지도 생성
• DOM 이벤트 만들기
• 지도 컨트톨
• 데이터 레이어
• 마커

지도 생성

• 지도 DOM 요소 지정하기
  <div id="map" style="width:100%;height:400px;"></div>
• 지도 생성하기
  const map = new naver.maps.Map(document.getElementById('map', MapOptions));
• 지도 옵션

const mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10

DOM 이벤트

addListener 메서드를 이용해 지도에서 발생한 이벤트를 받아 핸들러를 실행하는 리스너를 등록할 수 있습니다.

const mapOptions = {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
};

var map = new naver.maps.Map('map', mapOptions);

naver.maps.Event.addListener(map, 'click', function(e) {
    console.log(e);
});

지도 컨트롤

컨트롤은 사용자가 지도와 상호작용할 수 있도록 NAVER 지도 API v3에서 제공하는 UI(User Interface) 요소를 말합니다.

• 줌 컨트롤: 지도의 줌 레벨을 조정할 수 있는 슬라이더 또는 +/- 버튼입니다. 이 컨트롤은 기본적으로 사용하지 않도록 되어 있습니다.
• 축척 컨트롤: 지도의 축척을 표시합니다. 이 컨트롤은 기본적으로 오른쪽 아래에 표시됩니다.
• 지도 유형 컨트롤: 일반 지도, 위성 지도와 같은 지도 유형을 전환할 수 있는 버튼 또는 드롭다운입니다. 이 컨트롤은 기본적으로 사용하지 않도록 되어 있습니다.
• 사용자 정의 컨트롤

데이터 레이어

지리 공간 데이터를 기반으로 지도 위에 점, 선, 도형 등을 쉽게 표현할 수 있는 가상의 Data 레이어를 제공합니다.

• 지리 공간 데이터: GeoJSON, KML, GPX 형식의 지리 공간 데이터. 그 중에서 KML 데이터 형식을 이용해 보려고 합니다.
• KML 데이터: Google 어스, Google 지도 및 Google 모바일 지도에서 지리 데이터를 표시하는 데 쓰이는 XML 기반의 마크업 언어 스키마로,
  Point, LineString, LinearRing 을 표현하기 쉬워, 과제의 여행경로 표시에 적절하다고 생각했습니다.

마커

마커는 지도 위의 한 위치를 아이콘으로 표시하는 도구입니다. 여행지를 지도에 표시할 때 도움이 됩니다.

• 마커 표시하기

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
});

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

• 클릭한 지점으로 마커 옮기기

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
});

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

naver.maps.Event.addListener(map, 'click', function(e) {
    marker.setPosition(e.latlng);
});

Reference
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html