diff --git a/docs/module-visualization.html b/docs/module-visualization.html
index 3562ebf4..70333d2b 100644
--- a/docs/module-visualization.html
+++ b/docs/module-visualization.html
@@ -649,11 +649,11 @@ <h1 class="page-title">Module: visualization</h1>
     <div class="container-overview">
     
         
-            <div class="description" itemprop="description"><p>시각화 서브모듈은 NAVER 지도 API v3에서 제공하는 서브모듈 중 하나로, 위/경도 좌표가 있는 데이터를 시각화할 수 있도록 합니다.<br>
-클라이언트에서 데이터를 렌더링하므로 데이터가 많으면 성능 저하를 초래할 수 있습니다. 다음은 지원하는 웹 브라우저 및 플랫폼 범위입니다.</p>
+            <div class="description" itemprop="description"><p>시각화 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 위/경도 좌표가 있는 데이터를 시각화할 수 있도록 합니다.<br>
+클라이언트에서 데이터를 렌더링하므로 데이터가 많으면 성능이 저하될 수 있습니다. 다음은 지원하는 웹 브라우저 및 플랫폼 범위입니다.</p>
 <ul>
-<li>PC: IE9+, Chrome, Safari 5+, Firefox</li>
-<li>Mobile: Android 5+, iOS 9+</li>
+<li>PC: Internet Explorer 9 이상, Chrome, Safari 5 이상, Firefox</li>
+<li>Mobile: Android 5 이상, iOS 9 이상</li>
 </ul>
 <h4>Tutorials</h4>
 <ul>
diff --git a/docs/naver.maps.BicycleLayer.html b/docs/naver.maps.BicycleLayer.html
index 8eabc560..143bc216 100644
--- a/docs/naver.maps.BicycleLayer.html
+++ b/docs/naver.maps.BicycleLayer.html
@@ -1366,8 +1366,8 @@ <h4 class="name" id="getOpacity"><span class="type-signature"></span>getOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 반환합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 반환합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
@@ -1516,7 +1516,7 @@ <h4 class="name" id="getPaneElement"><span class="type-signature"></span>getPane
 
     
     <div class="description">
-        <p><s>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</s> (Deprecated)</p>
+        <p>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</p>
     </div>
     
 
@@ -2115,8 +2115,8 @@ <h4 class="name" id="setOpacity"><span class="type-signature"></span>setOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 설정합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 설정합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
diff --git a/docs/naver.maps.CadastralLayer.html b/docs/naver.maps.CadastralLayer.html
index c80f66da..1639f95a 100644
--- a/docs/naver.maps.CadastralLayer.html
+++ b/docs/naver.maps.CadastralLayer.html
@@ -1366,8 +1366,8 @@ <h4 class="name" id="getOpacity"><span class="type-signature"></span>getOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 반환합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 반환합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
@@ -1516,7 +1516,7 @@ <h4 class="name" id="getPaneElement"><span class="type-signature"></span>getPane
 
     
     <div class="description">
-        <p><s>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</s> (Deprecated)</p>
+        <p>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</p>
     </div>
     
 
@@ -2115,8 +2115,8 @@ <h4 class="name" id="setOpacity"><span class="type-signature"></span>setOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 설정합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 설정합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
diff --git a/docs/naver.maps.LabelLayer.html b/docs/naver.maps.LabelLayer.html
index 4fb7e8ff..0df9f9c9 100644
--- a/docs/naver.maps.LabelLayer.html
+++ b/docs/naver.maps.LabelLayer.html
@@ -1366,8 +1366,8 @@ <h4 class="name" id="getOpacity"><span class="type-signature"></span>getOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 반환합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 반환합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
@@ -1516,7 +1516,7 @@ <h4 class="name" id="getPaneElement"><span class="type-signature"></span>getPane
 
     
     <div class="description">
-        <p><s>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</s> (Deprecated)</p>
+        <p>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</p>
     </div>
     
 
@@ -2115,8 +2115,8 @@ <h4 class="name" id="setOpacity"><span class="type-signature"></span>setOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 설정합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 설정합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
diff --git a/docs/naver.maps.Layer.html b/docs/naver.maps.Layer.html
index e8898845..d0309526 100644
--- a/docs/naver.maps.Layer.html
+++ b/docs/naver.maps.Layer.html
@@ -783,7 +783,7 @@ <h5>Parameters</h5>
 
             
 
-            <td class="description last"><p><s>레이어 옵션</s> (Deprecated)</p></td>
+            <td class="description last"><p>레이어 옵션</p></td>
         </tr>
 
     
@@ -1334,8 +1334,8 @@ <h4 class="name" id="getOpacity"><span class="type-signature"></span>getOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 반환합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 반환합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
@@ -1475,7 +1475,7 @@ <h4 class="name" id="getPaneElement"><span class="type-signature"></span>getPane
 
     
     <div class="description">
-        <p><s>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</s> (Deprecated)</p>
+        <p>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</p>
     </div>
     
 
@@ -2038,8 +2038,8 @@ <h4 class="name" id="setOpacity"><span class="type-signature"></span>setOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 설정합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 설정합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
@@ -2176,7 +2176,7 @@ <h4>LayerOptions</h4>
 <dd>
     
     <div class="description">
-        <p><s><code>LayerOptions</code> 객체는 <code>Layer</code>를 정의하는 옵션을 나타냅니다.</s><br>
+        <p><code>LayerOptions</code> 객체는 <code>Layer</code>를 정의하는 옵션을 나타냅니다.<br>
 <strong>(기본 지도 타일과 합쳐서 표현하는 방법으로 변경되어 옵션을 지원하지 않습니다. 곧 문서에서 제거될 예정입니다.)</strong></p>
     </div>
     
diff --git a/docs/naver.maps.StreetLayer.html b/docs/naver.maps.StreetLayer.html
index bcab500f..b24a2119 100644
--- a/docs/naver.maps.StreetLayer.html
+++ b/docs/naver.maps.StreetLayer.html
@@ -1366,8 +1366,8 @@ <h4 class="name" id="getOpacity"><span class="type-signature"></span>getOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 반환합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 반환합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
@@ -1516,7 +1516,7 @@ <h4 class="name" id="getPaneElement"><span class="type-signature"></span>getPane
 
     
     <div class="description">
-        <p><s>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</s> (Deprecated)</p>
+        <p>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</p>
     </div>
     
 
@@ -2115,8 +2115,8 @@ <h4 class="name" id="setOpacity"><span class="type-signature"></span>setOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 설정합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 설정합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
diff --git a/docs/naver.maps.TrafficLayer.html b/docs/naver.maps.TrafficLayer.html
index 902c5757..cde44bd2 100644
--- a/docs/naver.maps.TrafficLayer.html
+++ b/docs/naver.maps.TrafficLayer.html
@@ -1443,8 +1443,8 @@ <h4 class="name" id="getOpacity"><span class="type-signature"></span>getOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 반환합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 반환합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
@@ -1593,7 +1593,7 @@ <h4 class="name" id="getPaneElement"><span class="type-signature"></span>getPane
 
     
     <div class="description">
-        <p><s>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</s> (Deprecated)</p>
+        <p>레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다.</p>
     </div>
     
 
@@ -2400,8 +2400,8 @@ <h4 class="name" id="setOpacity"><span class="type-signature"></span>setOpacity(
 
     
     <div class="description">
-        <p><s>레이어 타일의 불투명도를 설정합니다.</s> (Deprecated)<br>
-<s>불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</s></p>
+        <p>레이어 타일의 불투명도를 설정합니다.<br>
+불투명도값의 범위는 <code>0~1</code>이며, 기본값은 1입니다.</p>
     </div>
     
 
diff --git a/docs/naver.maps.visualization.DotMap.html b/docs/naver.maps.visualization.DotMap.html
index d894c736..df635c2b 100644
--- a/docs/naver.maps.visualization.DotMap.html
+++ b/docs/naver.maps.visualization.DotMap.html
@@ -648,7 +648,7 @@ <h2>
         DotMap
         </h2>
         
-            <div class="class-description" itemprop="description"><p><code>DotMap</code> 클래스는 점지도를 정의합니다. 가중치가 있는 지점 목록을 이용할 때는 가중치를 <code>1 ~ {반지름}</code>로 정규화하고, 해당 값을 점지도를 표현하는 점의 반지름으로 사용합니다. 가중치가 없는 지점 목록을 이용할 때는 반지름을 점지도를 표현하는 점의 반지름으로 사용합니다.</p></div>
+            <div class="class-description" itemprop="description"><p><code>DotMap</code> 클래스는 점지도를 정의합니다. 가중치가 있는 지점 목록을 이용할 때는 가중치를 <code>1~{반지름}</code>로 정규화하고, 해당 값을 점지도를 표현하는 점의 반지름으로 사용합니다. 가중치가 없는 지점 목록을 이용할 때는 반지름을 점지도를 표현하는 점의 반지름으로 사용합니다.</p></div>
         
     
 </header>
@@ -1784,7 +1784,7 @@ <h5>Parameters</h5>
 
             
 
-            <td class="description last"><p>점지도 옵션 값</p></td>
+            <td class="description last"><p>점지도 옵션값</p></td>
         </tr>
 
     
@@ -2172,7 +2172,7 @@ <h5 class="subsection-title">Properties</h5>
                 </td>
             
 
-            <td class="description last"><p>점지도의 불투명도입니다. <code>0 ~ 1</code>의 값을 입력합니다.</p></td>
+            <td class="description last"><p>점지도의 불투명도입니다. 값의 범위는 <code>0~1</code>입니다.</p></td>
         </tr>
 
     
@@ -2341,7 +2341,7 @@ <h5 class="subsection-title">Properties</h5>
             
 
             <td class="description last"><p>점지도를 표현하는 점의 선 마감 스타일입니다. SVG의 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap">stroke-linecap</a> 스타일 표준을 따릅니다.</p>
-<p>사용 가능한 값으로는 <code>butt</code>, <code>flat</code>(butt와 동일), <code>round</code> 그리고 <code>square</code>가 있습니다.</p>
+<p>사용 가능한 값은 <code>butt</code>, <code>flat</code>(butt와 동일), <code>round</code>, <code>square</code>입니다.</p>
 <p>아래 그림의 왼쪽부터 순서대로 <code>butt</code>, <code>round</code>, <code>square</code>입니다.<br>
 <img src="./img/stroke-linecap.png" alt="stroke-linecap"></p></td>
         </tr>
@@ -2385,8 +2385,8 @@ <h5 class="subsection-title">Properties</h5>
                 </td>
             
 
-            <td class="description last"><p>점지도를 표현하는 점의 선들이 맞닿는 부분에 대한 마감 스타일입니다. SVG의 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin">stroke-linejoin</a> 스타일 표준을 따릅니다.</p>
-<p>사용 가능한 값으로는 <code>miter</code>, <code>round</code> 그리고 <code>bevel</code>이 있습니다.</p>
+            <td class="description last"><p>점지도를 표현하는 점의 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin">stroke-linejoin</a> 스타일 표준을 따릅니다.</p>
+<p>사용 가능한 값은 <code>miter</code>, <code>round</code>, <code>bevel</code>입니다.</p>
 <p>아래 그림의 위부터 순서대로 <code>miter</code>, <code>round</code>, <code>bevel</code>입니다.<br>
 <img src="./img/stroke-linejoin.png" alt="stroke-linejoin"></p></td>
         </tr>
diff --git a/docs/naver.maps.visualization.HeatMap.html b/docs/naver.maps.visualization.HeatMap.html
index 5d588101..fe935bf0 100644
--- a/docs/naver.maps.visualization.HeatMap.html
+++ b/docs/naver.maps.visualization.HeatMap.html
@@ -648,7 +648,7 @@ <h2>
         HeatMap
         </h2>
         
-            <div class="class-description" itemprop="description"><p><code>HeatMap</code> 클래스는 열지도를 정의합니다. 가중치가 있는 지점 목록을 이용할 때는 가중치를 <code>0.1 ~ 1</code>로 정규화하고, 해당 값을 열지도를 표현하는 점의 영향력 강도(세기)로 사용합니다. 가중치가 없는 지점 목록을 이용할 때는 기본 값 <code>1</code>을 열지도를 표현하는 점의 영향력 강도(세기)로 사용합니다.</p></div>
+            <div class="class-description" itemprop="description"><p><code>HeatMap</code> 클래스는 열지도를 정의합니다. 가중치가 있는 지점 목록을 이용할 때는 가중치를 <code>0.1~1</code>로 정규화하고, 해당 값을 열지도를 표현하는 점의 영향력 강도(세기)로 사용합니다. 가중치가 없는 지점 목록을 이용할 때는 기본값 <code>1</code>을 열지도를 표현하는 점의 영향력 강도(세기)로 사용합니다.</p></div>
         
     
 </header>
@@ -1648,7 +1648,7 @@ <h5>Parameters</h5>
 
             
 
-            <td class="description last"><p>반전된 색상 설정 여부입니다. 이 값이 <code>true</code> 이면 설정한 색상 스펙트럼의 반전을 이용합니다.</p></td>
+            <td class="description last"><p>반전된 색상 설정 여부입니다. 이 값이 <code>true</code>이면 설정한 색상 스펙트럼의 반전을 이용합니다.</p></td>
         </tr>
 
     
@@ -2083,7 +2083,7 @@ <h5>Parameters</h5>
 
             
 
-            <td class="description last"><p>열지도 옵션 값</p></td>
+            <td class="description last"><p>열지도 옵션값</p></td>
         </tr>
 
     
@@ -2471,7 +2471,7 @@ <h5 class="subsection-title">Properties</h5>
                 </td>
             
 
-            <td class="description last"><p>열지도의 불투명도입니다. <code>0 ~ 1</code>의 값을 입력합니다.</p></td>
+            <td class="description last"><p>열지도의 불투명도입니다. 값의 범위는 <code>0~1</code>입니다.</p></td>
         </tr>
 
     
diff --git a/docs/naver.maps.visualization.SpectrumStyle.html b/docs/naver.maps.visualization.SpectrumStyle.html
index a4144a1a..1c6a9d4f 100644
--- a/docs/naver.maps.visualization.SpectrumStyle.html
+++ b/docs/naver.maps.visualization.SpectrumStyle.html
@@ -711,7 +711,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(0,0,131) ~ rgb(128,0,0) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(0,0,131)~rgb(128,0,0) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -739,7 +739,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(255,0,0) ~ rgb(255,0,6) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(255,0,0)~rgb(255,0,6) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -767,7 +767,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(0,0,0) ~ rgb(255,255,255) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(0,0,0)~rgb(255,255,255) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -795,7 +795,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(0,255,255) ~ rgb(255,0,255) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(0,255,255)~rgb(255,0,255) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -823,7 +823,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(0,0,0) ~ rgb(255,255,255) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(0,0,0)~rgb(255,255,255) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -851,7 +851,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(8,29,88) ~ rgb(255,255,217) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(8,29,88)~rgb(255,255,217) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -879,7 +879,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(128,0,38) ~ rgb(255,255,204) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(128,0,38)~rgb(255,255,204) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -907,7 +907,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(5,10,172) ~ rgb(178,10,28) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(5,10,172)~rgb(178,10,28) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -935,7 +935,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(150,0,90) ~ rgb(255,0,0) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(150,0,90)~rgb(255,0,0) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -963,7 +963,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(12,51,131) ~ rgb(217,30,30) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(12,51,131)~rgb(217,30,30) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
@@ -991,7 +991,7 @@ <h5 class="subsection-title">Properties</h5>
 
             
 
-            <td class="description last"><p>rgb(64,5,5) ~ rgb(248,254,105) 값으로 구성된 스펙트럼입니다.</p></td>
+            <td class="description last"><p>rgb(64,5,5)~rgb(248,254,105) 값으로 구성된 스펙트럼입니다.</p></td>
         </tr>
 
     
diff --git a/docs/naver.maps.visualization.html b/docs/naver.maps.visualization.html
index 8d9d77c6..76e9e87b 100644
--- a/docs/naver.maps.visualization.html
+++ b/docs/naver.maps.visualization.html
@@ -656,7 +656,7 @@ <h2>
     <div class="container-overview">
     
         
-            <div class="description" itemprop="description"><p>시각화 서브모듈 네임스페이스입니다.</p></div>
+            <div class="description" itemprop="description"><p>시각화 서브 모듈 네임스페이스입니다.</p></div>
         
 
         
diff --git a/docs/quicksearch.html b/docs/quicksearch.html
index 888aa346..d0af7275 100644
--- a/docs/quicksearch.html
+++ b/docs/quicksearch.html
@@ -15,7 +15,7 @@
     <script src="scripts/fulltext-search.js"></script>
 
     <script type="text/x-docstrap-searchdb">
-    {"global.html":{"id":"global.html","title":"Types","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Types Types Members OVERLAY_TYPE_ORDER_IN_HOUSE 정렬 순서는 Tile-Map-API 가이드에서 SubType (세부 지도 유형) 순서대로 정렬한다. https://oss.navercorp.com/Maps/tilemap/wiki/Tile-Map-API-%ED%98%B8%EC%B6%9C-%EA%B0%80%EC%9D%B4%EB%93%9C Methods isBuiltInMapType() StyleMap 에서 제공하는 기본 MapType 인지 여부 체크 기존 지도나 사내용은 별다른 제약없이 사용 하도록 처리 limitMaxBounds() 사외 버전은 지도 영역을 PC Web MaxBounds 로 제한하기 위한 코드 limitMinZoom() 사외 버전은 지도 영역을 PC Web MaxBounds 로 제한하기 위한 코드 Type Definitions any 모든 데이터 형식을 표현합니다. Type: any array 배열(Array) 객체를 표현합니다. Type: array ArrayOfBounds 지도 좌표 경계의 배열입니다. Type: Array.&lt;naver.maps.PointBounds&gt; | Array.&lt;naver.maps.LatLngBounds&gt; ArrayOfBoundsLiteral 지도 좌표 경계 리터럴의 배열입니다. Type: Array.&lt;PointBoundsLiteral&gt; | Array.&lt;LatLngBoundsLiteral&gt; ArrayOfCoords 지도 좌표의 배열입니다. Type: Array.&lt;naver.maps.Point&gt; | Array.&lt;naver.maps.LatLng&gt; ArrayOfCoordsLiteral 지도 좌표 리터럴의 배열입니다. Type: Array.&lt;PointLiteral&gt; | Array.&lt;LatLngLiteral&gt; boolean true 또는 false 값(Boolean)을 표현합니다. Bounds 지도 좌표 경계 객체입니다. Type: naver.maps.PointBounds | naver.maps.LatLngBounds BoundsLiteral 지도 좌표 경계 리터럴 객체입니다. new naver.maps.PointBounds나 new naver.maps.LatLngBounds를 대신하여 사용할 수 있습니다. Type: PointBoundsLiteral | LatLngBoundsLiteral Coord 지도 좌표 객체입니다. Type: naver.maps.Point | naver.maps.LatLng CoordLiteral 지도 좌표 리터럴 객체입니다. new naver.maps.Point나 new naver.maps.LatLng를 대신하여 사용할 수 있습니다. Type: PointLiteral | LatLngLiteral DOMEvent HTMLElement에서 발생하는 원시(native) 형태의 DOMEvent 객체입니다. Type: event DOMEventListener DOM에서 이벤트 알림을 받기 위해 리스너를 등록하면 반환되는 DOM 이벤트 리스너 객체입니다. Type: object Properties Name Type Description eventName string 등록된 이벤트의 이름입니다. listener function 등록된 이벤트의 핸들러입니다. target HTMLElement 이벤트가 등록된 대상 요소입니다. DrawingOverlay 그리기 도구 서브 모듈을 이용해 생성되는 오버레이 객체입니다. 그리기 도구 서브 모듈은 로드되는 경우 OverlayView를 확장하여 편집 가능한 오버레이 클래스를 구현합니다. 그리기 도구 서브 모듈을 로드하지 않은 경우 아래의 속성은 오버레이 객체 내에 존재하지 않습니다. Type: naver.maps.Rectangle | naver.maps.Ellipse | naver.maps.Polyline | naver.maps.Polygon | naver.maps.Marker Properties Name Type Description id string 헤당 오버레이의 id입니다. name string 해당 오버레이의 유형입니다. 'rectangle', 'ellipse' 등이 있습니다. setEditable function 오버레이의 editable 속성을 정의합니다. editable 속성이 참일 경우 편집 상태이고, 거짓일 경우 일반 상태입니다. setEditable 메서드의 인수로 editable 속성(boolean)과 controlPointOptions 속성(편집 제어점 속성)을 전달할 수 있습니다. 두 번째 인수인 controlPointOptions 속성을 생락한 경우 기본값으로 표시됩니다. Example // 그리기 도구 서브 모듈이 로드된 상태 var controlPointOptions = { anchorPointOptions: { radius: 6, fillColor: '#ff0000', strokeColor: '#0000ff', strokeWeight: 2 }, midPointOptions: { radius: 6, fillColor: '#ff0000', strokeColor: '#0000ff', strokeWeight: 2, fillOpacity: 0.5 } }; // 임의의 오버레이 overlay.setEditable(true, controlPointOptions); FitBoundsOptions CSS의 position을 나타내는 것과 같은 방식으로 특정 방향에 설정되는 안쪽 여백(margin)값을 나타냅니다. Type: object Properties Name Type Description top number 위 right number 오른쪽 bottom number 아래 left number 왼쪽 maxZoom number fitBounds 적용 시 허용되는 최대 줌 입니다. function() JavaScript 함수(Function)를 표현합니다. GeoJSON GeoJSON 객체는 지리 공간 데이터를 기반으로 지도 위에 점, 선, 도형 등을 표현하는 데이터 구조를 정의합니다. 이 타입의 객체는 Feature, FeatureCollection 또는 geometry로 표현할 수 있으며, 각 Feature에서 표현할 수 있는 geometry의 형태는 다음과 같습니다. Point LineString Polygon MultiPoint MultiLineString MultiPolygon GeometryCollection Feature는 geometry 객체와 부가적인 속성을 포함하며, FeatureCollection은 feature의 목록이라고 할 수 있습니다. Type: object Tutorials 데이터 레이어 See http://geojson.org/geojson-spec.html Example { \"type\": \"FeatureCollection\", \"features\": [ { \"type\": \"Feature\", \"geometry\": { \"type\": \"Point\", \"coordinates\": [102.0, 0.5] }, \"properties\": { \"prop0\": \"value0\" } }, { \"type\": \"Feature\", \"geometry\": { \"type\": \"LineString\", \"coordinates\": [ [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0] ] }, \"properties\": { \"prop0\": \"value0\", \"prop1\": 0.0 } }, { \"type\": \"Feature\", \"geometry\": { \"type\": \"Polygon\", \"coordinates\": [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] }, \"properties\": { \"prop0\": \"value0\", \"prop1\": {\"this\": \"that\"} } } ] } GPX GPX는 인터넷에서 GPS 데이터를 다양한 응용 프로그램과 웹 서비스 사이에서 교환하는 데 사용되는 파일 형식입니다. 현재 지원하는 요소는 다음과 같습니다. Line Paths (wpt, rte, trk) Line Styles (color, opacity, width, linecap, pattern) bounds, name, time, desc, cmt, type, sym Type: object Tutorials 데이터 레이어 See http://www.topografix.com/gpx.asp Example &lt;gpx creator=\"GPS Visualizer http://www.gpsvisualizer.com/\" version=\"1.0\"&gt; &lt;wpt lat=\"45.41000\" lon=\"-121.71349\"&gt; &lt;ele&gt;1777&lt;/ele&gt; &lt;name&gt;Wy'East Basin&lt;/name&gt; &lt;/wpt&gt; &lt;/gpx&gt; HTMLElement HTML DOM 노드를 표현합니다. Type: HTMLElement ImageData HTML Canvas 요소를 렌더링하는 데 사용될 이미지 데이터(ImageData)를 표현합니다. Type: ImageData KeyboardEvent 지도에서 키보드 이벤트 발생 시 전달되는 키보드 이벤트 객체입니다. Type: event Properties Name Type Description keyboardEvent DOMEvent 이벤트가 발생한 시점의 DOM 이벤트 객체입니다. KML KML(Keyhole Markup Language)은 Google 어스, Google 지도 및 Google 모바일 지도에서 지리 데이터를 표시하는 데 쓰이는 XML 기반의 마크업 언어 스키마입니다. 현재 지원하는 요소는 다음과 같습니다. Point, LineString, LinearRing, Polygon, MultiGeometry, gx:Track, gx:MultiTrack Style (LineStyle, PolyStyle) LatLonAltBox name, address, description, visibility Type: object Tutorials 데이터 레이어 See https://developers.google.com/kml/documentation/kml_tut?hl=ko Example &lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt; &lt;kml xmlns=\"http://www.opengis.net/kml/2.2\"&gt; &lt;Placemark&gt; &lt;name&gt;Simple placemark&lt;/name&gt; &lt;description&gt;Attached to the ground. Intelligently places itself at the height of the underlying terrain.&lt;/description&gt; &lt;Point&gt; &lt;coordinates&gt;-122.0822035425683,37.42228990140251,0&lt;/coordinates&gt; &lt;/Point&gt; &lt;/Placemark&gt; &lt;/kml&gt; KVOArrayOfCoords 지도 좌표의 KVO 배열입니다. Type: naver.maps.KVOArray.&lt;naver.maps.Point&gt; | naver.maps.KVOArray.&lt;naver.maps.LatLng&gt; LatLngBoundsLiteral 지도 좌표 경계 리터럴 객체입니다. new naver.maps.LatLngBounds를 대신하여 사용할 수 있습니다. Type: PointBoundsLiteral | LatLngBoundsObjectLiteral LatLngBoundsObjectLiteral north, east, south, west를 키로 사용하는 위경도 좌표 객체입니다. Type: object Properties Name Type Description north number 위도 최대 좌표입니다. east number 경도 최대 좌표입니다. south number 위도 최소 좌표입니다. west number 경도 최소 좌표입니다. Example var min = {x: 126.5322317, y: 33.3572421}, max = {x: 126.5364907, y: 33.3608829}; var bounds = {north: max.y, east: max.x, south: min.y, west: min.x}; LatLngLiteral 지도 좌표 리터럴 객체입니다. new naver.maps.LatLng를 대신하여 사용할 수 있습니다. Type: PointLiteral | LatLngObjectLiteral LatLngObjectLiteral lat, lng를 키로 사용하는 위경도 좌표 객체입니다. Type: object Properties Name Type Description lat number 위도 좌표입니다. lng number 경도 좌표입니다. Example var x = 126.5322317, y = 33.3572421; var coord = {lat: y, lng: x}; LayerRegistry 지도 레이어의 컬렉션을 포함하는 객체입니다. Type: naver.maps.KVO Properties Name Type Description getLayerNames function 등록된 모든 레이어의 이름을 배열로 반환합니다. MapEventListener NAVER 지도 API v3 내의 일부 객체에서 제공하는 마우스와 키보드, 터치, KVO(Key Value Observing) 상태 변경 등의 이벤트 알림을 받기 위해 리스너를 등록하면 반환되는 지도 이벤트 리스너 객체입니다. Type: object Properties Name Type Description eventName string 등록된 이벤트의 이름입니다. listener function 등록된 이벤트의 핸들러입니다. listenerId string 등록된 이벤트의 ID입니다. target object 이벤트가 등록된 대상 객체입니다. MapType 지도 유형 객체입니다. Type: naver.maps.ImageMapType | object margin CSS의 position을 나타내는 것과 같은 방식으로 특정 방향에 설정되는 안쪽 여백(margin)값을 나타냅니다. Type: object Properties Name Type Description top number 위 right number 오른쪽 bottom number 아래 left number 왼쪽 maxZoom number fitBounds 적용 시 허용되는 최대 줌 입니다. null null 값을 표현합니다. Type: null number 정수와 실수를 포함하는 숫자(Number)를 표현합니다. Type: number object JavaScript의 Object를 표현합니다. Type: object padding CSS의 position을 나타내는 것과 같은 방식으로 특정 방향에 설정되는 바깥쪽 여백(padding) 값을 나타냅니다. Type: object Properties Name Type Description top number 위 right number 오른쪽 bottom number 아래 left number 왼쪽 PointArrayLiteral x, y 순서대로 선언된 좌표 배열입니다. Type: array Examples var x = 126.5322317, y = 33.3572421; var coord = [x, y]; var coord = [10, 10]; PointBoundsArrayLiteral minX, minY, maxX, maxY 순서대로 선언된 좌표 경계의 배열입니다. Type: array Examples var min = [126.5322317, 33.3572421], max = [126.5364907, 33.3608829]; var bounds = [min[0], min[1], max[0], max[1]]; var min = [0, 0], max = [200, 200]; var bounds = [min[0], min[1], max[0], max[1]]; PointBoundsLiteral 지도 좌표 경계 리터럴 객체입니다. new naver.maps.PointBounds를 대신하여 사용할 수 있습니다. Type: PointBoundsArrayLiteral | PointBoundsObjectLiteral PointBoundsObjectLiteral minX, minY, maxX, maxY를 키로 사용하는 좌표 경계 객체입니다. Type: object Properties Name Type Description MinX number 최소 좌표의 x 좌표입니다. MinY number 최소 좌표의 y 좌표입니다. MaxX number 최대 좌표의 x 좌표입니다. MaxY number 최대 좌표의 y 좌표입니다. Example var min = [126.5322317, 33.3572421], max = [126.5364907, 33.3608829]; var bounds = {minX: min[0], minY: min[1], maxX: max[0], maxY:max[1]}; PointerEvent 지도와 오버레이에서 발생한 마우스 또는 터치 이벤트 발생 시 전달되는 포인터 이벤트 객체입니다. Type: event Properties Name Type Argument Description coord Coord 이벤트가 발생한 위치의 지도 좌표입니다. point naver.maps.Point 이벤트가 발생한 위치의 세계 좌표입니다. offset naver.maps.Point 이벤트가 발생한 위치의 픽셀 좌표입니다. pointerEvent DOMEvent 이벤트가 발생한 시점의 DOM 이벤트 객체입니다. overlay naver.maps.OverlayView &lt;optional&gt; 이벤트가 발생한 오버레이 객체입니다. PointLiteral 지도 좌표 리터럴 객체입니다. new naver.maps.Point를 대신하여 사용할 수 있습니다. Type: PointArrayLiteral | PointObjectLiteral PointObjectLiteral x, y를 키로 사용하는 좌표 객체입니다. Type: object Properties Name Type Description x number x 좌표입니다. y number y 좌표입니다. Examples var x = 126.5322317, y = 33.3572421; var coord = {x: x, y: y}; var coord = {x: 10, y: 10}; SizeArrayLiteral width, height 순서대로 선언된 크기 배열입니다. Type: array Example var width = 10, height = 5; var sizeArray = [width, height]; SizeLiteral 2차원 평면의 크기 리터럴입니다. new naver.maps.Size를 대신하여 사용할 수 있습니다. Type: SizeArrayLiteral | SizeObjectLiteral SizeObjectLiteral width, height를 키로 사용하는 크기 객체입니다. Type: object Properties Name Type Description width number 너비 height number 높이 Example var width = 10, height = 5; var SizeObjectLiteral = {width: width, height: height}; string 문자열(String)을 표현합니다. Type: string TransitionOptions 지도의 이동 효과에 사용할 옵션입니다. Type: object Properties Name Type Argument Default Description duration number &lt;optional&gt; 500 이동 효과가 실행되는 시간(ms)입니다. easing string &lt;optional&gt; \"easeOutCubic\" 이동 효과에 사용할 easing 방식입니다. linear, easeOutCubic, easeInCubic만 지원합니다. × Search results Close "},"modules.list.html":{"id":"modules.list.html","title":"Modules","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Modules Modules Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Classes Classes Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"namespaces.list.html":{"id":"namespaces.list.html","title":"Namespaces","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Namespaces Namespaces Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"mixins.list.html":{"id":"mixins.list.html","title":"Statics","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Statics Statics Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"interfaces.list.html":{"id":"interfaces.list.html","title":"Interfaces","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Interfaces Interfaces Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"tutorials.list.html":{"id":"tutorials.list.html","title":"Tutorials","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Tutorials Tutorials Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"index.html":{"id":"index.html","title":"Index","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 기술문서 네이버 지도 API v3 NAVER 지도 API v3는 JavaScript 형태의 NAVER 지도 플랫폼으로써, 웹 서비스 또는 애플리케이션에 지도 기능을 구현할 수 있도록 다양한 클래스와 메서드를 제공합니다. NAVER 지도 API v3 NAVER 지도 API v3는 JavaScript 형태의 NAVER 지도 플랫폼으로써, 웹 서비스 또는 애플리케이션에 지도 기능을 구현할 수 있도록 다양한 클래스와 메서드를 제공합니다. 웹 브라우저 호환성 높은 성능을 위해 데스크톱과 모바일 환경에 최적화된 코드를 제공하고 있으며, 주요 웹 브라우저를 완벽하게 지원할 수 있도록 새롭게 만들었습니다. 코어 API 서브 모듈 API Visualization PC Internet Explorer 9 이상 Chrome Safari 5 이상 Firefox Mobile Android 5 이상 iOS 9 이상 시작하기 여러분의 지도를 만들어 보세요. 시작하기 &gt; 내 애플리케이션 등록하기 &gt; NAVER 지도 API v3 특징 알아보기 &gt; 예제 모아보기 &gt; 함께 사용할 수 있는 지도 API 다양한 데이터를 지도 서비스와 결합해 위치 기반 서비스를 만들어 보세요. 주소 -&gt; 좌표 변환 API 좌표 -&gt; 주소 변환 API StaticMap API 자세한 내용은 네이버 클라우드 플랫폼 가이드를 참고해 주세요. 문의하기 문의 사항이나 버그를 Question에 등록해 주세요. 빠르고 원활한 처리를 원하신다면 로그인 이후 문의 바랍니다. × Search results Close "},"module-drawing.html":{"id":"module-drawing.html","title":"Module: drawing","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API drawing Module: drawing 그리기 도구 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 아래와 같이 사용자가 지도에 폴리곤, 사각형, 폴리라인, 원, 마커를 그릴 수 있는 그래픽 인터페이스를 제공합니다. Tutorials 서브 모듈 시스템 그리기 도구 생성 및 기본 동작 Examples 그리기 도구 기본 예제 그리기 도구 옵션 활용하기 오버레이 데이터 추출 및 복원하기 Namespace naver.maps.drawing Classes naver.maps.drawing.DrawingManager Types DrawingOptions DrawingOverlay Enums naver.maps.drawing.DrawingMode naver.maps.drawing.DrawingStyle naver.maps.drawing.DrawingEvent × Search results Close "},"module-geocoder.html":{"id":"module-geocoder.html","title":"Module: geocoder","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API geocoder Module: geocoder Geocoder 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 좌표 체계 간 변환 메서드와 특정 좌표계를 지원하는 투영 객체들을 제공합니다. 요금 안내 Geocoding / Reverse Geocoding은 사용 편의를 위해 Web / Mobile SDK / REST API 등 다양한 형태로 제공되며, 제공 방식과 관계 없이 해당 기능을 이용할 경우 각 상품별 요금이 과금됩니다. 사전 준비 사항 Geocoding / Reverse Geocoding API를 사용하려면 클라이언트 아이디를 이용해서 인증해야 합니다. 클라이언트 아이디는 NAVER CLOUD PLATFORM Console에서 애플리케이션을 등록해 발급받습니다. 콘솔의 AI·Application Service &gt; AI·NAVER API &gt; Application에서 애플리케이션을 등록합니다. 자세한 방법 보기 AI·Application Service &gt; AI·NAVER API &gt; Application에서 등록한 애플리케이션을 선택해 Client ID와 Client Secret값을 확인합니다. AI·Application Service &gt; AI·NAVER API &gt; Application의 변경 화면에서 Geocoding이 선택되어 있는지 확인합니다. 선택되어 있지 않으면 429 오류(Quota Exceed)가 발생하니 주의하시기 바랍니다. AI·Application Service &gt; AI·NAVER API &gt; Application의 변경 화면에서 Reverse Geocoding이 선택되어 있는지 확인합니다. 선택되어 있지 않으면 429 오류(Quota Exceed)가 발생하니 주의하시기 바랍니다. Tutorials 서브 모듈 시스템 Geocoder를 활용한 좌표 변환 Geocoder를 활용한 주소와 좌표 검색 API 호출하기 Statics naver.maps.Service - 지도 API v3에서 서버 Open API를 호출하기 위한 속성 및 메서드를 제공합니다. naver.maps.TransCoord - 좌표 체계 간 변환 메서드를 제공합니다. naver.maps.EPSG3857Coord - EPSG3857 평면 좌표를 기본 좌표계로 사용하는 투영 객체입니다. naver.maps.UTMKCoord - UTMK 좌표를 기본 좌표계로 사용하는 투영 객체입니다. naver.maps.UTMK_NAVERCoord - NAVER 좌표를 기본 좌표계로 사용하는 투영 객체입니다. naver.maps.TM128 - 위/경도 좌표를 기본 좌표계로 사용하는 TM128 투영 객체입니다. naver.maps.TM128Coord - TM128 좌표를 기본 좌표계로 사용하는 투영 객체입니다. × Search results Close "},"module-panorama.html":{"id":"module-panorama.html","title":"Module: panorama","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API panorama Module: panorama 파노라마 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 지정한 DOM 요소에 파노라마 이미지를 표시할 수 있는 뷰어를 삽입하여 거리뷰, 항공뷰의 서비스(이하 파노라마)를 제공할 수 있도록 합니다. Tutorials 서브 모듈 시스템 파노라마 생성 및 기본 동작 Classes naver.maps.Panorama naver.maps.FlightSpot naver.maps.AroundControl Types PanoramaOptions PanoramaLocation PanoramaPov AroundControlOptions Interfaces PanoramaProjection × Search results Close "},"module-visualization.html":{"id":"module-visualization.html","title":"Module: visualization","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API visualization Module: visualization 시각화 서브모듈은 NAVER 지도 API v3에서 제공하는 서브모듈 중 하나로, 위/경도 좌표가 있는 데이터를 시각화할 수 있도록 합니다. 클라이언트에서 데이터를 렌더링하므로 데이터가 많으면 성능 저하를 초래할 수 있습니다. 다음은 지원하는 웹 브라우저 및 플랫폼 범위입니다. PC: IE9+, Chrome, Safari 5+, Firefox Mobile: Android 5+, iOS 9+ Tutorials 서브 모듈 시스템 데이터 시각화 Classes naver.maps.visualization.HeatMap naver.maps.visualization.DotMap naver.maps.visualization.WeightedLocation Types HeatMapOptions DotMapOptions SpectrumStyle × Search results Close "},"naver.html":{"id":"naver.html","title":"Namespace: naver","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API naver Namespace: naver naver 네이버 네임스페이스 Namespaces naver.maps × Search results Close "},"naver.maps.html":{"id":"naver.maps.html","title":"Namespace: naver.maps","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API maps Namespace: naver.maps naver. maps NAVER 지도 API v3의 모든 객체를 담는 네임스페이스입니다. Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord Namespaces naver.maps.drawing naver.maps.visualization Members &lt;static, readonly&gt; Animation Animation 객체는 Marker의 애니메이션을 정의하는 속성을 나타냅니다. Type: number Properties Name Type Default Description BOUNCE number 1 마커를 튀깁니다. 이 애니메이션은 애니메이션을 중지할 때까지 지속됩니다. DROP number 2 마커를 지도 위쪽에서 떨어뜨립니다. 이 애니메이션은 한 번만 동작합니다. &lt;static, readonly&gt; jsContentLoaded NAVER 지도 API v3의 서브 모듈을 포함한 모든 JavaScript 콘텐츠의 로드 상태를 나타냅니다. 모든 콘텐츠를 로드하면 true로 설정됩니다. Type: boolean Default Value false &lt;static, readonly&gt; MapTypeId MapTypeId 객체는 NAVER 지도 유형의 id 컬렉션입니다. Type: object Properties Name Type Description NORMAL string 일반 지도 유형 id로 일반 이미지 지도를 보여주는 지도 유형입니다. TERRAIN string 지형도 유형 id로 지형의 높낮이를 함께 보여주는 지도 유형입니다. SATELLITE string 위성 지도 유형 id로 위성 이미지 지도를 보여주는 지도 유형입니다. HYBRID string 겹쳐보기 지도 유형 id로 위성 이미지 지도 위에 주요 도로와 주기를 함께 보여주는 지도 유형입니다. &lt;static&gt; onJSContentLoaded NAVER 지도 API v3의 서브 모듈을 포함한 모든 JavaScript 콘텐츠가 로드되었을 때 호출되는 이벤트 핸들러입니다. Type: function &lt;static, readonly&gt; PointingIcon PointingIcon 객체는 폴리라인의 끝 점의 강조 아이콘을 사전에 정의한 것입니다. Type: number Properties Name Type Default Description OPEN_ARROW number 1 한쪽이 열린 화살표입니다. BLOCK_ARROW number 2 모두 막힌 화살표입니다. CIRCLE number 3 원입니다. DIAMOND number 4 마름모입니다. &lt;static, readonly&gt; Position Position 객체는 요소의 위치 정보를 나타냅니다. 설정할 수 있는 위치는 아래와 같습니다. Type: number Properties Name Type Default Description CENTER number 0 요소를 중앙에 배치합니다. TOP_LEFT number 1 요소를 왼쪽 위에 배치합니다. 요소는 왼쪽 위에서 가운데를 향해 쌓입니다. TOP_CENTER number 2 요소를 위쪽 가운데에 배치합니다. TOP_RIGHT number 3 요소를 오른쪽 위에 배치합니다. 요소는 오른쪽 위에서 가운데를 향해 쌓입니다. LEFT_CENTER number 4 요소를 왼쪽 가운데에 배치합니다. LEFT_TOP number 5 요소를 왼쪽 위에 배치합니다. 요소는 왼쪽 위에서 아래를 향해 쌓입니다. LEFT_BOTTOM number 6 요소를 왼쪽 아래에 배치합니다. 요소는 왼쪽 아래에서 위를 향해 쌓입니다. RIGHT_TOP number 7 요소를 오른쪽 위에 배치합니다. 요소는 오른쪽 위에서 아래를 향해 쌓입니다. RIGHT_CENTER number 8 요소를 오른쪽 가운데에 배치합니다. RIGHT_BOTTOM number 9 요소를 오른쪽 아래에 배치합니다. 요소는 오른쪽 아래에서 위를 향해 쌓입니다. BOTTOM_LEFT number 10 요소를 왼쪽 아래에 배치합니다. 요소는 왼쪽 아래에서 가운데를 향해 쌓입니다. BOTTOM_CENTER number 11 요소를 아래쪽 가운데에 배치합니다. BOTTOM_RIGHT number 12 요소를 오른쪽 아래에 배치합니다. 요소는 오른쪽 아래에서 가운데를 향해 쌓입니다. &lt;static, readonly&gt; SymbolPath SymbolPath 객체는 SymbolIcon의 path를 사전에 정의한 것입니다. Type: number Properties Name Type Default Description BACKWARD_CLOSED_ARROW number 1 뒤쪽을 가리키며, 모두 막힌 화살표입니다. BACKWARD_OPEN_ARROW number 2 뒤쪽을 가리키며, 한쪽이 열린 화살표입니다. CIRCLE number 3 원입니다. FORWARD_CLOSED_ARROW number 4 앞쪽을 가리키며, 모두 막힌 화살표입니다. FORWARD_OPEN_ARROW number 5 앞쪽을 가리키며, 한쪽이 열린 화살표입니다. &lt;static, readonly&gt; SymbolStyle SymbolStyle객체는 SymbolIcon의 style을 사전에 정의한 것입니다. Type: string Properties Name Type Default Description CIRCLE string circle 원 아이콘을 생성하며, SymbolIcon의 radius 속성을 필수로 지정해야 합니다. PATH string path 폴리라인 아이콘을 생성하며, SymbolIcon의 path 속성을 필수로 지정해야 합니다. CLOSED_PATH string closedPath 폴리곤 아이콘을 생성하며, SymbolIcon의 path 속성을 필수로 지정해야 합니다. Type Definitions MapOptions MapOptions 객체는 지도를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description background string 지도 요소의 배경으로 사용할 이미지 URL 또는 CSS 색상값입니다. baseTileOpacity number 지도 기본 타일의 불투명도를 설정합니다. 값의 범위는 0~1이며, 기본값은 1입니다. bounds Bounds | BoundsLiteral null 지도의 초기 좌표 경계입니다. 이 값을 설정하면 지도 옵션 중 center와 zoom 옵션을 무시하고, 지정한 좌표 경계에 맞게 지도를 생성합니다. center Coord | CoordLiteral 서울시청 지도의 초기 중심 좌표입니다. 기본값은 서울 시청 좌표(37.5666103, 126.9783882)입니다. disableDoubleClickZoom boolean false 사용자가 지도 위에서 마우스 버튼을 더블 클릭해 지도를 확대하는 기능의 사용 여부입니다. disableDoubleTapZoom boolean false 사용자가 지도 위에서 한 손가락으로 더블 탭해 지도를 확대하는 기능의 사용 여부입니다. disableKineticPan boolean true 사용자가 지도를 드래그했을 때 관성 효과(사용자가 동작을 끝낸 후에도 계속되는 지도의 움직임)의 사용 여부입니다. disableTwoFingerTapZoom boolean false 사용자가 지도 위에서 두 손가락으로 두 번 탭해 지도를 축소하는 기능의 사용 여부입니다. draggable boolean true 마우스 또는 손가락을 이용한 지도 이동(패닝) 허용 여부입니다. keyboardShortcuts boolean true 키보드 방향 키를 이용한 지도 이동(패닝) 허용 여부입니다. logoControl boolean true NAVER 로고 컨트롤의 표시 여부입니다. (항상 노출로 변경) logoControlOptions LogoControlOptions NAVER 로고 컨트롤의 옵션입니다. mapDataControl boolean true 지도 데이터 저작권 컨트롤의 표시 여부입니다. mapDataControlOptions MapDataControlOptions 지도 데이터 저작권 컨트롤의 옵션입니다. mapTypeControl boolean false 지도 유형 컨트롤의 표시 여부입니다. mapTypeControlOptions MapTypeControlOptions 지도 유형 컨트롤의 옵션입니다. mapTypeId string NORMAL 지도의 초기 지도 유형 id입니다. mapTypes naver.maps.MapTypeRegistry 지도 유형의 컬렉션을 포함하는 객체입니다. 이 값을 설정하지 않으면 사전에 정의된 NAVER 지도의 기본 지도 유형으로 설정합니다. maxBounds Bounds | BoundsLiteral null 지도에서 보이는 최대 좌표 경계입니다. 지도의 중심 좌표는 지정한 최대 좌표 경계 내에서만 설정할 수 있습니다. maxZoom number 지도의 최대 줌 레벨입니다. 이 값을 설정하지 않으면 지정된 초기 지도 유형의 최고 줌 레벨로 설정합니다. minZoom number 지도의 최소 줌 레벨입니다. 이 값을 설정하지 않으면 지정된 초기 지도 유형의 최저 줌 레벨로 설정합니다. padding padding 지도 뷰포트의 안쪽 여백(패딩)입니다. 단위는 화면 픽셀이며, 기본값은 {top: 0, right: 0, bottom: 0, left: 0}입니다. pinchZoom boolean true 핀치 제스처를 이용한 지도 확대/축소 허용 여부입니다. resizeOrigin naver.maps.Position CENTER 지도 크기 조정 시 고정할 원점입니다. scaleControl boolean true 지도 축척 컨트롤의 표시 여부입니다. scaleControlOptions ScaleControlOptions 지도 축척 컨트롤의 옵션입니다. scrollWheel boolean true 마우스 스크롤 휠을 이용한 지도 확대/축소 허용 여부입니다. size naver.maps.Size | SizeLiteral 지도의 초기 크기입니다. 이 값을 설정하지 않으면, 지도 DOM 요소의 CSS 크기에 따라 지도 크기가 자동으로 조정됩니다. overlayZoomEffect null | string null 도형, 마커 등 오버레이의 줌 효과 적용 대상입니다. 적용할 대상의 창(pane) 이름을 문자열로 지정합니다. 이 값이 all이면 모든 오버레이에 줌 효과가 적용됩니다. 오버레이의 개수가 많을 때는 성능에 영향을 줄 수 있으므로 주의해서 사용해야 합니다. tileSpare number 0 지도의 크기보다 여유있게 로딩할 타일의 개수를 지정합니다. tileTransition boolean true 지도 타일을 전환할 때 페이드 인 효과(타일이 서서히 나타나는 것)의 사용 여부입니다. tileDuration number 지도 타일을 전환할 때 페이드 인 효과(타일이 서서히 나타나는 것)의 지속 시간 입니다. (밀리초), 기본값은 300~600ms입니다. zoom number 11 지도의 초기 줌 레벨입니다. zoomControl boolean false 줌 컨트롤의 표시 여부입니다. zoomControlOptions ZoomControlOptions 줌 컨트롤의 옵션입니다. zoomOrigin Coord | CoordLiteral null 줌 효과 시 고정하여 적용할 기준 좌표입니다. 해당 좌표가 현재 지도 화면 밖에 위치해 있으면 기본 기준 좌표를 적용합니다. blankTileImage null | string null 빈 타일 이미지 URL을 설정할 수 있는 옵션입니다. 기본값은 투명 gif 입니다. × Search results Close "},"naver.maps.AroundControl.html":{"id":"naver.maps.AroundControl.html","title":"Class: naver.maps.AroundControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API AroundControl Class: naver.maps.AroundControl naver.maps. AroundControl AroundControl 클래스는 거리뷰/항공뷰 전환 컨트롤을 정의하는 클래스입니다. 이 클래스는 panorama 서브 모듈을 로드해야 합니다. new naver.maps.AroundControl(AroundControlOptions) Parameters Name Type Description AroundControlOptions AroundControlOptions UI 컨트롤 옵션 Requires module:panorama Example var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814), aroundControl: true, aroundControlOptions: { position: naver.maps.Position.TOP_RIGHT } }); Extends naver.maps.CustomControl Requires module:panorama Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions AroundControlOptions AroundControlOptions 객체는 거리뷰/항공뷰 전환 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position TOP_RIGHT 거리뷰/항공뷰 전환 컨트롤을 배치할 위치입니다. Example var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814), size: new naver.maps.Size(800, 600), pov: { pan: -135, tilt: 29, fov: 100 }, aroundControl: true, aroundControlOptions: { position: naver.maps.Position.TOP_RIGHT } }); × Search results Close "},"naver.maps.BicycleLayer.html":{"id":"naver.maps.BicycleLayer.html","title":"Class: naver.maps.BicycleLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API BicycleLayer Class: naver.maps.BicycleLayer naver.maps. BicycleLayer BicycleLayer 클래스는 자전거 전용도로와 자전거 관련 오버레이를 하나의 지도 유형으로 나타내는 레이어를 정의합니다. new naver.maps.BicycleLayer(option) Parameters Name Type Argument Description option BicycleLayerOptions &lt;optional&gt; 레이어 옵션 (Deprecated) Properties Name Type Description name string 레이어 이름입니다. 이 레이어의 이름은 bicycle입니다. Tutorials 레이어 Extends naver.maps.LabelLayer Methods getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. (Deprecated) Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity Type Definitions BicycleLayerOptions BicycleLayerOptions 객체는 BicycleLayer를 정의하는 옵션을 나타냅니다. (Deprecated) Type: object Properties Name Type Default Description overlayMap boolean true 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. zIndex number 3 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. × Search results Close "},"naver.maps.CadastralLayer.html":{"id":"naver.maps.CadastralLayer.html","title":"Class: naver.maps.CadastralLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API CadastralLayer Class: naver.maps.CadastralLayer naver.maps. CadastralLayer CadastralLayer 클래스는 토지 경계와 지번, 지목 등의 오버레이를 하나의 지도 유형으로 나타내는 레이어를 정의합니다. new naver.maps.CadastralLayer(option) Parameters Name Type Argument Description option CadastralLayerOptions &lt;optional&gt; 레이어 옵션 (Deprecated) Properties Name Type Description name string 레이어 이름입니다. 이 레이어의 이름은 cadastral입니다. Tutorials 레이어 Extends naver.maps.LabelLayer Methods getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. (Deprecated) Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity Type Definitions CadastralLayerOptions CadastralLayerOptions 객체는 CadastralLayer를 정의하는 옵션을 나타냅니다. (Deprecated) Type: object Properties Name Type Default Description overlayMap boolean true 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. zIndex number 1 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. × Search results Close "},"naver.maps.CanvasMapType.html":{"id":"naver.maps.CanvasMapType.html","title":"Class: naver.maps.CanvasMapType","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API CanvasMapType Class: naver.maps.CanvasMapType naver.maps. CanvasMapType CanvasMapType 클래스는 캔버스 픽셀 데이터를 렌더링할 수 있는 캔버스 지도 유형을 정의하는 데 필요한 MapType 인터페이스를 정의합니다. new naver.maps.CanvasMapType(canvasMapTypeOptions) Parameters Name Type Description canvasMapTypeOptions CanvasMapTypeOptions 캔버스 타일 지도 유형 옵션 Implements naver.maps.MapType Tutorials 지도 유형 Methods getMapTypeOptions() 캔버스 타일 지도 유형의 옵션을 반환합니다. Returns Type Description CanvasMapTypeOptions 이미지 타일 지도 유형 옵션 getMaxZoom() 지도 유형의 최대 줌 레벨을 반환합니다. Returns Type Description number 최대 줌 레벨 getMinZoom() 지도 유형의 최소 줌 레벨을 반환합니다. Returns Type Description number 최소 줌 레벨 getName() 지도 유형의 이름을 반환합니다. Returns Type Description string 지도 유형의 이름 getTile(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 CanvasTile 객체를 반환합니다. 새로운 타일이 필요할 때마다 이 메서드를 호출합니다. 이때, 이 메서드는 getTileData 메서드를 호출합니다. Parameters Name Type Description x number x축의 인덱스 y number y축의 인덱스 z number 줌 레벨 Implements naver.maps.MapType#getTile Returns Type Description naver.maps.CanvasTile 캔버스 타일 객체 getTileData(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 캔버스의 픽셀 데이터를 반환합니다. 새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때, getTile 메서드를 이용해 이 메서드를 호출합니다. Parameters Name Type Description x number x축의 인덱스 y number y축의 인덱스 z number 줌 레벨 Returns Type Description ImageData 요소 영역의 픽셀 데이터 setMapTypeOptions(canvasMapTypeOptions) 캔버스 타일 지도 유형의 옵션을 설정합니다. Parameters Name Type Description canvasMapTypeOptions CanvasMapTypeOptions 캔버스 타일 지도 유형 옵션 Type Definitions CanvasMapTypeOptions CanvasMapTypeOptions 객체는 CanvasMapType을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description name string 지도 유형 컨트롤 등에서 표시할 지도 유형의 이름입니다. maxZoom number 지도 유형의 최대 줌 레벨입니다. minZoom number 지도 유형의 최소 줌 레벨입니다. projection naver.maps.Projection 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. tileSize naver.maps.Size | SizeLiteral &lt;optional&gt; (256,256) 지도 유형의 타일 크기입니다. tileDuration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간 (밀리초 단위) repeatX boolean &lt;optional&gt; false 현재 줌 레벨에서 표현할 수 있는 타일 인덱스의 영역을 벗어나면 수평축으로 타일을 반복할 것인지 여부입니다. 세계 지도 투영을 사용하는 이미지 타일 지도 유형에서 사용하기에 적합합니다. vendor string &lt;optional&gt; 지도 유형의 제작자 이름입니다. provider MapDataProvider &lt;optional&gt; 지도 유형의 데이터 제공자 정보입니다. uid string &lt;optional&gt; 지도 유형을 유일하게 구분할 수 있는 id를 지정할 수 있습니다. darktheme boolean &lt;optional&gt; false 지도 유형이 전체적으로 어두운 픽셀 데이터를 사용하는지를 지정합니다. 이 값이 true이면 지도 위 텍스트를 표시하는 기본 컨트롤의 텍스트 색상이 흰색으로 표시됩니다. getTileData function &lt;optional&gt; 전달된 타일의 인덱스와 줌 레벨에 해당하는 캔버스의 픽셀 데이터를 반환합니다. 새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때마다 이 메서드를 호출합니다. Example var CanvasMapTypeOptions = { minZoom: 0, maxZoom: 22, projection: naver.maps.EPSG3857, name: '세계 지도', tileSize: new naver.maps.Size(256, 256), repeatX: true, vendor: 'MyCorp.', provider: [{ title: \"내 지도 ver 1.0\" }, { title: \"OpenStreetMap\", link: \"http://www.openstreetmap.org/copyright\" }, { title: \"/인천광역시\", bounds: new naver.maps.LatLngBounds( new naver.maps.LatLng(36.915887, 125.690716), new naver.maps.LatLng(37.687529, 126.853252)) }], getTileData: function(x, y, z) { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); ... (생략) ... canvas.width = w; canvas.height = h; ... (생략) ... var imageData = ctx.getImageData(0, 0, w, h); return imageData.data; } }; var CanvasMapType = new naver.maps.CanvasMapType(canvasMapTypeOptions); MapDataProvider MapDataProvider 객체는 등록한 지도 유형의 데이터 제공자 정보를 나타냅니다. Type: object Properties Name Type Description title string 표시될 텍스트의 내용입니다. 빈 칸/Unicode 모두 허용하나, HTML Entity는 변환되지 않습니다. link string 표시될 텍스트를 클릭했을 때 이동할 주소입니다. 이 값이 없으면 클릭할 수 없는 요소로 생성됩니다. bounds Bounds | BoundsLiteral | ArrayOfBounds | ArrayOfBoundsLiteral 해당 텍스트를 표시할 좌표 경계입니다. 지도 화면에 해당 좌표 경계가 들어오면 텍스트를 표시합니다. 이 값이 없으면 항상 텍스트를 표시합니다. Example var mapTypeOptions = { //... provider: [{ title: \" 국토교통부\", }, { title: \",OpenStreetMap\", link: \"http://www.openstreetmap.org/copyright\" }, { title: \",Natural Earth\", link: \"http://www.naturalearthdata.com/\", bounds: NLatLngBounds( NLatLng(36.915887, 125.690716), NLatLng(37.687529, 126.853252)) }, { title: \" \\u2573 \\xa9 UNICODE ALSO OK\", bounds: [ NLatLngBounds( NLatLng(36.9604682, 126.7654746), NLatLng(38.1834428, 127.8062689)), // 서울,경기 NLatLngBounds( NLatLng(33.1940984, 126.1631646), NLatLng(33.5666617, 126.9448023)) // 제주 ] }] }; × Search results Close "},"naver.maps.CanvasTile.html":{"id":"naver.maps.CanvasTile.html","title":"Class: naver.maps.CanvasTile","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API CanvasTile Class: naver.maps.CanvasTile naver.maps. CanvasTile CanvasTile 클래스는 한 장의 HTML5 캔버스 타일을 정의합니다. new naver.maps.CanvasTile(canvasTileOptions) Parameters Name Type Argument Description canvasTileOptions CanvasTileOptions &lt;optional&gt; 캔버스 타일의 옵션 Extends naver.maps.Tile Methods appendTo(parentNode) 지정한 parentNode에 타일 HTML 요소를 추가합니다. Parameters Name Type Description parentNode HTMLElement 타일이 추가될 HTML 요소 Inherited From naver.maps.Tile#appendTo cancelFadeIn() 진행 중인 페이드 인(타일이 서서히 나타나는) 효과를 즉시 중지하고, 본래의 불투명도를 설정합니다. Inherited From naver.maps.Tile#cancelFadeIn destroy() 캔버스 타일 객체를 완전히 삭제합니다. Overrides naver.maps.Tile#destroy fadeIn(callback, startOpacity) 페이드 인(타일이 서서히 나타나는) 효과를 실행합니다. Parameters Name Type Argument Default Description callback function 페이드 인 효과가 완료되었을 때 실행할 콜백 함수입니다. startOpacity number &lt;optional&gt; 0 페이드 인 효과의 시작 불투명도입니다. Inherited From naver.maps.Tile#fadeIn getDuration() 타일의 fadeIn 효과 지속시간을 반환합니다. Inherited From naver.maps.Tile#getDuration Returns Type Description number 타일의 fadeIn animation duration getElement() 타일의 HTML 요소를 반환합니다. Inherited From naver.maps.Tile#getElement Returns Type Description HTMLElement 타일의 HTML 요소 getOffset() 타일의 오프셋(위치)을 반환합니다. Inherited From naver.maps.Tile#getOffset Returns Type Description naver.maps.Point 타일의 오프셋 getOpacity() 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Tile#getOpacity Returns Type Description number 0~1 사이의 실수. getSize() 타일의 크기를 반환합니다. Inherited From naver.maps.Tile#getSize Returns Type Description naver.maps.Size 타일의 크기 getTileIndex() 타일 인덱스를 반환합니다. Inherited From naver.maps.Tile#getTileIndex Returns Type Description TileIndex 타일 인덱스 getZIndex() 타일의 쌓임 순서를 반환합니다. Inherited From naver.maps.Tile#getZIndex Returns Type Description number 타일의 쌓임 순서 hide() 타일을 숨깁니다. Inherited From naver.maps.Tile#hide load(canvasTileOptions) 캔버스 타일을 불러옵니다. Parameters Name Type Argument Description canvasTileOptions CanvasTileOptions &lt;optional&gt; 캔버스 타일의 옵션 Overrides naver.maps.Tile#load remove() 캔버스 타일의 HTML Canvas 요소를 지도에서 삭제합니다. Overrides naver.maps.Tile#remove reset(mapType, zoom, canvasTileOptions) 지정한 mapType에 맞게 타일을 재설정합니다. Parameters Name Type Argument Description mapType naver.maps.CanvasMapType 재설정할 캔버스 지도 유형 zoom number 타일 재설정 시 적용할 지도의 줌 레벨 canvasTileOptions CanvasTileOptions &lt;optional&gt; 이미지 타일의 옵션 Overrides naver.maps.Tile#reset setBlank() 캔버스 타일의 이미지 데이터를 모두 지우고 투명한 공백 타일로 설정합니다. Overrides naver.maps.Tile#setBlank setDuration(duration) 타일의 fadeIn 효과 지속시간을 설정합니다. 단위는 밀리초 (millisecond), 기본값은 300~600ms 입니다. Parameters Name Type Description duration number 타일의 fadeIn animation duration Inherited From naver.maps.Tile#setDuration setOffset(offset) 타일이 표시될 오프셋(위치)을 지정합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#setOffset Overrides naver.maps.Tile#setOffset setOpacity(opacity) 타일의 불투명도를 지정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도 0~1 사이의 실수. Inherited From naver.maps.Tile#setOpacity setSize(size) 타일의 크기를 설정합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#setSize setTileIndex(tileIndex) 타일 인덱스를 설정합니다. Parameters Name Type Description tileIndex TileIndex 타일 인덱스 Inherited From naver.maps.Tile#setTileIndex setZIndex(zIndex) 타일의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#setZIndex show() 타일을 보이게 합니다. Inherited From naver.maps.Tile#show Type Definitions CanvasTileOptions CanvasTileOptions 객체는 naver.maps.CanvasTile을 정의하는 데 필요한 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description imageData ImageData &lt;optional&gt; 캔버스 타일에 렌더링할 이미지 데이터 opacity number &lt;optional&gt; 1 타일의 불투명도 transition boolean &lt;optional&gt; true 타일 로드 시 fadeIn 효과의 사용 여부입니다. duration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간입니다. (밀리초 단위) offset naver.maps.Point &lt;optional&gt; 타일의 오프셋입니다. zIndex number &lt;optional&gt; 0 타일의 쌓임 순서입니다. size naver.maps.Size &lt;optional&gt; 타일의 크기입니다. pane HTMLElement &lt;optional&gt; 타일이 추가될 HTML 요소입니다. Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed × Search results Close "},"naver.maps.Circle.html":{"id":"naver.maps.Circle.html","title":"Class: naver.maps.Circle","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Circle Class: naver.maps.Circle naver.maps. Circle Circle 클래스는 원 모양의 폴리곤을 정의합니다. new naver.maps.Circle(options) Parameters Name Type Argument Description options CircleOptions &lt;optional&gt; 도형 옵션 Tutorials 도형 Extends naver.maps.OverlayView Methods getAreaSize() 도형의 전체 면적을 제곱미터 단위로 반환합니다. Returns Type Description number 면적 getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getCenter() 원의 중심점 좌표를 반환합니다. Returns Type Description Coord 중심점 좌표 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description CircleOptions | any 도형 옵션 getRadius() 원의 반경을 반환합니다. 단위는 미터입니다. Returns Type Description number 원의 반경 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description CircleOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setCenter(center) 원의 중심점 좌표를 설정합니다. Parameters Name Type Description center Coord | CoordLiteral 중심점 좌표 Fires center_changed setClickable(clickable) 도형의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부 Fires clickable_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options CircleOptions 도형 옵션 Fires center_changed visible_changed zIndex_changed radius_changed setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션 값 Fires center_changed visible_changed zIndex_changed radius_changed setRadius(radius) 원의 반경을 설정합니다. Parameters Name Type Description radius number 원의 반경. 단위는 미터입니다. Fires radius_changed setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일 값 setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options CircleOptions 도형 스타일 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions CircleOptions CircleOptions 객체는 Circle을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. center Coord | CoordLiteral 도형의 중심점 좌표입니다. radius number &lt;optional&gt; 0 도형의 반경입니다. 단위는 미터입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; none 도형 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. Events center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.CustomControl.html":{"id":"naver.maps.CustomControl.html","title":"Class: naver.maps.CustomControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API CustomControl Class: naver.maps.CustomControl naver.maps. CustomControl CustomControl 클래스는 지도 위에 올리는 UI 컨트롤의 기본 클래스입니다. NAVER 지도 API v3에서 제공하는 모든 컨트롤은 이 클래스를 상속받아 구현했습니다. 사용자 정의 UI 컨트롤을 만들려면 이 클래스를 상속받아 구현해야 합니다. new naver.maps.CustomControl(html, ControlOptions) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하고, 지정한 옵션에 따라 UI 컨트롤 위치를 설정합니다. 첫 번째 인수를 생략하면 컨트롤 컨테이너만 생성합니다. Parameters Name Type Description html string UI 컨트롤 마크업 ControlOptions ControlOptions UI 컨트롤 옵션 Tutorials 사용자 정의 컨트롤 Example var map = new naver.maps.Map('map', {}), btnHtml = '&lt;a href=\"#\"&gt;&lt;span&gt;BUTTON&lt;/span&gt;&lt;/a&gt;', customControl = new naver.maps.CustomControl(btnHtml, { position: naver.maps.Position.TOP_LEFT }); customControl.setMap(map); Extends naver.maps.KVO Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Type Definitions ControlOptions ControlOptions 객체는 UI 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position TOP_RIGHT 컨트롤을 배치할 위치입니다. × Search results Close "},"naver.maps.Data.html":{"id":"naver.maps.Data.html","title":"Class: naver.maps.Data","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Data Class: naver.maps.Data naver.maps. Data Data 클래스는 GeoJSON, KML, GPX 지리 공간 데이터를 기반으로 지도 위에 점, 선, 도형 등을 표현하는 데이터 레이어를 정의합니다. Map 객체는 기본적으로 data라는 이름의 Data 인스턴스를 속성으로 포함하고 있습니다. 따라서, 일반적인 상황에서는 명시적으로 새로운 객체를 생성하지 않습니다. new naver.maps.Data() Tutorials 데이터 레이어 Extends naver.maps.KVO Methods addFeature(feature, autoStyle) Feature 객체를 데이터 레이어에 추가합니다. Parameters Name Type Description feature naver.maps.Feature 추가할 Feature 객체 autoStyle boolean 스타일 적용 유무. Geometry 객체의 Foreign Members mantle_properties 내에 지도 API에서 사용하는 스타일이 정의되어 있으면 자동으로 해당 스타일을 적용합니다. Fires addfeature Returns Type Description naver.maps.Feature Feature 객체 addGeoJson(geojson, autoStyle) GeoJSON 형식의 지리 공간 데이터를 추가합니다. 지정한 데이터의 모든 Feature를 추가합니다. Parameters Name Type Description geojson GeoJSON 추가할 GeoJSON 객체 autoStyle boolean 스타일 적용 유무. Geometry 객체의 Foreign Members mantle_properties 내에 지도 API에서 사용하는 스타일이 정의되어 있으면 자동으로 해당 스타일을 적용합니다. Returns Type Description Array.&lt;naver.maps.Feature&gt; Feature 객체의 배열 addGpx(xmlDoc, autoStyle) GPX 형식의 지리 공간 데이터를 추가합니다. 내부적으로 GeoJSON 형식의 데이터로 변환합니다. Parameters Name Type Description xmlDoc GPX 추가할 GPX 객체 autoStyle boolean 스타일 적용 유무. 이 값이 true이면, GPX 내에 정의된 GPX Style Schema의 Line 스타일을 자동으로 적용합니다. 그렇지 않으면 스타일을 적용하지 않습니다. Returns Type Description Array.&lt;naver.maps.Feature&gt; Feature 객체의 배열 addKml(xmlDoc, autoStyle) KML 형식의 지리 공간 데이터를 추가합니다. 내부적으로 GeoJSON 형식의 데이터로 변환합니다. Parameters Name Type Description xmlDoc KML 추가할 KML 객체 autoStyle boolean 스타일 적용 유무. 이 값이 true이면, KML 내에 정의된 도형 스타일을 자동으로 적용합니다. 그렇지 않으면 스타일을 적용하지 않습니다. Returns Type Description Array.&lt;naver.maps.Feature&gt; Feature 객체의 배열 forEach(callback) 데이터 레이어에 있는 모든 Feature 객체를 순서대로 돌며 콜백 함수를 수행합니다. Parameters Name Type Description callback function 데이터 레이어에 포함된 모든 Feature 객체를 순서대로 돌며 수행할 콜백 함수 Properties Name Type Description feature naver.maps.Feature Feature 객체 index number 해당 Feature 객체의 인덱스 getAllFeature() 데이터 레이어에 추가된 모든 Feature 객체의 배열을 반환합니다. Returns Type Description Array.&lt;naver.maps.Feature&gt; Feature 객체의 배열 getFeatureById(id) 지정된 id에 해당하는 Feature 객체를 반환합니다. Parameters Name Type Description id string | number Feature 객체의 고유한 id Returns Type Description naver.maps.Feature Feature 객체 getMap() 현재 데이터 레이어가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 getStyle() GeoJSON 지리 공간 데이터의 표현 스타일을 반환합니다. Returns Type Description StyleOptions | StylingFunction StyleOptions 객체 또는 StylingFunction overrideStyle(feature, style) 적용된 데이터 표현 스타일을 재정의합니다. 재정의된 스타일만 반영됩니다. Parameters Name Type Description feature naver.maps.Feature Feature 객체 style StyleOptions StyleOptions 객체 removeFeature(feature) Feature 객체를 데이터 레이어에서 삭제합니다. Parameters Name Type Description feature naver.maps.Feature 삭제할 Feature 객체 Fires removefeature Returns Type Description string | number removedFeatureId - 삭제된 Feature 객체의 id removeGeoJson(geojson) GeoJSON 형식의 지리 공간 데이터를 삭제합니다. 지정한 데이터의 모든 Feature를 삭제합니다. Parameters Name Type Description geojson GeoJSON 삭제할 GeoJSON 객체 revertStyle(feature) 재정의된 데이터 표현 스타일을 기존에 setStyle 메서드를 이용해 지정한 스타일로 복원합니다. 인수로 Feature 객체를 전달하면, 해당 Feature 객체의 스타일만 복원합니다. Parameters Name Type Argument Description feature naver.maps.Feature &lt;optional&gt; 복원할 Feature 객체 setMap(map) 데이터 레이어를 지도에 추가합니다. 인수로 null을 전달하면 데이터 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 데이터 레이어를 추가할 Map 객체 setStyle(style) GeoJSON 지리 공간 데이터의 표현 스타일을 설정합니다. 데이터를 표현하는 스타일은 StyleOptions 객체 리터럴 또는 스타일을 처리하는 StylingFunction 함수를 이용해 설정할 수 있습니다. Parameters Name Type Description style StyleOptions | StylingFunction 데이터 표현 스타일 Example map.data.setStyle(function(feature) { var color = 'red'; if (feature.getProperty('isColorful')) { color = feature.getProperty('color'); } return { fillColor: color, strokeColor: color, strokeWeight: 2, icon: null }; }); toGeoJson() 데이터 레이어에 있는 모든 Feature 객체를 컬렉션으로 포함하는, 완전한 GeoJSON 지리 공간 데이터 객체를 반환합니다. 이때, 반환된 GeoJSON의 모든 Feature는 추가될 당시에 id가 존재하지 않았다면 임의의 고유한 id가 부여됩니다. Returns Type Description GeoJSON GeoJSON 객체 Type Definitions FeatureEvent 데이터 레이어에 있는 Feature 객체가 변경되었을 때 전달되는 이벤트 객체입니다. Type: event Properties Name Type Description feature naver.maps.Feature 이벤트가 발생한 Feature 객체입니다. PointerEvent GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 마우스 또는 터치 이벤트가 발생하면 전달되는 포인터 이벤트 객체입니다. Type: event Properties Name Type Description coord Coord 이벤트가 발생한 위치의 지도 좌표입니다. point naver.maps.Point 이벤트가 발생한 위치의 세계 좌표입니다. offset naver.maps.Point 이벤트가 발생한 위치의 픽셀 좌표입니다. pointerEvent DOMEvent 이벤트가 발생한 시점의 DOM 이벤트 객체입니다. feature naver.maps.Feature 이벤트가 발생한 위치의 Feature 객체입니다. PropertyEvent 데이터 레이어에 있는 Feature 객체의 부가 정보(properties)가 변경되었을 때 전달되는 이벤트 객체입니다. Type: event Properties Name Type Description feature naver.maps.Feature 이벤트가 발생한 Feature 객체입니다. name string 변경된 부가 정보의 이름(키)입니다. oldValue any 해당 부가 정보의 변경 전 값입니다. newValue any 해당 부가 정보의 변경 후 값입니다. StyleOptions StyleOptions 객체는 데이터 레이어에서 기하 구조의 스타일을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description strokeColor string &lt;optional&gt; #000 기하 구조의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeOpacity number &lt;optional&gt; 0.8 기하 구조의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeWeight number &lt;optional&gt; 3 기하 구조의 선 두께입니다. fillColor string &lt;optional&gt; #000 기하 구조 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 0.3 기하 구조 영역의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; true 기하 구조의 클릭 허용 여부입니다. icon string | ImageIcon | SymbolIcon | HtmlIcon &lt;optional&gt; 마커의 모양입니다. shape MarkerShape &lt;optional&gt; 마커의 인터랙션 영역입니다. title string &lt;optional&gt; null 마커에 마우스 포인터를 올리면 나타나는 툴팁 문자열입니다. 이 속성을 설정하지 않거나 빈 문자열로 설정하면 툴팁을 노출하지 않습니다. visible boolean &lt;optional&gt; true 기하 구조의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 기하 구조의 쌓임 순서입니다. StylingFunction(feature) 데이터 레이어에 있는 Feature 객체의 스타일을 처리할 수 있도록 Feature 객체를 순서대로 돌며 수행되는 함수입니다. 이때 반환값은 반드시 StyleOptions 객체 리터럴이어야 합니다. Parameters Name Type Description feature naver.maps.Feature Feature 객체 Returns Type Description StyleOptions StyleOptions 객체 Events addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. × Search results Close "},"naver.maps.drawing.html":{"id":"naver.maps.drawing.html","title":"Namespace: naver.maps.drawing","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API drawing Namespace: naver.maps.drawing naver.maps. drawing 그리기 도구 서브 모듈의 네임스페이스입니다. Classes DrawingManager Type Definitions DrawingEvent DrawingEvent는 DrawingManager 인스턴스에서 발생하는 이벤트를 정의합니다. Type: object Properties Name Type Default Description ADD string 'drawing_added' 그리기 도구를 사용해 오버레이를 생성하면 발생합니다. REMOVE string 'drawing_removed' 그려진 오버레이를 마우스 오른쪽 버튼으로 클릭해 삭제하면 발생합니다. SELECT string 'drawing_selected' 그려진 오버레이를 선택하면 발생합니다. {overlay}Added string 'circleAdded' 등, 오버레이의 유형에 따라 오버레이를 생성하면 발생합니다. {overlay}Removed string 'circleRemoved' 등, 오버레이의 유형에 따라 오버레이를 삭제하면 발생합니다. {overlay}Selected string 'circleSelected' 등, 오버레이의 유형에 따라 오버레이를 선택하면 발생합니다. DrawingMode DrawingMode는 그리기 모드를 정의합니다. Type: object Properties Name Type Default Description HAND number 0 선택 모드입니다. RECTANGLE number 1 사각형 그리기 모드입니다. ELLIPSE number 2 원 그리기 모드입니다. POLYLINE number 3 폴리라인 그리기 모드입니다. ARROWLINE number 4 화살표가 있는 폴리라인 그리기 모드입니다. POLYGON number 5 폴리곤 그리기 모드입니다. MARKER number 6 마커 그리기 모드입니다. DrawingStyle DrawingStyle은 컨트롤 집합의 스타일을 정의합니다. Type: object Properties Name Type Default Description HORIZONTAL number 0 그리기 컨트롤이 가로 한 줄로 나타납니다. VERTICAL number 1 그리기 컨트롤이 세로 한 줄로 나타납니다. HORIZONTAL_2 number 2 그리기 컨트롤이 가로 두 줄로 나타납니다. 홀수 개의 그리기 모드를 정의한 경우, 마지막 그리기 모드는 아이콘으로 표시되지 않습니다. VERTICAL_2 number 3 그리기 컨트롤이 세로 한 줄로 나타납니다. 홀수 개의 그리기 모드를 정의한 경우, 마지막 그리기 모드는 아이콘으로 표시되지 않습니다. × Search results Close "},"naver.maps.drawing.DrawingManager.html":{"id":"naver.maps.drawing.DrawingManager.html","title":"Class: naver.maps.drawing.DrawingManager","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API DrawingManager Class: naver.maps.drawing.DrawingManager naver.maps.drawing. DrawingManager DrawingManager 클래스는 사용자가 지도에 사각형, 타원, 폴리라인, 화살표가 있는 폴리라인, 폴리곤, 마커를 그릴 수 있는 그래픽 인터페이스를 제공합니다. 원은 타원으로 대체합니다. new naver.maps.drawing.DrawingManager(options) Parameters Name Type Argument Description options DrawingOptions &lt;optional&gt; 옵션 Tutorials 그리기 도구 생성 및 기본 동작 See 그리기 도구 기본 예제 Example var map = new naver.maps.Map('map'); var drawingManager = new naver.maps.drawing.DrawingManager(); drawingManager.setMap(map); Extends naver.maps.KVO Methods addDrawing(overlay, drawingMode, id) 오버레이 객체를 DrawingManager에 추가합니다. 추가된 객체는 마우스 왼쪽 버튼을 클릭해 편집하거나 오른쪽 버튼을 클릭해 삭제할 수 있습니다. Parameters Name Type Argument Description overlay DrawingOverlay 오버레이 객체, {naver.maps.Circle}은 지원하지 않습니다. drawingMode naver.maps.drawing.DrawingMode 추가할 오버레이 객체의 그리기 모드. id string &lt;optional&gt; 추가할 오버레이 객체에 지정할 id. 정의하지 않는 경우 임의로 정의됩니다. addListener(eventName, listener) 현재 객체의 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. Parameters Name Type Description eventName naver.maps.drawing.DrawingEvent 이벤트 이름 listener function 이벤트 리스너 Properties Name Type Description overlay DrawingOverlay 대상 오버레이 객체 Overrides naver.maps.KVO#addListener Returns Type Description MapEventListener 지도 이벤트 리스너 객체 Example var dm = new naver.maps.drawing.DrawingManager({ map: map }); dm.addListener(naver.maps.drawing.DrawingEvent.SELECT, function(overlay) { console.log(overlay.id, overlay.name); }); destroy() DrawingManager의 모든 이벤트 및 그려진 도형, 기타 DOM 요소를 모두 제거합니다. getDrawing(id) 그려진 도형 중 해당 id에 해당하는 오버레이 객체를 반환합니다. Parameters Name Type Description id string 오버레이 객체의 id Returns Type Description DrawingOverlay 오버레이 객체 getDrawings() 그려진 도형/마커들을 id: 오버레이 객체의 쌍으로 반환합니다. Returns Type Description Object.&lt;String, DrawingOverlay&gt; 그려진 오버레이의 객체 쌍 getMap() 현재 DrawingManager가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 removeDrawing(overlayOrId) 오버레이 객체를 DrawingManager에서 삭제합니다. Parameters Name Type Description overlayOrId DrawingOverlay | string 오버레이 혹은 오버레이의 id removeListener() 리스너를 제거합니다. Overrides naver.maps.KVO#removeListener Example var dm = new naver.maps.drawing.DrawingManager({ map: map, drawingControls: [naver.maps.drawing.DrawingMode.RECTANGLE] }); var listener = dm.addListener('rectangle_added', function(overlay) { console.log(overlay.id, overlay.name); }); naver.maps.Event.removeListener(listener); setMap(map) DrawingManager를 지도에 추가합니다. 인수로 null을 전달하면 그리기 도구 컨트롤을 지도에서 제거하고 인터랙션을 정지합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 toGeoJson() 그려진 도형들을 geojson 형식 객체로 반환합니다. See 오버레이 데이터 추출 및 복원하기 Returns Type Description Object geojson 객체 Type Definitions controlPointOptions 도형 편집 시 꼭지점이나 선분의 중간점에 표시되는 제어점의 스타일입니다. Type: object Properties Name Type Description anchorPointOptions CircleOptions 도형의 꼭지점에 표시될 제어점의 옵션입니다. 위치 또는 지도의 값을 전달하면 무시됩니다. midPointOptions CircleOptions Polyline|Arrowline|Polygon 도형의 중간점에 표시될 제어점의 옵션입니다. 위치 또는 지도의 값을 전달하면 무시됩니다. drawingControlOptions 그리기 도구 컨트롤의 위치와 정렬 방식을 정의합니다. Type: object Properties Name Type Argument Default Description position naver.maps.Position &lt;optional&gt; TOP_CENTER 그리기 도구를 배치할 위치입니다. style naver.maps.drawing.DrawingStyle &lt;optional&gt; HORIZONTAL 그리기 도구의 정렬 방식입니다. DrawingOptions DrawingOptions 객체는 그리기 모듈의 세부 설정을 정의합니다. 표시할 그리기 도구 컨트롤 집합, 위치 및 최초 그리기 상태 도형의 옵션 편집 제어점 옵션 Type: object Properties Name Type Argument Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. drawingControl Array.&lt;naver.maps.drawing.DrawingMode&gt; &lt;optional&gt; 지도에 표시할 그리기 도구 목록입니다. 그리기 도구의 순서는 배열에서 선언된 순서와 일치합니다. null로 정의할 경우 그리기 도구가 표시되지 않습니다. 이 옵션을 정의하지 않은 경우 기본적으로 다음과 같이 표시됩니다. drawingControlOptions drawingControlOptions &lt;optional&gt; 그리기 도구를 표시할 옵션입니다. drawingMode naver.maps.drawing.DrawingMode &lt;optional&gt; 초기 그리기 상태를 정의합니다. 정의되지 않은 경우 HAND 모드로 선택됩니다. controlPointOptions controlPointOptions &lt;optional&gt; 그려진 도형을 선택/편집 시 나타나는 제어점의 옵션입니다. rectangleOptions RectangleOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Rectangle을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. ellipseOptions EllipseOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Ellipse을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. polylineOptions PolylineOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Polyline을 정의하는 옵션을 나타냅니다. startIcon, endIcon, 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. arrowlineOptions PolylineOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 화살표가 있는 Polyline을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. startIcon이나 endIcon을 정의하지 않은 경우, 기본적으로 endIcon이 표시됩니다. polygonOptions PolygonOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Polygon을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. markerOptions MarkerOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Marker을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. See 그리기 도구 옵션 활용하기 Example var map = new naver.maps.Map('map'); var drawingManager = new naver.maps.drawing.DrawingManager({ map: map, // 표시할 컨트롤 집합. drawingControl: [ naver.maps.drawing.DrawingMode.RECTANGLE, naver.maps.drawing.DrawingMode.ELLIPSE, naver.maps.drawing.DrawingMode.POLYLINE, naver.maps.drawing.DrawingMode.ARROWLINE, naver.maps.drawing.DrawingMode.POLYGON ], // 표시할 컨트롤의 위치 및 정렬 drawingControlOptions: { position: naver.maps.Position.LEFT_CENTER, style: naver.maps.drawing.DrawingStyle.HORIZONTAL_2 }, // 편집 제어점 옵션 controlPointOptions: { anchorPointOptions: { radius: 10, fillColor: '#ff0000', strokeColor: '#0000ff', strokeWeight: 2 }, midPointOptions: { radius: 10, fillColor: '#ff0000', strokeColor: '#0000ff', strokeWeight: 2, fillOpacity: 0.5 } }, // 오버레이의 스타일, 정의가 없는 경우 각 오버레이의 기본값을 사용 rectangleOptions: { fillColor: '#ff0000', fillOpacity: 0.5, strokeWeight: 3, strokeColor: '#ff0000' }, ellipseOptions: {}, polylineOptions: { // 화살표 아이콘 계열 옵션(startIcon, endIcon)은 무시됨 strokeColor: '#222', strokeWeight: 3 }, arrowlineOptions: { // startIcon || endIcon 옵션이 없으면 endIcon 을 BLOCK_OPEN 으로 설정합니다. strokeWeight: 3 }, polygonOptions: { strokeColor: '#ffd100', fillColor: '#ffff00', fillOpacity: 0.5, strokeWeight: 3 } }); × Search results Close "},"naver.maps.Ellipse.html":{"id":"naver.maps.Ellipse.html","title":"Class: naver.maps.Ellipse","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Ellipse Class: naver.maps.Ellipse naver.maps. Ellipse Ellipse 클래스는 타원 모양의 폴리곤을 정의합니다. new naver.maps.Ellipse() Tutorials 도형 Extends naver.maps.OverlayView Methods getAreaSize() 도형의 전체 면적을 제곱미터 단위로 반환합니다. 타원의 특성상 근사치입니다. Returns Type Description number 면적 getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description EllipseOptions | any 도형 옵션 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description EllipseOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setBounds(bounds) 도형의 좌표 경계를 설정합니다. Parameters Name Type Description bounds Bounds | BoundsLiteral 좌표 경계 Fires bounds_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션 값 Fires bounds_changed clickable_changed visible_changed zIndex_changed setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options EllipseOptions 도형 옵션 Fires bounds_changed clickable_changed visible_changed zIndex_changed setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일 값 setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options EllipseOptions 도형 스타일 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions EllipseOptions EllipseOptions 객체는 Ellipse를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. bounds Bounds | BoundsLiteral 도형의 좌표 경계입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; none 도형 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. Events bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.EPSG3857.html":{"id":"naver.maps.EPSG3857.html","title":"StaticObjects: EPSG3857","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API EPSG3857 StaticObjects: EPSG3857 naver.maps. EPSG3857 EPSG3857 객체는 EPSG:3857 좌표계를 나타내는 것으로 EPSG3857 좌표계와 관련된 좌표 변환 메서드를 제공합니다. EPSG:3857은 웹 기반 지도 서비스에서 일반적으로 사용하는 좌표계이며, 네이버 세계 지도 유형에서도 사용합니다. 원본 Projection 객체의 세계 좌표는 0~1 사이의 값입니다. Tutorials 지도 투영과 좌표 체계 Extends naver.maps.Projection Methods fromCoordToPoint(coord) 지정한 지도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord Coord 지도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToPoint(latlng) 지정한 위/경도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromPointToLatLng(point) 지정한 세계 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 getDestinationCoord(fromLatLng, angle, meter) 지정한 좌표에서 북쪽을 기준으로 지정한 각도(시계 방향)와 거리만큼 떨어진 위치의 지도 좌표를 반환합니다. Parameters Name Type Description fromLatLng naver.maps.LatLng 기준이 되는 위/경도 좌표 angle number 지정한 좌표에서 북쪽을 기준으로 한 시계 방향의 각도(0-북, 90-동, 180-남, 270-서). 이 값이 0이면 현재의 좌표에서 북쪽을 가리키며, 90이면 동쪽을 가리킵니다. meter number 지정한 좌표에서 구하려는 좌표까지의 거리(미터) Returns Type Description naver.maps.LatLng 새로운 위/경도 좌표 getDistance(latlng1, latlng2) 지정한 두 위/경도 좌표 간의 거리를 반환합니다. 단위는 미터입니다. Parameters Name Type Description latlng1 naver.maps.LatLng 위/경도 좌표 latlng2 naver.maps.LatLng 위/경도 좌표 Returns Type Description number 거리 × Search results Close "},"naver.maps.EPSG3857Coord.html":{"id":"naver.maps.EPSG3857Coord.html","title":"StaticObjects: EPSG3857Coord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API EPSG3857Coord StaticObjects: EPSG3857Coord naver.maps. EPSG3857Coord EPSG3857Coord 객체는 EPSG:3857 평면 좌표계를 기본 좌표계로 사용하는 투영 객체입니다. 기존의 EPSG3857 투영 객체와 유사하지만, 실제 사용 좌표계는 위/경도 좌표계가 아닌 EPSG:3857 평면 좌표계입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.EPSG3857 Methods fromCoordToLatLng(coord) 지정한 EPSG3857 평면 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromCoordToPoint(coord) 지정한 EPSG3857 평면 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromEPSG3857ToLatLng(coord) 지정한 EPSG3857 평면 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromEPSG3857ToPoint(coord) 지정한 EPSG3857 평면 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToCoord(coord) 지정한 위/경도 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description coord Coord 위/경도 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromLatLngToEPSG3857(coord) 지정한 위/경도 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description coord Coord 위/경도 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromPointToEPSG3857(point) 지정한 세계 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 × Search results Close "},"naver.maps.Event.html":{"id":"naver.maps.Event.html","title":"StaticObjects: Event","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Event StaticObjects: Event naver.maps. Event NAVER 지도 API의 이벤트 시스템을 구현합니다. Tutorials UI 이벤트 Methods &lt;static&gt; addDOMListener(element, eventName, listener) 대상 HTMLElement에서 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 등록된 리스너는 clearListener 메서드를 이용해 제거할 수 없습니다. Parameters Name Type Description element HTMLElement 이벤트 대상 HTMLElement eventName string 이벤트 이름 listener function 이벤트 리스너 Tutorials DOM 이벤트 Returns Type Description DOMEventListener DOM 이벤트 리스닝 객체 &lt;static&gt; addListener(target, eventName, listener) 대상 객체에서 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. Parameters Name Type Description target object 이벤트 대상 객체 eventName string 이벤트 이름 listener function 이벤트 리스너 Returns Type Description MapEventListener 이벤트 리스닝 객체 &lt;static&gt; clearInstanceListeners(target) 대상 객체에 등록된 리스너를 모두 제거합니다. Parameters Name Type Description target object 이벤트 대상 객체 &lt;static&gt; clearListeners(target, fromEventName) 대상 객체에서 특정 이벤트 알림의 리스너를 제거합니다. Parameters Name Type Description target object 이벤트의 대상 객체 fromEventName string 이벤트 이름 &lt;static&gt; forward(source, fromEventName, target, toEventName) 원본 객체 source에서 이벤트 알림을 받아, 대상 객체 target으로 동일한 이벤트 알림을 보냅니다. Parameters Name Type Argument Description source object 이벤트의 원본 객체 fromEventName string 이벤트 이름 target object 이벤트 대상 객체 toEventName string &lt;optional&gt; 송신할 이벤트 이름. toEventName을 지정하면 fromEventName으로 발생한 이벤트를 toEventName에서 지정한 이름으로 전파합니다. Returns Type Description MapEventListener 이벤트 리스닝 객체 &lt;static&gt; hasListener(target, eventName) 대상 객체에 이벤트 알림이 등록되었는지 여부를 확인합니다. Parameters Name Type Description target object 확인할 대상 객체 eventName string 이벤트 이름 Returns Type boolean &lt;static&gt; once(target, eventName, listener) 대상 객체에서 한 번만 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. Parameters Name Type Description target object 이벤트 대상 객체 eventName string 이벤트 이름 listener function 이벤트 리스너 Returns Type Description MapEventListener 이벤트 리스닝 객체 &lt;static&gt; removeDOMListener(element, eventName, listener) 대상 HTMLElement에서 특정 이벤트 알림의 리스너를 제거합니다. Parameters Name Type Description element HTMLElement 이벤트 대상 HTMLElement eventName string 이벤트 이름 listener function 이벤트 리스너 Tutorials DOM 이벤트 &lt;static&gt; removeDOMListener(listeners) 대상 HTMLElement에서 특정 이벤트 알림의 리스너를 제거합니다. Parameters Name Type Description listeners DOMEventListener | Array.&lt;DOMEventListener&gt; DOM 이벤트 리스닝 객체 또는 DOM 이벤트 리스닝 객체의 배열 &lt;static&gt; removeListener(listeners) 특정 이벤트 알림의 리스너를 제거합니다. Parameters Name Type Description listeners MapEventListener | Array.&lt;MapEventListener&gt; 이벤트 리스닝 객체 또는 이벤트 리스닝 객체의 배열 &lt;static&gt; resumeDispatch(target, eventName) 대상 객체의 정지된 특정 이벤트 알림을 재개합니다. Parameters Name Type Description target object 이벤트 대상 객체 eventName string 이벤트 이름 &lt;static&gt; stopDispatch(target, eventName) 대상 객체의 특정 이벤트 알림을 정지시킵니다. resumeDispatch를 이용해 이벤트 알림을 재개하기 전까지는 해당 이벤트 발생 시 이벤트 핸들러를 호출하지 않습니다. Parameters Name Type Description target object 이벤트 대상 객체 eventName string 이벤트 이름 &lt;static&gt; trigger(target, eventName, eventObject) 대상 객체에 이벤트 알림을 발생시킵니다. 세 번째 인수를 생략하면 target에서 발생할 수 있는 기본 이벤트 객체를 전달합니다. 기본 이벤트 객체는 target의 _getDefaultEventParameters 메서드를 참조합니다. Parameters Name Type Argument Description target object 이벤트 대상 객체 eventName string 이벤트 이름 eventObject any &lt;optional&gt; &lt;repeatable&gt; 이벤트 리스너에 전달할 이벤트 객체 × Search results Close "},"naver.maps.Feature.html":{"id":"naver.maps.Feature.html","title":"Class: naver.maps.Feature","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Feature Class: naver.maps.Feature naver.maps. Feature Feature 클래스는 FeatureCollection 타입의 형상 정보 모음에서 Feature 타입의 개별 GeoJSON 객체를 추상화합니다. new naver.maps.Feature(rawFeature) Parameters Name Type Description rawFeature object Feature 타입의 GeoJSON 객체 Tutorials 데이터 레이어 Extends naver.maps.KVO Methods forEachOverlay(callback) Feature 객체의 오버레이를 순서대로 돌며 콜백 함수를 수행합니다. Parameters Name Type Description callback forEachOverlayCallback 모든 오버레이를 순서대로 돌며 수행할 콜백 함수 getBounds() Feature 객체의 좌표 경계를 반환합니다. Returns Type Description bounds 형상 정보의 좌표 경계 getGeometries() Feature 객체의 Geometry 객체를 배열 형태로 반환합니다. Returns Type Description Array.&lt;naver.maps.Geometry&gt; Geometry 객체 배열 getId() Feature 객체의 고유한 id를 반환합니다. Returns Type Description string 고유한 id getOverlays() 형상 정보를 표현하는 데 사용한 모든 오버레이를 반환합니다. Returns Type Description Array.&lt;naver.maps.Marker&gt; | Array.&lt;naver.maps.Polyline&gt; | Array.&lt;naver.maps.Polygon&gt; 모든 오버레이 객체 배열 getProperty(name) 지정한 이름의 부가 정보(properties) 값을 반환합니다. Parameters Name Type Description name string 부가 정보의 이름 Returns Type Description any 지정한 부가 정보의 값 getRaw() 원시 데이터인 Feature 타입의 GeoJSON 객체를 반환합니다. Returns Type Description GeoJSON Feature 타입의 GeoJSON 객체 setProperty(name, value) 지정한 이름의 부가 정보(properties)를 설정합니다. Parameters Name Type Description name string 설정할 부가 정보의 이름 value any 설정할 부가 정보의 값 Fires property_changed setStyle(styleOptions) Feature 객체의 오버레이의 표현 스타일을 설정합니다. 모든 오버레이에 동일한 스타일이 적용됩니다. Parameters Name Type Description styleOptions naver.maps.Data.StyleOptions 데이터 표현 스타일 Type Definitions forEachOverlayCallback(overlay, index) Feature 객체의 오버레이를 순서대로 돌며 수행되는 콜백 함수입니다. Parameters Name Type Description overlay naver.maps.Marker | naver.maps.Polyline | naver.maps.Polygon 오버레이 객체 index number 해당 오버레이 인덱스 Events click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. × Search results Close "},"naver.maps.FlightSpot.html":{"id":"naver.maps.FlightSpot.html","title":"Class: naver.maps.FlightSpot","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API FlightSpot Class: naver.maps.FlightSpot naver.maps. FlightSpot FlightSpot 클래스는 지도 위에 주변 항공뷰 마커를 표시하는 레이어를 정의합니다. 기본적으로 마커 클러스터링을 지원합니다. 이 클래스는 panorama 서브 모듈을 로드해야 합니다. new naver.maps.FlightSpot() Requires module:panorama Example 지도 위에 항공뷰를 표시하고 항공뷰 선택 시 파노라마 `id` 출력 후 항공뷰를 제거하는 예제 var map = new naver.maps.Map(\"map\", { center: new naver.maps.LatLng(37.3599605, 127.1058814) }); var flightSpot = new naver.maps.FlightSpot(); flightSpot.setMap(map); naver.maps.Event.addListener(flightSpot, \"poi_clicked\", function(panoId) { alert(panoId); flightSpot.setMap(null); }); Extends naver.maps.KVO Requires module:panorama Methods getMap() 현재 주변 항공뷰 마커가 추가된 지도 객체를 반환합니다. Returns Type Description naver.maps.Map | null 지도 객체 setMap(map) 주변 항공뷰 마커를 지도에 추가합니다. 인수로 null을 전달하면 주변 항공뷰 마커를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Events poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id × Search results Close "},"naver.maps.Geometry.html":{"id":"naver.maps.Geometry.html","title":"Class: naver.maps.Geometry","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Geometry Class: naver.maps.Geometry naver.maps. Geometry Geometry 클래스는 Feature 타입의 GeoJSON 객체의 geometry 속성을 추상화합니다. 일반적으로 Feature 객체를 통해 초기화하므로 별도의 인스턴스를 생성하지 않습니다. new naver.maps.Geometry(rawGeometry) Parameters Name Type Description rawGeometry object Feature 타입의 GeoJSON 객체의 geometry 속성 Tutorials 데이터 레이어 Extends naver.maps.KVO Methods getCoords() Geometry 객체의 좌표 배열을 반환합니다. 이 값은 Feature 타입의 GeoJSON 객체의 geometry 속성에서 coordinates 속성을 파싱한 것입니다. Feature에서 다음과 같은 오버레이를 생성할 때 사용합니다. Marker Polyline Polygon Returns Type Description ArrayOfCoords 점, 선, 면 등의 기하 구조의 좌표 getType() Geometry 객체의 타입을 반환합니다. Point MultiPoint LineString MultiLineString Polygon MultiPolygon Feature에서 다음과 같은 오버레이를 생성할 때 사용합니다. Marker Polyline Polygon Returns Type Description string Geometry 객체의 타입 × Search results Close "},"naver.maps.GroundOverlay.html":{"id":"naver.maps.GroundOverlay.html","title":"Class: naver.maps.GroundOverlay","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API GroundOverlay Class: naver.maps.GroundOverlay naver.maps. GroundOverlay GroundOverlay 클래스는 지도 위에 올리는 사각형 이미지 오버레이를 정의합니다. new naver.maps.GroundOverlay(url, bounds, options) Parameters Name Type Argument Description url string 이미지 URL bounds Bounds | BoundsLiteral 좌표 경계 options GroundOverlayOptions &lt;optional&gt; 지상 오버레이 옵션 Tutorials 지상 오버레이 Extends naver.maps.OverlayView Methods getBounds() 지상 오버레이의 좌표 경계를 반환합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOpacity() 지상 오버레이의 불투명도를 반환합니다. Returns Type Description number 불투명도 getUrl() 지상 오버레이의 이미지 URL을 반환합니다. Returns Type Description string 이미지 URL setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOpacity(opacity) 지상 오버레이의 불투명도를 설정합니다. Parameters Name Type Description opacity number 불투명도 Type Definitions GroundOverlayOptions GroundOverlayOptions 객체는 GroundOverlay를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description clickable boolean &lt;optional&gt; true 지상 오버레이의 클릭 허용 여부입니다. 이 값이 false이면 지상 오버레이는 사용자 인터랙션을 받지 않습니다. map naver.maps.Map | null &lt;optional&gt; 지상 오버레이를 표시할 지도 객체입니다. opacity number &lt;optional&gt; 1 지상 오버레이의 불투명도입니다. 0과 1 사이의 값을 사용합니다. Events click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. × Search results Close "},"naver.maps.ImageMapType.html":{"id":"naver.maps.ImageMapType.html","title":"Class: naver.maps.ImageMapType","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API ImageMapType Class: naver.maps.ImageMapType naver.maps. ImageMapType ImageMapType 클래스는 이미지 타일을 렌더링할 수 있는 이미지 지도 유형을 정의하는 데 필요한 MapType 인터페이스를 정의합니다. new naver.maps.ImageMapType(imageMapTypeOptions) Parameters Name Type Description imageMapTypeOptions ImageMapTypeOptions 이미지 타일 지도 유형 옵션 Implements naver.maps.MapType Tutorials 지도 유형 Methods getMapTypeOptions() 이미지 타일 지도 유형의 옵션을 반환합니다. Returns Type Description ImageMapTypeOptions 이미지 타일 지도 유형 옵션 getMaxZoom() 지도 유형의 최대 줌 레벨을 반환합니다. Returns Type Description number 최대 줌 레벨 getMinZoom() 지도 유형의 최소 줌 레벨을 반환합니다. Returns Type Description number 최소 줌 레벨 getName() 지도 유형의 이름을 반환합니다. Returns Type Description string 지도 유형의 이름 getTile(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 ImageTile 객체를 반환합니다. 새로운 타일이 필요할 때마다 이 메서드를 호출합니다. 이때, 이 메서드는 getTileUrls 메서드를 호출합니다. Parameters Name Type Description x number x 축의 인덱스 y number y 축의 인덱스 z number 줌 레벨 Implements naver.maps.MapType#getTile Returns Type Description naver.maps.ImageTile 이미지 타일 객체 getTileUrls(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 타일 URL을 반환합니다. 새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때, getTile의 tileSet 속성을 사용하거나 getTileUrl 메서드를 호출합니다. Parameters Name Type Description x number x 축의 인덱스 y number y 축의 인덱스 z number 줌 레벨 Returns Type Description Array.&lt;string&gt; 타일 URL 목록 setMapTypeOptions(imageMapTypeOptions) 이미지 타일 지도 유형의 옵션을 설정합니다. Parameters Name Type Description imageMapTypeOptions ImageMapTypeOptions 이미지 타일 지도 유형 옵션 Type Definitions ImageMapTypeOptions ImageMapTypeOptions 객체는 ImageMapType을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description name string 지도 유형 컨트롤 등에서 표시할 지도 유형의 이름입니다. maxZoom number 지도 유형의 최대 줌 레벨입니다. minZoom number 지도 유형의 최소 줌 레벨입니다. projection naver.maps.Projection 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. tileSize naver.maps.Size | SizeLiteral &lt;optional&gt; (256,256) 지도 유형의 타일 크기입니다. tileDuration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간 (밀리초 단위) repeatX boolean &lt;optional&gt; false 현재 줌 레벨에서 표현할 수 있는 타일 인덱스의 영역을 벗어나면 수평축으로 타일을 반복할 것인지 여부입니다. 세계 지도 투영을 사용하는 이미지 타일 지도 유형에서 사용하기에 적합합니다. vendor string &lt;optional&gt; 지도 유형의 제작자 이름입니다. provider MapDataProvider &lt;optional&gt; 지도 유형의 데이터 제공자 정보입니다. uid string &lt;optional&gt; 지도 유형을 유일하게 구분할 수 있는 id를 지정할 수 있습니다. darktheme boolean &lt;optional&gt; false 지도 유형이 전체적으로 어두운 이미지를 사용하는지를 지정합니다. 이 값이 true이면 지도 위 텍스트를 표시하는 기본 컨트롤의 텍스트 색상이 흰색으로 표시됩니다. getTileUrl function &lt;optional&gt; 전달된 타일의 인덱스와 줌 레벨에 해당하는 타일 URL을 반환합니다. 새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때마다 이 메서드를 호출합니다. tileSet string | Array.&lt;string&gt; &lt;optional&gt; 지도의 타일 이미지 URL 또는 URL의 목록을 지정할 수 있습니다. URL 문자열 내 {x},{y},{z}는 타일 인덱스와 줌 레벨로 치환됩니다. 타일 인덱스는 왼쪽 위 기준이며, 타일 인덱스를 반대로 적용하려면 {-x},{-y}와 같이 -를 함께 사용합니다. getTileUrl 메서드가 설정되면 이 속성은 무시됩니다. Example var imageMapTypeOptions = { minZoom: 0, maxZoom: 22, projection: naver.maps.EPSG3857, name: '세계 지도', tileSize: new naver.maps.Size(256, 256), repeatX: true, vendor: 'MyCorp.', provider: [{ title: \"내 지도 ver 1.0\" }, { title: \"OpenStreetMap\", link: \"http://www.openstreetmap.org/copyright\" }, { title: \"/인천광역시\", bounds: new naver.maps.LatLngBounds( new naver.maps.LatLng(36.915887, 125.690716), new naver.maps.LatLng(37.687529, 126.853252)) }], tileSet: [ \"http://mymap1.com/tiles/world/{z}/{x}/{y}.png\", \"http://mymap2.com/tiles/world/{z}/{x}/{y}.png\", \"http://mymap3.com/tiles/world/{z}/{x}/{y}.png\", \"http://mymap4.com/tiles/world/{z}/{x}/{y}.png\" ] }; var imageMapType = new naver.maps.ImageMapType(imageMapTypeOptions); MapDataProvider MapDataProvider 객체는 등록한 지도 유형의 데이터 제공자 정보를 나타냅니다. Type: object Properties Name Type Description title string 표시될 텍스트의 내용입니다. 빈 칸/Unicode 모두 허용하나, HTML Entity는 변환되지 않습니다. link string 표시될 텍스트를 클릭했을 때 이동할 주소입니다. 이 값이 없으면 클릭할 수 없는 요소로 생성됩니다. bounds Bounds | BoundsLiteral | ArrayOfBounds | ArrayOfBoundsLiteral 해당 텍스트를 표시할 좌표 경계입니다. 지도 화면에 해당 좌표 경계가 들어오면 텍스트를 표시합니다. 이 값이 없으면 항상 텍스트를 표시합니다. Example var mapTypeOptions = { //... provider: [{ title: \" 국토교통부\", }, { title: \",OpenStreetMap\", link: \"http://www.openstreetmap.org/copyright\" }, { title: \",Natural Earth\", link: \"http://www.naturalearthdata.com/\", bounds: NLatLngBounds( NLatLng(36.915887, 125.690716), NLatLng(37.687529, 126.853252)) }, { title: \" \\u2573 \\xa9 UNICODE ALSO OK\", bounds: [ NLatLngBounds( NLatLng(36.9604682, 126.7654746), NLatLng(38.1834428, 127.8062689)), // 서울,경기 NLatLngBounds( NLatLng(33.1940984, 126.1631646), NLatLng(33.5666617, 126.9448023)) // 제주 ] }] }; × Search results Close "},"naver.maps.ImageTile.html":{"id":"naver.maps.ImageTile.html","title":"Class: naver.maps.ImageTile","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API ImageTile Class: naver.maps.ImageTile naver.maps. ImageTile ImageTile 클래스는 한 장의 이미지 타일을 정의합니다. new naver.maps.ImageTile(imageTileOptions) Parameters Name Type Argument Description imageTileOptions ImageTileOptions &lt;optional&gt; 이미지 타일의 옵션 Extends naver.maps.Tile Methods appendTo(parentNode) 지정한 parentNode에 타일 HTML 요소를 추가합니다. Parameters Name Type Description parentNode HTMLElement 타일이 추가될 HTML 요소 Inherited From naver.maps.Tile#appendTo cancelFadeIn() 진행 중인 페이드 인(타일이 서서히 나타나는) 효과를 즉시 중지하고, 본래의 불투명도를 설정합니다. Inherited From naver.maps.Tile#cancelFadeIn destroy() 이미지 타일 객체를 완전히 삭제합니다. Overrides naver.maps.Tile#destroy fadeIn(callback, startOpacity) 페이드 인(타일이 서서히 나타나는) 효과를 실행합니다. Parameters Name Type Argument Default Description callback function 페이드 인 효과가 완료되었을 때 실행할 콜백 함수입니다. startOpacity number &lt;optional&gt; 0 페이드 인 효과의 시작 불투명도입니다. Inherited From naver.maps.Tile#fadeIn getDuration() 타일의 fadeIn 효과 지속시간을 반환합니다. Inherited From naver.maps.Tile#getDuration Returns Type Description number 타일의 fadeIn animation duration getElement() 타일의 HTML 요소를 반환합니다. Inherited From naver.maps.Tile#getElement Returns Type Description HTMLElement 타일의 HTML 요소 getImageElements() 타일의 모든 HTML 이미지 요소의 배열을 반환합니다. Returns Type Description Array.&lt;HTMLElement&gt; HTML 이미지 요소의 배열 getOffset() 타일의 오프셋(위치)을 반환합니다. Inherited From naver.maps.Tile#getOffset Returns Type Description naver.maps.Point 타일의 오프셋 getOpacity() 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Tile#getOpacity Returns Type Description number 0~1 사이의 실수. getSize() 타일의 크기를 반환합니다. Inherited From naver.maps.Tile#getSize Returns Type Description naver.maps.Size 타일의 크기 getTileIndex() 타일 인덱스를 반환합니다. Inherited From naver.maps.Tile#getTileIndex Returns Type Description TileIndex 타일 인덱스 getUrls() 타일에 포함된 이미지 URL의 목록을 반환합니다. Returns Type Description Array.&lt;string&gt; 이미지 URL의 배열 getZIndex() 타일의 쌓임 순서를 반환합니다. Inherited From naver.maps.Tile#getZIndex Returns Type Description number 타일의 쌓임 순서 hide() 타일을 숨깁니다. Inherited From naver.maps.Tile#hide load(imageTileOptions) 이미지 타일을 불러옵니다. Parameters Name Type Argument Description imageTileOptions ImageTileOptions &lt;optional&gt; 이미지 타일의 옵션 Overrides naver.maps.Tile#load remove() 이미지 타일의 HTML 요소를 지도상에서 삭제합니다. Overrides naver.maps.Tile#remove reset(mapType, zoom, imageTileOptions) 지정한 mapType에 맞게 타일을 재설정합니다. Parameters Name Type Argument Description mapType naver.maps.ImageMapType 재설정할 이미지 지도 유형 zoom number 타일 재설정 시 적용할 지도의 줌 레벨 imageTileOptions ImageTileOptions &lt;optional&gt; 이미지 타일의 옵션 Overrides naver.maps.Tile#reset setBlank() 이미지 타일을 투명한 공백 타일로 설정합니다. Overrides naver.maps.Tile#setBlank setDuration(duration) 타일의 fadeIn 효과 지속시간을 설정합니다. 단위는 밀리초 (millisecond), 기본값은 300~600ms 입니다. Parameters Name Type Description duration number 타일의 fadeIn animation duration Inherited From naver.maps.Tile#setDuration setOffset(offset) 타일이 표시될 오프셋(위치)을 지정합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#setOffset Overrides naver.maps.Tile#setOffset setOpacity(opacity) 타일의 불투명도를 지정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도 0~1 사이의 실수. Inherited From naver.maps.Tile#setOpacity setSize(size) 타일의 크기를 설정합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#setSize setTileIndex(tileIndex) 타일 인덱스를 설정합니다. Parameters Name Type Description tileIndex TileIndex 타일 인덱스 Inherited From naver.maps.Tile#setTileIndex setUrls(urls) 타일에 포함될 이미지 URL의 목록을 설정합니다. Parameters Name Type Description urls Array.&lt;string&gt; 이미지 URL의 배열 setZIndex(zIndex) 타일의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#setZIndex show() 타일을 보이게 합니다. Inherited From naver.maps.Tile#show Type Definitions ImageTileOptions ImageTileOptions 객체는 naver.maps.ImageTile을 정의하는 데 필요한 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description urls Array.&lt;string&gt; 한 장의 타일에 포함될 이미지 URL의 목록입니다. imgonload function &lt;optional&gt; 각 이미지가 로드되면 호출할 이벤트 핸들러입니다. imgonerror function &lt;optional&gt; 각 이미지의 로드가 실패하면 호출할 이벤트 핸들러입니다. opacity number &lt;optional&gt; 1 타일의 불투명도 transition boolean &lt;optional&gt; true 타일 로드 시 fadeIn 효과의 사용 여부입니다. duration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간입니다. (밀리초 단위) offset naver.maps.Point &lt;optional&gt; 타일의 오프셋입니다. zIndex number &lt;optional&gt; 0 타일의 쌓임 순서입니다. size naver.maps.Size &lt;optional&gt; 타일의 크기입니다. pane HTMLElement &lt;optional&gt; 타일이 추가될 HTML 요소입니다. Events loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed × Search results Close "},"naver.maps.InfoWindow.html":{"id":"naver.maps.InfoWindow.html","title":"Class: naver.maps.InfoWindow","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API InfoWindow Class: naver.maps.InfoWindow naver.maps. InfoWindow InfoWindow 클래스는 지도 위에 올리는 정보 창을 정의합니다. new naver.maps.InfoWindow(options) Parameters Name Type Description options InfoWindowOptions 정보 창 옵션. Tutorials 정보 창 Extends naver.maps.OverlayView Methods close() 정보 창을 닫습니다. getContent() 정보 창 내부의 콘텐츠를 반환합니다. Returns Type Description HTMLElement 정보 창 콘텐츠 getOptions(key) 정보 창 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 반환받을 옵션 이름 Returns Type Description InfoWindowOptions 정보 창 옵션 getPosition() 정보 창의 위치를 반환합니다. Returns Type Description Coord 정보 창 위치 getZIndex() 정보 창의 쌓임 순서를 반환합니다. Returns Type Description number 정보 창의 쌓임 순서 open(map, anchor) 정보 창을 엽니다. 앵커를 전달하면 앵커 위에 정보 창을 엽니다. Parameters Name Type Argument Description map naver.maps.Map Map 객체 anchor Coord | CoordLiteral | naver.maps.Marker &lt;optional&gt; 정보 창이 표시될 위치. 직접 좌표를 정의하거나 naver.maps.Marker 인스턴스를 참조하도록 할 수 있습니다. 단, 마커를 참조하는 경우 마커 아이콘의 size와 anchor 옵션이 마커 생성 시에 정의되어야 올바른 위치로 표현됩니다. setContent(content) 정보 창 내부에 표시할 콘텐츠(텍스트 또는 DOM 노드 문자열)를 설정합니다. Parameters Name Type Description content string | HTMLElement 정보 창 콘텐츠 Fires content_changed setOptions(options) 정보 창 옵션을 설정합니다. 설정한 옵션만 반영됩니다. Parameters Name Type Description options InfoWindowOptions 정보 창 옵션 Fires content_changed position_changed zIndex_changed setPosition(position) 정보 창의 위치를 설정합니다. Parameters Name Type Description position Coord | CoordLiteral 정보 창 위치 Fires position_changed setZIndex(zIndex) 정보 창의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 Fires zIndex_changed Type Definitions InfoWindowOptions InfoWindowOptions 객체는 InfoWindow를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description position Coord | CoordLiteral 정보 창의 위치입니다. content string | HTMLElement 정보 창의 콘텐츠입니다. zIndex number &lt;optional&gt; 0 정보 창의 쌓임 순서입니다. maxWidth number &lt;optional&gt; 0 정보 창의 최대 너비입니다. 단위는 픽셀(px)입니다. 기본값은 0으로 최대 너비를 제한하지 않습니다. pixelOffset naver.maps.Point | PointLiteral &lt;optional&gt; 정보 창의 꼬리에서 정보 창이 위치한 지점까지의 오프셋입니다. backgroundColor string &lt;optional&gt; #fff 정보 창의 배경색입니다. CSS 색상 표현법으로 설정합니다. borderColor string &lt;optional&gt; #333 정보 창의 테두리 색상입니다. CSS 색상 표현법으로 설정합니다. borderWidth number &lt;optional&gt; 1 정보 창의 테두리 두께입니다. disableAutoPan boolean &lt;optional&gt; false 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부입니다. disableAnchor boolean &lt;optional&gt; false 기본 말풍선 꼬리의 사용 여부입니다. anchorSkew boolean &lt;optional&gt; false 기본 말풍선 꼬리의 기울임(skew) 효과 사용 여부입니다. anchorSize naver.maps.Size | SizeLiteral &lt;optional&gt; (width: 20, height: 24) 기본 말풍선 꼬리의 크기입니다. anchorColor string &lt;optional&gt; #fff 기본 말풍선 꼬리의 색상입니다. CSS 색상 표현법으로 설정합니다. Events anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.KVO.html":{"id":"naver.maps.KVO.html","title":"Class: naver.maps.KVO","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVO Class: naver.maps.KVO naver.maps. KVO KVO 클래스는 KVO(Key-Value Observing) 패턴을 정의하는 클래스입니다. 이 클래스는 Event의 구현 일부를 상속받으며, NAVER 지도 API v3의 주요 클래스는 이 클래스를 상속받아 구현되었습니다. NAVER 지도 API v3 사용자는 이 클래스를 이용해 KVO 패턴을 동일하게 사용할 수 있습니다. new naver.maps.KVO() Tutorials KVO 상태 변경 알림 Methods addListener(eventName, listener) 현재 객체의 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 이 메서드는 Event의 addListener 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 listener function 이벤트 리스너 Returns Type Description MapEventListener 지도 이벤트 리스너 객체 addListenerOnce(eventName, listener) 현재 객체에서 한 번만 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 이 메서드는 Event의 once 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 listener function 이벤트 리스너 Returns Type Description MapEventListener 지도 이벤트 리스너 객체 bindTo(key, target, targetKey) 대상 객체(target)의 대상 키(targetKey)에 자신의 키(key)를 바인딩합니다. 따라서 대상 객체의 대상 키의 값이 변경되면 자신의 키의 값 역시 갱신됩니다. 즉, 대상 객체에서 사용하는 대상 키에 바인딩하면서 자신만의 키 이름을 설정할 때 사용할 수 있습니다. 대상 키가 없으면 동일한 키 이름을 사용합니다. Parameters Name Type Argument Description key string 키 target naver.maps.KVO 대상 객체 targetKey string &lt;optional&gt; 대상 객체에 존재하는 키 Fires {key}_changed clearListeners(eventName) 현재 객체에서 특정 이벤트 알림의 리스너를 모두 제거합니다. 이 메서드는 Event의 clearListeners 메서드를 상속받습니다. Parameters Name Type Description eventName string 모두 제거할 이벤트의 이름 get(key) 키에 해당하는 값을 반환합니다. Parameters Name Type Description key string 키 Returns Type Description any 키에 할당되어 있는 값 hasListener(eventName) 현재 객체에 이벤트 알림이 등록되었는지 여부를 확인합니다. 이 메서드는 Event의 hasListener 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 Returns Type Description boolean 등록 여부 removeListener(listeners) 특정 이벤트 알림의 리스너를 제거합니다. 이 메서드는 Event의 removeListener 메서드를 상속받습니다. Parameters Name Type Description listeners MapEventListener | Array.&lt;MapEventListener&gt; 제거할 리스너 객체 또는 리스너 객체의 배열 set(key, value, silently) 키(key)에 해당하는 값을 객체에 설정합니다. 값이 설정되면 해당 객체의 키를 바인딩하고 있는 모든 KVO 객체에 동일한 값이 적용됩니다. 또한, {key}_changed 형태의 이벤트를 이용해 값의 변경을 감지할 수 있습니다. Parameters Name Type Argument Description key string 키 value any 키에 저장할 값 silently boolean &lt;optional&gt; 묵시적으로 값을 설정할지 여부. 이 값이 true이면 이벤트를 발생시키지 않습니다. Fires {key}_changed setValues(properties) 키-값 쌍 형태로 동시에 여러 개의 값을 설정합니다. Parameters Name Type Description properties object 설정할 키-값 쌍의 객체 Fires {key}_changed trigger(eventName, eventObject) 현재 객체에 이벤트 알림을 발생시킵니다. 이 메서드는 Event의 trigger 메서드를 상속받습니다. Parameters Name Type Argument Description eventName string 이벤트 이름 eventObject any &lt;optional&gt; &lt;repeatable&gt; 이벤트 리스너에 전달할 이벤트 객체 unbind(key) 해당 키의 바인딩을 제거합니다. Parameters Name Type Description key string 제거할 키 unbindAll() 모든 바인딩을 제거합니다. Events {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 × Search results Close "},"naver.maps.KVOArray.html":{"id":"naver.maps.KVOArray.html","title":"Class: naver.maps.KVOArray","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVOArray Class: naver.maps.KVOArray naver.maps. KVOArray KVOArray 클래스는 배열 형태의 KVO를 정의합니다. 따라서 배열 요소의 값이 변경되면 알려줍니다. new naver.maps.KVOArray(array) Parameters Name Type Description array array KVOArray로 사용할 배열 Tutorials KVO 상태 변경 알림 Extends naver.maps.KVO Methods addListener(eventName, listener) 현재 객체의 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 이 메서드는 Event의 addListener 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 listener function 이벤트 리스너 Inherited From naver.maps.KVO#addListener Returns Type Description MapEventListener 지도 이벤트 리스너 객체 addListenerOnce(eventName, listener) 현재 객체에서 한 번만 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 이 메서드는 Event의 once 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 listener function 이벤트 리스너 Inherited From naver.maps.KVO#addListenerOnce Returns Type Description MapEventListener 지도 이벤트 리스너 객체 bindTo(key, target, targetKey) 대상 객체(target)의 대상 키(targetKey)에 자신의 키(key)를 바인딩합니다. 따라서 대상 객체의 대상 키의 값이 변경되면 자신의 키의 값 역시 갱신됩니다. 즉, 대상 객체에서 사용하는 대상 키에 바인딩하면서 자신만의 키 이름을 설정할 때 사용할 수 있습니다. 대상 키가 없으면 동일한 키 이름을 사용합니다. Parameters Name Type Argument Description key string 키 target naver.maps.KVO 대상 객체 targetKey string &lt;optional&gt; 대상 객체에 존재하는 키 Inherited From naver.maps.KVO#bindTo Fires {key}_changed clear() 모든 요소를 삭제합니다. 이 메서드는 remove_at 이벤트를 발생시킵니다. clearListeners(eventName) 현재 객체에서 특정 이벤트 알림의 리스너를 모두 제거합니다. 이 메서드는 Event의 clearListeners 메서드를 상속받습니다. Parameters Name Type Description eventName string 모두 제거할 이벤트의 이름 Inherited From naver.maps.KVO#clearListeners forEach(callback) 배열의 전체 요소를 순회하며 콜백 함수를 실행합니다. Parameters Name Type Description callback function 순회 시 실행할 콜백 함수 Properties Name Type Description element any 요소 index number 요소의 인덱스 get(key) 키에 해당하는 값을 반환합니다. Parameters Name Type Description key string 키 Inherited From naver.maps.KVO#get Returns Type Description any 키에 할당되어 있는 값 getArray() 원본 배열 객체를 반환합니다. Returns Type Description array 원본 배열 getAt(index) 특정 인덱스의 요소를 반환합니다. Parameters Name Type Description index number 인덱스 Returns Type Description any 해당 인덱스의 요소 getIndexOfElement(element) 특정 요소의 인덱스를 반환합니다. Parameters Name Type Description element any 인덱스를 검색할 요소 Returns Type Description number 해당 요소의 인덱스 getLength() 배열의 전체 길이를 반환합니다. Returns Type Description number 배열의 전체 길이 hasListener(eventName) 현재 객체에 이벤트 알림이 등록되었는지 여부를 확인합니다. 이 메서드는 Event의 hasListener 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 Inherited From naver.maps.KVO#hasListener Returns Type Description boolean 등록 여부 insertAt(index, element) 특정 인덱스에 요소를 삽입합니다. 이 메서드는 insert_at 이벤트를 발생시킵니다. Parameters Name Type Description index number 배열의 인덱스. 이 값이 음수이면 \"index number should be positive\" 오류가 발생합니다. element any 삽입할 요소의 값 pop() 배열의 마지막 요소를 삭제하고, 삭제된 요소를 반환합니다. 이 메서드는 remove_at 이벤트를 발생시킵니다. 이 메서드는 JavaScript 배열의 pop 메서드를 구현합니다. Returns Type Description any 삭제된 요소 push(element) 배열의 마지막에 요소를 추가합니다. 이 메서드는 insert_at 이벤트를 발생시킵니다. 이 메서드는 JavaScript 배열의 push 메서드를 구현합니다. Parameters Name Type Description element any 추가할 요소 Returns Type Description number 배열의 전체 길이 removeAt(index) 특정 인덱스의 요소를 삭제하고, 삭제된 요소를 반환합니다. 이 메서드는 remove_at 이벤트를 발생시킵니다. Parameters Name Type Description index number 배열의 인덱스. 이 값이 음수이면, \"index number should be positive\" 오류가 발생합니다. Returns Type Description any 삭제된 요소의 값 removeElement(element) 특정 요소를 삭제합니다. Parameters Name Type Description element any 삭제할 요소 removeListener(listeners) 특정 이벤트 알림의 리스너를 제거합니다. 이 메서드는 Event의 removeListener 메서드를 상속받습니다. Parameters Name Type Description listeners MapEventListener | Array.&lt;MapEventListener&gt; 제거할 리스너 객체 또는 리스너 객체의 배열 Inherited From naver.maps.KVO#removeListener set(key, value, silently) 키(key)에 해당하는 값을 객체에 설정합니다. 값이 설정되면 해당 객체의 키를 바인딩하고 있는 모든 KVO 객체에 동일한 값이 적용됩니다. 또한, {key}_changed 형태의 이벤트를 이용해 값의 변경을 감지할 수 있습니다. Parameters Name Type Argument Description key string 키 value any 키에 저장할 값 silently boolean &lt;optional&gt; 묵시적으로 값을 설정할지 여부. 이 값이 true이면 이벤트를 발생시키지 않습니다. Inherited From naver.maps.KVO#set Fires {key}_changed setAt(index, element) 특정 인덱스에 요소를 설정합니다. Parameters Name Type Description index number 배열의 인덱스. 이 값이 현재 배열 length-1보다 크면 insertAt을 호출합니다. element any 설정할 요소의 값 Fires set_at insert_at setValues(properties) 키-값 쌍 형태로 동시에 여러 개의 값을 설정합니다. Parameters Name Type Description properties object 설정할 키-값 쌍의 객체 Inherited From naver.maps.KVO#setValues Fires {key}_changed splice(startIndex, deleteCount, element) startIndex로부터 deleteCount만큼의 요소를 삭제하고, 신규 요소를 삽입합니다. 삭제한 요소가 존재한다면 삭제된 요소들의 배열을 반환합니다. 이 메서드는 JavaScript 배열의 splice 메서드를 구현합니다. Parameters Name Type Argument Default Description startIndex number 시작 인덱스 deleteCount number 0 시작 인덱스로부터 삭제할 요소의 개수 element any &lt;optional&gt; &lt;repeatable&gt; 시작 인덱스에 삽입할 새로운 요소 Returns Type Description Array.&lt;any&gt; 삭제된 요소의 배열 trigger(eventName, eventObject) 현재 객체에 이벤트 알림을 발생시킵니다. 이 메서드는 Event의 trigger 메서드를 상속받습니다. Parameters Name Type Argument Description eventName string 이벤트 이름 eventObject any &lt;optional&gt; &lt;repeatable&gt; 이벤트 리스너에 전달할 이벤트 객체 Inherited From naver.maps.KVO#trigger unbind(key) 해당 키의 바인딩을 제거합니다. Parameters Name Type Description key string 제거할 키 Inherited From naver.maps.KVO#unbind unbindAll() 모든 바인딩을 제거합니다. Inherited From naver.maps.KVO#unbindAll Events insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed × Search results Close "},"naver.maps.LabelLayer.html":{"id":"naver.maps.LabelLayer.html","title":"Class: naver.maps.LabelLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API LabelLayer Class: naver.maps.LabelLayer naver.maps. LabelLayer LabelLayer 클래스는 주기를 나타내는 레이어를 정의합니다. NAVER 지도 API v3에서 제공하는 여러 레이어의 타일 이미지를 요청할 때, 주기가 있는 타일을 요청하도록 합니다. new naver.maps.LabelLayer(name, registry, option) Parameters Name Type Description name string 레이어의 이름 registry naver.maps.ImageMapType 이미지 지도 유형 option object 레이어의 옵션 (Deprecated) Tutorials 레이어 See naver.maps.BicycleLayer naver.maps.CadastralLayer naver.maps.StreetLayer naver.maps.TrafficLayer Extends naver.maps.Layer Methods getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. (Deprecated) Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity × Search results Close "},"naver.maps.LatLng.html":{"id":"naver.maps.LatLng.html","title":"Class: naver.maps.LatLng","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API LatLng Class: naver.maps.LatLng naver.maps. LatLng LatLng 클래스는 위/경도 좌표를 정의합니다. add, sub, mul, div, round, floor 메서드는 LatLng 클래스에서는 사용할 수 없습니다. new naver.maps.LatLng(lat, lng) Parameters Name Type Default Description lat number 0 위도 lng number 0 경도 Extends naver.maps.Point Methods clone() 객체의 복제본을 반환합니다. Overrides naver.maps.Point#clone Returns Type Description naver.maps.LatLng 복제된 객체 destinationPoint(angle, meter) 현재 좌표에서 북쪽을 기준으로 지정한 각도(시계 방향)와 거리만큼 떨어진 위치의 지도 좌표를 반환합니다. Parameters Name Type Description angle number 현재의 좌표에서 북쪽을 기준으로 한 시계 방향의 각도(0-북, 90-동, 180-남, 270-서). 이 값이 0이면 현재의 좌표에서 북쪽을 가리키며, 90이면 동쪽을 가리킵니다. meter number 현재의 좌표에서 구하려는 좌표까지의 거리(미터) Returns Type Description naver.maps.LatLng 새로운 지도 좌표 equals(point) 객체의 좌표와 지정한 좌표가 같은지 여부를 확인합니다. Parameters Name Type Description point Coord | LatLngLiteral 비교할 좌표 객체 Overrides naver.maps.Point#equals Returns Type Description boolean 동일 여부 lat() -90~90도의 위도를 반환합니다. Returns Type Description number 위도 lng() -180~180의 경도를 반환합니다. Returns Type Description number 경도 toPoint() 현재 객체를 naver.maps.Point로 변환한 객체를 반환합니다. Returns Type Description naver.maps.Point 변환된 객체 toString() 객체의 좌표를 문자열로 반환합니다. Overrides naver.maps.Point#toString Returns Type Description string 위/경도 좌표를 나타내는 문자열로 형식은 (lat:{위도},lng:{경도})입니다. Example var latlng = new naver.map.LatLng(37.5666103, 126.9783882); latlng.toString(); // '(lat:37.5666103,lng:126.9783882)' × Search results Close "},"naver.maps.LatLngBounds.html":{"id":"naver.maps.LatLngBounds.html","title":"Class: naver.maps.LatLngBounds","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API LatLngBounds Class: naver.maps.LatLngBounds naver.maps. LatLngBounds LatLngBounds 클래스는 남서쪽과 북동쪽의 위/경도 좌표가 설정돼 있는 직사각형의 지리적 영역(이하 좌표 경계)을 정의합니다. new naver.maps.LatLngBounds(sw, ne) Parameters Name Type Description sw naver.maps.LatLng 남서쪽의 위/경도 좌표 ne naver.maps.LatLng 북동쪽의 위/경도 좌표 Extends naver.maps.PointBounds Methods &lt;static&gt; bounds(latlng, latlngN) 두 개 이상의 위/경도 좌표 중 남서/북동쪽의 좌표를 선정하여 새로운 LatLngBounds 객체를 반환하는 팩토리 메서드입니다. Parameters Name Type Argument Description latlng Coord | LatLngLiteral 좌표 객체 latlngN Coord | LatLngLiteral &lt;repeatable&gt; 위/경도 좌표 객체 Returns Type Description naver.maps.LatLngBounds 위/경도 좌표 경계 clone() 객체의 복제본을 반환합니다. Overrides naver.maps.PointBounds#clone Returns Type Description naver.maps.LatLngBounds 복제된 객체 east() 동쪽의 경도를 반환합니다. Returns Type Description number 동쪽의 경도 equals(bounds) 객체의 좌표 경계와 지정한 좌표 경계가 같은지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | LatLngBoundsLiteral 비교할 좌표 경계 객체 Overrides naver.maps.PointBounds#equals Returns Type Description boolean 동일 여부 extend(latlng) 객체의 좌표 경계에 지정한 좌표가 들어가도록 좌표 경계를 확장합니다. Parameters Name Type Description latlng Coord | LatLngLiteral 확장할 위/경도 좌표 Overrides naver.maps.PointBounds#extend Returns Type Description naver.maps.LatLngBounds this getCenter() 좌표 경계의 중심 좌표를 반환합니다. Overrides naver.maps.PointBounds#getCenter Returns Type Description naver.maps.LatLng 좌표 경계의 중심 좌표 getMax() 좌표 경계의 최대 좌표를 반환합니다. Inherited From naver.maps.PointBounds#getMax Returns Type Description naver.maps.Point 최대 좌표 getMin() 좌표 경계의 최소 좌표를 반환합니다. Inherited From naver.maps.PointBounds#getMin Returns Type Description naver.maps.Point 최소 좌표 getNE() 좌표 경계의 최대 좌표인 북동쪽의 위/경도 좌표를 반환합니다. Returns Type Description naver.maps.LatLng 북동쪽의 위/경도 좌표 getSW() 좌표 경계의 최소 좌표인 남서쪽의 위/경도 좌표를 반환합니다. Returns Type Description naver.maps.LatLng 남서쪽의 위/경도 좌표 hasBounds(bounds) 객체의 좌표 경계가 지정한 좌표 경계를 포함하는지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 확인할 좌표 경계 객체 Inherited From naver.maps.PointBounds#hasBounds Returns Type Description boolean 포함 여부 hasLatLng(latlng) 객체의 좌표 경계 내에 지정한 좌표가 있는지 여부를 확인합니다. Parameters Name Type Description latlng Coord | LatLngLiteral 확인할 좌표 객체 Returns Type Description Boolean 포함 여부 intersects(bounds) 객체의 좌표 경계가 지정한 좌표 경계와 겹치는 부분이 있는지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | LatLngBoundsLiteral 확인할 좌표 경계 객체 Overrides naver.maps.PointBounds#intersects Returns Type Description boolean 겹침 여부 maxX() 최대 좌표의 x 좌표를 반환합니다. Inherited From naver.maps.PointBounds#maxX Overrides naver.maps.PointBounds#maxX Returns Type Description number x 좌표 maxY() 최대 좌표의 y 좌표를 반환합니다. Inherited From naver.maps.PointBounds#maxY Overrides naver.maps.PointBounds#maxY Returns Type Description number y 좌표 minX() 최소 좌표의 x 좌표를 반환합니다. Inherited From naver.maps.PointBounds#minX Overrides naver.maps.PointBounds#minX Returns Type Description number x 좌표 minY() 최소 좌표의 y 좌표를 반환합니다. Inherited From naver.maps.PointBounds#minY Overrides naver.maps.PointBounds#minY Returns Type Description number y 좌표 north() 북쪽의 위도를 반환합니다. Returns Type Description number 북쪽의 위도 south() 남쪽의 위도를 반환합니다. Returns Type Description number 남쪽의 위도 toPointBounds() 현재 객체를 naver.maps.PointBounds 로 변환한 객체를 반환합니다. Returns Type Description naver.maps.PointBounds 변환된 객체 toString() 객체의 좌표 경계를 문자열로 반환합니다. Inherited From naver.maps.PointBounds#toString Returns Type Description string 좌표 경계를 나타내는 문자열로 형식은 (({minX},{minY}),({maxX},{maxY}))입니다. Example var bounds = new naver.map.PointBounds( new naver.maps.Point(0, 0), new naver.maps.Point(256, 256)); bounds.toString(); // '((0,0),(256,256))' union(bounds) 객체의 좌표 경계와 지정한 좌표 경계를 모두 포함하는 새로운 좌표 경계 객체를 반환합니다. Parameters Name Type Description bounds Bounds | LatLngBoundsLiteral 확장할 위/경도 좌표 경계 Overrides naver.maps.PointBounds#union Returns Type Description naver.maps.LatLngBounds 확장된 새로운 위/경도 좌표 경계 객체 west() 서쪽의 경도를 반환합니다. Returns Type Description number 서쪽의 경도 × Search results Close "},"naver.maps.Layer.html":{"id":"naver.maps.Layer.html","title":"Class: naver.maps.Layer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Layer Class: naver.maps.Layer naver.maps. Layer Layer 클래스는 지도 위에 올리는 레이어의 기본 클래스입니다. NAVER 지도 API v3에서 제공하는 모든 레이어(자전거, 교통 상황 지도 등)는 이 클래스를 상속받아 구현했습니다. API에서 기본적으로 제공하는 레이어 외에 지도 유형과 마찬가지로 사용자 정의 레이어를 만들 수 있습니다. 자세한 설명은 레이어 튜토리얼을 참고합니다. new naver.maps.Layer(name, MapTypeRegistry, options) 지정한 이름과 지도 유형 컬렉션을 사용하는 레이어 객체를 생성합니다. Parameters Name Type Description name string 레이어 이름 MapTypeRegistry naver.maps.MapTypeRegistry 지도 유형의 컬렉션 options LayerOptions 레이어 옵션 (Deprecated) Tutorials 레이어 Extends naver.maps.KVO Methods getLayerType() 레이어의 지도 유형을 반환합니다. Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. (Deprecated) Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Type Definitions LayerOptions LayerOptions 객체는 Layer를 정의하는 옵션을 나타냅니다. (기본 지도 타일과 합쳐서 표현하는 방법으로 변경되어 옵션을 지원하지 않습니다. 곧 문서에서 제거될 예정입니다.) Type: object Properties Name Type Default Description hd boolean false 고해상도 이미지 타일의 사용 여부입니다. overlayMap boolean false 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex 값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. zIndex number 0 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. × Search results Close "},"naver.maps.LogoControl.html":{"id":"naver.maps.LogoControl.html","title":"Class: naver.maps.LogoControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API LogoControl Class: naver.maps.LogoControl naver.maps. LogoControl LogoControl 클래스는 NAVER 로고 컨트롤을 정의합니다. new naver.maps.LogoControl(LogoControlOptions) Parameters Name Type Description LogoControlOptions LogoControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { logoControl: true }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions LogoControlOptions LogoControlOptions 객체는 NAVER 로고 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position BOTTOM_RIGHT NAVER 로고 컨트롤을 배치할 위치입니다. × Search results Close "},"naver.maps.Map.html":{"id":"naver.maps.Map.html","title":"Class: naver.maps.Map","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Map Class: naver.maps.Map naver.maps. Map Map 클래스는 애플리케이션에서 지도 인스턴스를 정의합니다. 이 객체를 생성함으로써 개발자는 지정한 DOM 요소에 지도를 삽입할 수 있습니다. new naver.maps.Map(mapDiv, mapOptions) Parameters Name Type Description mapDiv string | HTMLElement 지도를 삽입할 HTML 요소 또는 HTML 요소의 id mapOptions naver.maps.MapOptions 지도의 옵션 객체 Properties Name Type Description controls naver.maps.KVOArray 사전에 정의된 지도 내의 위치별로 지도 컨트롤의 인스턴스를 포함하는 객체입니다. 사용자 정의 컨트롤을 이 속성 내 특정 위치에 추가함으로써 사용자 정의 컨트롤을 지도에 추가할 수 있습니다. data naver.maps.Data 데이터 레이어를 정의하는 Data 객체입니다. layers LayerRegistry 지도 레이어의 컬렉션을 포함하는 객체입니다. mapTypes naver.maps.MapTypeRegistry 지도 유형의 컬렉션을 포함하는 객체입니다. mapSystemProjection naver.maps.MapSystemProjection 프로젝션 객체입니다. 지도 좌표와 세계 좌표, 화면 픽셀 좌표 간 좌표를 변환할 수 있는 메서드를 제공합니다. Tutorials 지도 생성 및 기본 동작 Extends naver.maps.KVO Methods addPane(name, elementOrZIndex) 사용자 정의 창(pane)을 추가합니다. Parameters Name Type Description name string 창의 이름 elementOrZIndex HTMLElement | number 창 HTML 요소 또는 zIndex값 autoResize() 지도 화면의 크기를 자동으로 재설정합니다. 단, 지도 DOM 요소의 CSS 크기에 따라 지도 크기가 자동으로 조정될 때만 동작합니다. Fires size_changed bounds_changed destroy() 모든 이벤트 및 DOM 요소를 포함한 지도를 안전하게 제거합니다. fitBounds(bounds, FitBoundsOptions) 지정한 좌표 경계를 포함하는 위치로 지도를 이동합니다. 지도 좌표의 배열을 지정하면 좌표 경계를 판단하여 지도를 이동합니다. Parameters Name Type Argument Description bounds Bounds | BoundsLiteral | ArrayOfCoords | ArrayOfCoordsLiteral 좌표 경계 또는 좌표의 배열 FitBoundsOptions FitBoundsOptions &lt;optional&gt; 좌표 경계를 확장하기 위한 값. { top: 10, right: 10, bottom: 10, left: 10, maxZoom: 10 } 형태로 좌표 경계를 확장하기 위한 픽셀 단위의 여백값입니다. Fires center_changed centerPoint_changed zoom_changed bounds_changed idle getBounds() 지도 화면의 좌표 경계를 반환합니다. Returns Type Description Bounds 현재 지도의 좌표 경계 getCenter() 지도의 중심 좌표를 반환합니다. Returns Type Description Coord 지도의 중심 좌표 getCenterPoint() 지도의 중심 좌표를 세계 좌표로 변환한 결과를 반환합니다. Returns Type Description Coord 지도의 중심 세계 좌표 getElement() 지도의 HTML 요소를 반환합니다. Returns Type Description HTMLElement 현재 지도의 HTML 요소 getMapTypeId() 현재 지도 유형의 id를 반환합니다. Returns Type Description string 지도 유형의 id getMaxZoom() 지도의 최대 줌 레벨을 반환합니다. Returns Type Description number 지도의 최대 줌 레벨 getMinZoom() 지도의 최소 줌 레벨을 반환합니다. Returns Type Description number 지도의 최소 줌 레벨 getOptions(key) 지도의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 getPanes() 오버레이 요소를 추가할 수 있는 지도의 창 요소의 집합을 객체로 반환합니다. Returns Type Description MapPanes 창 요소의 집합 객체 getPrimitiveProjection() 지도 유형의 투영(projection)을 반환합니다. Returns Type Description naver.maps.Projection 지도 유형의 원본 투영 객체 getProjection() 지도의 투영을 반환합니다. Returns Type Description naver.maps.MapSystemProjection 지도 투영 객체 getSize() 지도 화면의 크기를 반환합니다. Returns Type Description naver.maps.Size 지도의 크기 getZoom() 지도의 줌 레벨을 반환합니다. Returns Type Description number 지도의 줌 레벨 morph(coord, zoom, transitionOptions) 지정한 좌표와 줌 레벨을 사용하는 새로운 위치로 지도를 이동합니다. 이때, 이동 거리가 가깝다면 부드럽게 이동합니다. Parameters Name Type Argument Description coord Coord | CoordLiteral 이동할 중심 좌표 zoom number &lt;optional&gt; 이동할 줌 레벨 transitionOptions TransitionOptions &lt;optional&gt; 이동 효과에 사용할 옵션 Fires zooming center_changed centerPoint_changed zoom_changed bounds_changed idle panBy(offset) 지정한 픽셀 좌표만큼 지도를 이동합니다. Parameters Name Type Description offset naver.maps.Point | PointLiteral 이동할 픽셀 좌표 Fires center_changed centerPoint_changed bounds_changed idle panTo(coord, transitionOptions) 지정한 좌표를 중심점으로 지도를 이동합니다. 이때, 이동 거리가 가깝다면 부드럽게 이동합니다. Parameters Name Type Description coord Coord | CoordLiteral 중심 좌표 transitionOptions TransitionOptions 이동 효과에 사용할 옵션 Fires panning center_changed centerPoint_changed bounds_changed idle panToBounds(bounds, transitionOptions, margin) 지정한 좌표 경계를 포함하는 위치로 지도를 부드럽게 이동합니다. Parameters Name Type Argument Description bounds Bounds | BoundsLiteral 좌표 경계 transitionOptions TransitionOptions 이동 효과에 사용할 옵션 margin margin &lt;optional&gt; 좌표 경계를 확장하기 위한 값. { top: 10, right: 10, bottom: 10, left: 10 } 형태로 좌표 경계를 확장하기 위한 픽셀 단위의 여백값입니다. Fires zooming center_changed centerPoint_changed zoom_changed bounds_changed idle refresh(noEffect) 지도를 새로 고칩니다. Parameters Name Type Argument Default Description noEffect boolean &lt;optional&gt; false 지도를 새로 고칠 때 페이드 인(fade in) 효과 적용 여부 Fires projection_changed idle removePane(name) 지정한 창을 지도에서 제거합니다. Parameters Name Type Description name string 창의 이름 setCenter(center) 지정한 좌표로 지도의 중심점을 설정합니다. Parameters Name Type Description center Coord | CoordLiteral 지도의 중심 좌표 Fires center_changed centerPoint_changed bounds_changed idle setCenterPoint(point) 지정한 세계 좌표로 지도의 중심점을 설정합니다. Parameters Name Type Description point naver.maps.Point | PointLiteral 지도의 중심 세계 좌표 Fires center_changed centerPoint_changed bounds_changed idle setMapTypeId(mapTypeId) 지도 유형을 지정한 id로 설정합니다. Parameters Name Type Description mapTypeId string 지도 유형의 id Fires mapType_changed mapTypeId_changed projection_changed setOptions(newOptionsOrKey, value) 지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Argument Description newOptionsOrKey object | string 지도의 옵션 객체 또는 특정 옵션의 이름 value any &lt;optional&gt; 옵션의 값 setSize(size) 지도 화면의 크기를 픽셀 단위로 설정합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 픽셀 단위의 지도 크기 Fires size_changed bounds_changed setZoom(zoom, effect) 지도의 줌 레벨을 설정합니다. Parameters Name Type Argument Default Description zoom number 지도의 줌 레벨 effect boolean &lt;optional&gt; false 줌 레벨 변경 시 효과 적용 여부 Fires center_changed centerPoint_changed zoom_changed bounds_changed zooming idle updateBy(coord, zoom) 지정한 좌표와 줌 레벨을 사용하는 새로운 위치로 지도를 즉시 이동합니다. Parameters Name Type Description coord Coord | CoordLiteral 중심 좌표 zoom number 줌 레벨 Fires center_changed centerPoint_changed zoom_changed bounds_changed idle zoomBy(deltaZoom, zoomOrigin, effect) 지도의 줌 레벨을 상대 값으로 설정합니다. zoomOrigin을 설정하면 줌 레벨 변경 시 해당 지도 좌표의 위치가 고정됩니다. Parameters Name Type Argument Default Description deltaZoom number 지도의 상대 줌 레벨 zoomOrigin Coord | CoordLiteral &lt;optional&gt; center 줌 변경 시 고정할 지도 좌표입니다. effect boolean &lt;optional&gt; false 줌 레벨 변경 시 효과 적용 여부 Fires center_changed centerPoint_changed zoom_changed bounds_changed zooming idle Type Definitions MapOptions MapOptions 객체는 지도를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description background string 지도 요소의 배경으로 사용할 이미지 URL 또는 CSS 색상값입니다. baseTileOpacity number 지도 기본 타일의 불투명도를 설정합니다. 값의 범위는 0~1이며, 기본값은 1입니다. bounds Bounds | BoundsLiteral null 지도의 초기 좌표 경계입니다. 이 값을 설정하면 지도 옵션 중 center와 zoom 옵션을 무시하고, 지정한 좌표 경계에 맞게 지도를 생성합니다. center Coord | CoordLiteral 서울시청 지도의 초기 중심 좌표입니다. 기본값은 서울 시청 좌표(37.5666103, 126.9783882)입니다. disableDoubleClickZoom boolean false 사용자가 지도 위에서 마우스 버튼을 더블 클릭해 지도를 확대하는 기능의 사용 여부입니다. disableDoubleTapZoom boolean false 사용자가 지도 위에서 한 손가락으로 더블 탭해 지도를 확대하는 기능의 사용 여부입니다. disableKineticPan boolean true 사용자가 지도를 드래그했을 때 관성 효과(사용자가 동작을 끝낸 후에도 계속되는 지도의 움직임)의 사용 여부입니다. disableTwoFingerTapZoom boolean false 사용자가 지도 위에서 두 손가락으로 두 번 탭해 지도를 축소하는 기능의 사용 여부입니다. draggable boolean true 마우스 또는 손가락을 이용한 지도 이동(패닝) 허용 여부입니다. keyboardShortcuts boolean true 키보드 방향 키를 이용한 지도 이동(패닝) 허용 여부입니다. logoControl boolean true NAVER 로고 컨트롤의 표시 여부입니다. (항상 노출로 변경) logoControlOptions LogoControlOptions NAVER 로고 컨트롤의 옵션입니다. mapDataControl boolean true 지도 데이터 저작권 컨트롤의 표시 여부입니다. mapDataControlOptions MapDataControlOptions 지도 데이터 저작권 컨트롤의 옵션입니다. mapTypeControl boolean false 지도 유형 컨트롤의 표시 여부입니다. mapTypeControlOptions MapTypeControlOptions 지도 유형 컨트롤의 옵션입니다. mapTypeId string NORMAL 지도의 초기 지도 유형 id입니다. mapTypes naver.maps.MapTypeRegistry 지도 유형의 컬렉션을 포함하는 객체입니다. 이 값을 설정하지 않으면 사전에 정의된 NAVER 지도의 기본 지도 유형으로 설정합니다. maxBounds Bounds | BoundsLiteral null 지도에서 보이는 최대 좌표 경계입니다. 지도의 중심 좌표는 지정한 최대 좌표 경계 내에서만 설정할 수 있습니다. maxZoom number 지도의 최대 줌 레벨입니다. 이 값을 설정하지 않으면 지정된 초기 지도 유형의 최고 줌 레벨로 설정합니다. minZoom number 지도의 최소 줌 레벨입니다. 이 값을 설정하지 않으면 지정된 초기 지도 유형의 최저 줌 레벨로 설정합니다. padding padding 지도 뷰포트의 안쪽 여백(패딩)입니다. 단위는 화면 픽셀이며, 기본값은 {top: 0, right: 0, bottom: 0, left: 0}입니다. pinchZoom boolean true 핀치 제스처를 이용한 지도 확대/축소 허용 여부입니다. resizeOrigin naver.maps.Position CENTER 지도 크기 조정 시 고정할 원점입니다. scaleControl boolean true 지도 축척 컨트롤의 표시 여부입니다. scaleControlOptions ScaleControlOptions 지도 축척 컨트롤의 옵션입니다. scrollWheel boolean true 마우스 스크롤 휠을 이용한 지도 확대/축소 허용 여부입니다. size naver.maps.Size | SizeLiteral 지도의 초기 크기입니다. 이 값을 설정하지 않으면, 지도 DOM 요소의 CSS 크기에 따라 지도 크기가 자동으로 조정됩니다. overlayZoomEffect null | string null 도형, 마커 등 오버레이의 줌 효과 적용 대상입니다. 적용할 대상의 창(pane) 이름을 문자열로 지정합니다. 이 값이 all이면 모든 오버레이에 줌 효과가 적용됩니다. 오버레이의 개수가 많을 때는 성능에 영향을 줄 수 있으므로 주의해 사용해야 합니다. tileSpare number 0 지도의 크기보다 보다 여유있게 로딩할 타일의 개수를 지정합니다. tileTransition boolean true 지도 타일을 전환할 때 페이드 인 효과(타일이 서서히 나타나는 것)의 사용 여부입니다. tileDuration number 지도 타일을 전환할 때 페이드 인 효과(타일이 서서히 나타나는 것)의 지속 시간 입니다. (밀리초), 기본값은 300~600ms입니다. zoom number 11 지도의 초기 줌 레벨입니다. zoomControl boolean false 줌 컨트롤의 표시 여부입니다. zoomControlOptions ZoomControlOptions 줌 컨트롤의 옵션입니다. zoomOrigin Coord | CoordLiteral null 줌 효과 시 고정하여 적용할 기준 좌표입니다. 해당 좌표가 현재 지도 화면 밖에 위치해 있으면 기본 기준 좌표를 적용합니다. blankTileImage null | string null 빈 타일 이미지 URL을 설정할 수 있는 옵션입니다. 기본값은 투명 gif 입니다. MapPanes MapPanes 객체는 오버레이를 지도 위에 렌더링할 수 있는 DOM 요소를 포함하며, 지도에 있는 여러 레이어의 스택(stack) 순서를 나타냅니다. Type: object Properties Name Type Description overlayLayer HTMLElement 이 창은 폴리라인, 폴리곤 등의 오버레이 요소를 포함합니다. 이 창은 DOM 이벤트를 받지 않습니다. overlayImage HTMLElement 이 창은 마커의 요소를 포함합니다. floatPane HTMLElement 이 창은 모든 오버레이보다 위에 위치하는 정보 창(Info Window) 요소를 포함합니다. Events addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.MapDataControl.html":{"id":"naver.maps.MapDataControl.html","title":"Class: naver.maps.MapDataControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapDataControl Class: naver.maps.MapDataControl naver.maps. MapDataControl MapDataControl 클래스는 지도 데이터 저작권 컨트롤을 정의합니다. new naver.maps.MapDataControl(MapDataControlOptions) Parameters Name Type Description MapDataControlOptions MapDataControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { mapDataControl: true }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions MapDataControlOptions MapDataControlOptions 객체는 지도 데이터 저작권 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position BOTTOM_LEFT 지도 데이터 저작권 컨트롤을 배치할 위치입니다. × Search results Close "},"naver.maps.MapSystemProjection.html":{"id":"naver.maps.MapSystemProjection.html","title":"Interface: MapSystemProjection","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapSystemProjection Interface: MapSystemProjection naver.maps. MapSystemProjection MapSystemProjection은 현재 설정된 지도 유형의 Projection을 가공해 지도 내부에서 사용하는 투영 객체입니다. 이 객체를 이용하면 지도 좌표와 세계 좌표, 화면 픽셀 좌표를 서로 변환할 수 있습니다. 이 인터페이스는 Map 인스턴스의 getProjection 메서드를 이용해 가져올 수 있으며, 직접 초기화해서 사용할 수 없습니다. Tutorials 지도 투영과 좌표 체계 Extends naver.maps.KVO Methods factor(zoom) 특정 줌 레벨에서 한 축의 타일 개수를 반환합니다. Parameters Name Type Description zoom number 줌 레벨 Returns Type Description number 타일의 개수 fromCoordToOffset(coord) 지정한 지도 좌표에 해당하는 픽셀 단위의 offset 좌표를 반환합니다. Parameters Name Type Description coord Coord 지도 좌표 Returns Type Description naver.maps.Point offset 좌표 fromCoordToPoint(coord) 지정한 지도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord Coord 지도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromOffsetToCoord(offset) 지정한 픽셀 단위의 offset 좌표에 해당하는 지도 좌표를 반환합니다. Parameters Name Type Description offset naver.maps.Point offset 좌표 Returns Type Description Coord 지도 좌표 fromOffsetToPoint(offset) 지정한 픽셀 단위의 offset 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description offset naver.maps.Point offset 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 지도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description Coord 지도 좌표 fromPointToOffset(point) 지정한 세계 좌표에 해당하는 픽셀 단위의 offset 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point offset 좌표 getDestinationCoord(fromCoord, angle, meter) 지정한 좌표에서 북쪽을 기준으로 지정한 각도(시계 방향)와 거리만큼 떨어진 위치의 지도 좌표를 반환합니다. Projection 내에 getDestinationCoord 메서드를 구현해야 합니다. 네이버 지도 API에서 제공하는 EPSG3857, UTMK, UTMK_NAVER 지도 투영 객체에는 구현되어 있습니다. Parameters Name Type Description fromCoord Coord 기준이 되는 지도 좌표 angle number 지정한 좌표에서 북쪽을 기준으로 한 시계 방향의 각도(0-북, 90-동, 180-남, 270-서). 이 값이 0이면 현재의 좌표에서 북쪽을 가리키며, 90이면 동쪽을 가리킵니다. meter number 지정한 좌표에서 구하려는 좌표까지의 거리(미터) Returns Type Description Coord 새로운 지도 좌표 getDistance(coord1, coord2) 지정한 두 지도 좌표 간의 거리를 반환합니다. 단위는 미터입니다. Projection 내에 getDistance 메서드를 구현해야 합니다. 네이버 지도 API에서 제공하는 EPSG3857, UTMK, UTMK_NAVER 지도 투영 객체에는 구현되어 있습니다. Parameters Name Type Description coord1 Coord 지도 좌표 coord2 Coord 지도 좌표 Returns Type Description number 거리 getProjectionName() 현재의 지도 시스템이 적용된 지도 투영 객체(Projection)의 이름을 반환합니다. Returns Type Description number 지도 투영 객체의 이름 scaleDown(operand, zoom) 지정한 피연산자를 줌 레벨의 타일 개수만큼 나누어 축소한 후 반환합니다. Parameters Name Type Description operand number | naver.maps.Point | naver.maps.Size 확장할 피연산자 zoom number 줌 레벨 Returns Type Description numver | naver.maps.Point | naver.maps.Size 축소된 값 또는 객체 scaleUp(operand, zoom) 지정한 피연산자를 줌 레벨의 타일 개수만큼 곱해 확대한 후 반환합니다. Parameters Name Type Description operand number | naver.maps.Point | naver.maps.Size 확장할 피연산자 zoom number 줌 레벨 Returns Type Description numver | naver.maps.Point | naver.maps.Size 확대된 값 또는 객체 × Search results Close "},"naver.maps.MapType.html":{"id":"naver.maps.MapType.html","title":"Interface: MapType","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapType Interface: MapType naver.maps. MapType MapType 가상 인터페이스는 지도의 지도 유형을 만들 때 구현해야 할 메서드와 속성을 정의합니다. NAVER 지도 API에서 제공하는 모든 지도 유형(일반 지도, 위성 지도 등) 역시 이 인터페이스를 구현했습니다. 사용자 정의 지도 유형을 만들려면 이 인터페이스를 구현해야 합니다. Tutorials 지도 유형 Members &lt;abstract&gt; maxZoom 지도 유형의 최대 줌 레벨입니다. Type: number &lt;abstract&gt; minZoom 지도 유형의 최소 줌 레벨입니다. Type: number &lt;abstract&gt; name 지도 유형 컨트롤 등에서 표시할 지도 유형의 이름입니다. Type: string &lt;abstract&gt; projection 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. Type: naver.maps.Projection &lt;abstract&gt; tileSize 지도 유형의 타일 크기입니다. Type: naver.maps.Size Methods &lt;abstract&gt; getTile(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 타일 HTML 요소를 반환합니다. 새 타일을 지도에 표시해야 한다고 API가 판단할 때마다 이 메서드를 호출합니다. Parameters Name Type Description x number x축의 인덱스 y number y축의 인덱스 z number 줌 레벨 Returns Type Description HTMLElement | naver.maps.Tile 타일 HTML 요소 또는 Tile 객체 × Search results Close "},"naver.maps.MapTypeControl.html":{"id":"naver.maps.MapTypeControl.html","title":"Class: naver.maps.MapTypeControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapTypeControl Class: naver.maps.MapTypeControl naver.maps. MapTypeControl MapTypeControl 클래스는 지도 유형 컨트롤을 정의합니다. new naver.maps.MapTypeControl(MapTypeControlOptions) Parameters Name Type Description MapTypeControlOptions MapTypeControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { mapTypeControl: true }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions MapTypeControlOptions MapTypeControlOptions 객체는 지도 유형 컨트롤의 동작이나 위치, 모양을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description mapTypeIds Array.&lt;naver.maps.MapTypeId&gt; | null 지도 유형 컨트롤에 표시할 지도 유형의 id입니다. 기본값은 모든 지도 유형을 표시합니다. position naver.maps.Position TOP_RIGHT 지도 유형 컨트롤을 배치할 위치입니다. style MapTypeControlStyle BUTTON 지도 유형 컨트롤의 스타일입니다. hideTime number 버튼 스타일 컨트롤 마우스 아웃 시 숨김 delay 값. 기본값은 2000ms 입니다. MapTypeControlStyle MapTypeControlStyle 객체는 지도 유형 컨트롤의 스타일을 정의합니다. Type: object Properties Name Type Description BUTTON number 버튼 스타일입니다. DROPDOWN number 드롭다운 스타일입니다. × Search results Close "},"naver.maps.MapTypeRegistry.html":{"id":"naver.maps.MapTypeRegistry.html","title":"Class: naver.maps.MapTypeRegistry","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapTypeRegistry Class: naver.maps.MapTypeRegistry naver.maps. MapTypeRegistry MapTypeRegistry 클래스는 지도에서 사용할 수 있는 지도 유형의 컬렉션을 정의합니다. 이 객체의 컬렉션에 사용자 정의 지도 유형을 등록하면 NAVER 지도 API v3가 제공하는 HYBRID, TERRAIN 등의 기본 지도 유형처럼 지도에서 사용할 수 있습니다. new naver.maps.MapTypeRegistry(mapTypeInfo, defaultMapTypeId) Parameters Name Type Argument Description mapTypeInfo object 지도 유형 id와 지도 유형 객체의 쌍으로 이루어진 객체 defaultMapTypeId string &lt;optional&gt; 기본으로 선택할 지도 유형 id Tutorials 지도 유형 Extends naver.maps.KVO Methods getPreviousTypeId() 이전에 선택되었던 지도 유형의 id를 반환합니다. Returns Type Description string 이전에 선택되었던 지도 유형의 id getSelectedType() 현재 선택된 지도 유형 객체를 반환합니다. Returns Type Description naver.maps.MapType 지도 유형 객체 getSelectedTypeId() 현재 선택된 지도 유형의 id를 반환합니다. Returns Type Description string 현재 선택된 지도 유형의 id getTypeIds() 등록된 모든 지도 유형의 id 목록을 반환합니다. Returns Type Description Array.&lt;string&gt; 지도 유형 id의 배열 set(mapTypeId, mapType) 지정한 id로 지도 유형을 등록합니다. Parameters Name Type Description mapTypeId string 지도 유형의 id mapType naver.maps.MapType 지도 유형 객체 Overrides naver.maps.KVO#set Fires addMapType removeMapType {mapTypeId}_changed setSelectedTypeId(mapTypeId) 지정한 id의 지도 유형으로 현재 지도를 설정합니다. Parameters Name Type Description mapTypeId string 지도 유형의 id Fires selectedMapType_changed Events addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 × Search results Close "},"naver.maps.Marker.html":{"id":"naver.maps.Marker.html","title":"Class: naver.maps.Marker","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Marker Class: naver.maps.Marker naver.maps. Marker Marker 클래스는 지도 위에 올리는 마커를 정의합니다. new naver.maps.Marker(options) Parameters Name Type Description options MarkerOptions 마커 옵션. 이때 position 속성은 반드시 설정해야 합니다. Tutorials 마커 Extends naver.maps.OverlayView Methods &lt;abstract&gt; draw() 지도에 오버레이를 그릴 때 호출됩니다. 지도의 창(pane) 위에 원하는 오버레이를 그리고, 배치하는 기능을 구현합니다. Inherited From naver.maps.OverlayView#draw Overrides naver.maps.OverlayView#draw getAnimation() 마커의 애니메이션을 반환합니다. Returns Type Description naver.maps.Animation Animation 객체 getClickable() 마커의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 마커 클릭 허용 여부 getContainerTopLeft() 현재 지도 컨테이너 요소의 left, top 픽셀값을 반환합니다. Inherited From naver.maps.OverlayView#getContainerTopLeft Returns Type naver.maps.Point getCursor() 마우스 오버 시 반영되는 마우스 포인터 모양을 반환합니다. Returns Type Description string 마우스 포인터 모양 getDraggable() 마커의 드래그 허용 여부를 반환합니다. Returns Type Description boolean 마커 드래그 허용 여부 getDrawingRect() 마커가 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getIcon() 마커의 모양을 표현하는 아이콘 객체를 반환합니다. Returns Type Description ImageIcon | SymbolIcon | HtmlIcon 아이콘 객체 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 마커 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 반환받을 옵션 이름 Returns Type Description MarkerOptions 마커 옵션 getPanes() 오버레이 요소를 추가할 수 있는 지도의 창(pane) 요소 집합 객체를 반환합니다. Inherited From naver.maps.OverlayView#getPanes Returns Type Description MapPanes MapPanes 객체 getPosition() 마커의 위치를 반환합니다. Returns Type Description Coord 마커 위치 getProjection() 지도 좌표, 화면 좌표 간에 변환할 수 있는 MapSystemProjection 객체를 반환합니다. 반환된 객체를 이용해 지도 위의 원하는 위치에 오버레이를 배치할 수 있습니다. Inherited From naver.maps.OverlayView#getProjection Returns Type Description naver.maps.MapSystemProjection MapSystemProjection 객체 getShape() 마커의 이벤트 영역 셰이프를 반환합니다. Returns Type Description MarkerShape 마커 셰이프 객체 getTitle() 마커의 타이틀을 반환합니다. 타이틀은 마커에 마우스 포인터를 올리면 나타나는 툴팁의 문자열입니다. Returns Type Description string 마커 타이틀 getVisible() 마커의 노출 허용 여부를 반환합니다. Returns Type Description boolean 마커 노출 허용 여부 getZIndex() 마커의 쌓임 순서를 반환합니다. Returns Type Description number 마커의 쌓임 순서 &lt;abstract&gt; onAdd() 지도에 오버레이를 추가할 때 호출됩니다. 오버레이 요소를 Map 객체의 창(pane) 요소에 추가하는 기능을 구현합니다. MapPanes 중 적합한 창 요소에 오버레이 요소를 추가합니다. Inherited From naver.maps.OverlayView#onAdd Overrides naver.maps.OverlayView#onAdd &lt;abstract&gt; onRemove() 지도에서 오버레이를 제거할 때 호출됩니다. 오버레이 요소를 Map 객체의 창(pane) 요소에서 제거하는 기능을 구현합니다. Inherited From naver.maps.OverlayView#onRemove Overrides naver.maps.OverlayView#onRemove setAnimation(animation) 마커의 애니메이션을 설정합니다. 동작하고 있는 애니메이션이 있다면 중지하고, 설정한 애니메이션을 바로 시작합니다. 제공하는 애니메이션은 DROP, BOUNCE입니다. Parameters Name Type Description animation naver.maps.Animation 마커의 애니메이션. 이 값이 null이면 애니메이션을 중지합니다. setClickable(clickable) 마커의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부. 이 값이 true이면 마커는 마우스, 터치 이벤트를 받을 수 있고, 마우스 오버 시 cursor 속성에 따라 포인터 모양을 반영합니다. false일 경우 이벤트를 받지 않으며 마우스 오버 시에도 포인터 모양이 변하지 않습니다. Fires clickable_changed setCursor(cursor) 마우스 오버 시 포인터의 모양을 설정하는 CSS cursor값을 설정합니다. Parameters Name Type Description cursor string 마우스 포인터 모양 Fires cursor_changed setDraggable(draggable) 마커의 드래그 허용 여부를 설정합니다. Parameters Name Type Description draggable boolean 마커의 드래그 허용 여부 Fires draggable_changed setIcon(icon) 마커의 모양을 설정합니다. 단, ImageIcon 객체는 마커 생성과 동시에 호출하면 MarkerOptions 객체의 icon 옵션이 적용됩니다. Parameters Name Type Description icon string | ImageIcon | SymbolIcon | HtmlIcon 아이콘 객체 Fires icon_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 마커 옵션을 설정합니다. 설정한 옵션만 반영됩니다. Parameters Name Type Description options MarkerOptions 마커 옵션 Fires clickable_changed cursor_changed draggable_changed icon_changed position_changed shape_changed title_changed visible_changed zIndex_changed setPosition(position) 마커의 위치를 설정합니다. Parameters Name Type Description position Coord | CoordLiteral 마커 위치 Fires position_changed setShape(shape) 마커의 이벤트 영역을 설정합니다. Parameters Name Type Description shape MarkerShape 마커 셰이프 객체 Fires shape_changed setTitle(title) 마커의 타이틀을 설정합니다. 타이틀은 마커에 마우스 포인터를 올리면 나타나는 툴팁의 문자열입니다. Parameters Name Type Description title string 마커 타이틀 Fires title_changed setVisible(visible) 마커의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 마커 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 마커의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 마커의 쌓임 순서 Fires zIndex_changed Type Definitions HtmlIcon HtmlIcon 객체는 HTML 마커에서 사용하는 아이콘을 정의합니다. HTML 마커는 HTML 문자열 또는 HTML 요소를 사용하는 마커입니다. Type: object Properties Name Type Argument Description content string | HTMLElement 마커의 아이콘으로 사용할 HTML 마크업 또는 HTML 요소입니다. 이 속성은 반드시 설정해야 합니다. size naver.maps.Size | SizeLiteral &lt;optional&gt; 화면에 나타나는 마커의 크기입니다. anchor naver.maps.Point | PointLiteral | naver.maps.Position &lt;optional&gt; 지도 위에 놓이는 마커의 위치와 일치시킬 아이콘의 기준 위치입니다. 기본값은 (0, 0)으로, 마커 기준 왼쪽 위 모서리가 마커의 위치입니다. ImageIcon ImageIcon 객체는 이미지 마커에서 사용하는 아이콘을 정의합니다. Type: object Properties Name Type Argument Default Description url string 마커의 아이콘으로 사용할 이미지의 URL입니다. size naver.maps.Size | SizeLiteral &lt;optional&gt; 화면에 나타나는 마커의 크기입니다. 이 속성을 설정하지 않으면 이미지의 크기로 설정합니다. scaledSize naver.maps.Size | SizeLiteral &lt;optional&gt; 아이콘 이미지의 크기입니다. 이 속성을 설정하지 않으면 이미지의 크기로 설정합니다. 이 속성을 이용하면 레티나 디스플레이에 대응할 수 있습니다. 예를 들어, window.deviceRatio가 2인 디바이스이고 이미지 크기가 200 x 100인 경우, 이 속성을 100 x 50으로 설정하면 실제 이미지 크기보다 2배 줄여서 보여줌으로써 레티나 디스플레이에 대응할 수 있습니다. origin naver.maps.Point | PointLiteral &lt;optional&gt; (x: 0, y: 0) 스프라이트 이미지의 아이콘을 사용할 때 이미지의 원점입니다. 즉, 이 원점 위치로부터 size 속성의 값만큼 화면에 노출됩니다. anchor naver.maps.Point | PointLiteral | naver.maps.Position &lt;optional&gt; 지도 위에 놓이는 마커의 위치와 일치시킬 아이콘의 기준 위치입니다. 이 속성을 설정하지 않으면 아이콘의 아래쪽 가운데로 설정합니다. MarkerOptions MarkerOptions 객체는 Marker를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description animation naver.maps.Animation &lt;optional&gt; 마커가 지도에 추가될 때 시작할 애니메이션입니다. map naver.maps.Map 마커를 표시할 Map 객체입니다. position Coord | CoordLiteral 마커의 위치를 나타내는 지도 좌표입니다. icon string | ImageIcon | SymbolIcon | HtmlIcon &lt;optional&gt; 마커의 모양입니다. 이 속성을 설정하지 않으면 기본 아이콘으로 설정합니다. 문자열로 입력할 때는 마커의 아이콘으로 사용할 이미지의 URL을 입력합니다. shape MarkerShape &lt;optional&gt; 마커의 인터랙션 영역입니다. title string &lt;optional&gt; null 마커에 마우스 오버 시 나타나는 툴팁 문자열입니다. 이 속성을 설정하지 않거나 빈 문자열로 설정하면 툴팁을 노출하지 않습니다. cursor string &lt;optional&gt; pointer 마커에 마우스 오버 시 나타나는 포인터 모양입니다. clickable boolean &lt;optional&gt; true 마커의 클릭 허용 여부입니다. 이 값이 false이면 마커는 사용자 인터랙션을 받지 않습니다. 또한 cursor 속성값도 반영되지 않습니다. draggable boolean &lt;optional&gt; false 마커의 드래그 허용 여부입니다. 이 속성은 clickable 속성보다 우선합니다. 즉, clickable 속성이 false라도 이 값이 true이면 클릭 등의 사용자 인터랙션을 받습니다. visible boolean &lt;optional&gt; true 마커의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 마커의 쌓임 순서입니다. MarkerShape MarkerShape 객체는 마커의 인터랙션 영역을 정의합니다. 일반적으로 이미지 또는 심벌 아이콘을 사용했을 때 클릭할 수 있는 영역은 다음 그림과 같이 사각형의 아이콘 크기로 설정됩니다. 그러나 이 객체를 이용하면 마커 모양대로 클릭할 수 있는 영역을 설정할 수 있습니다. Type: object Properties Name Type Description coords array 인터랙션 영역을 정의하는 도형의 좌표입니다. type string 인터랙션 영역을 정의하는 도형의 유형입니다. SymbolIcon SymbolIcon 객체는 심벌 마커에서 사용하는 아이콘을 정의합니다. 마커의 위치 (x: 0, y: 0)를 기준으로 폴리곤 좌표를 설정해 원하는 모양의 아이콘을 생성할 수 있습니다. Type: object Properties Name Type Argument Default Description path naver.maps.SymbolPath | Array.&lt;naver.maps.Point&gt; | Array.&lt;PointLiteral&gt; 마커 아이콘으로 사용할 벡터 폴리곤 좌표입니다. naver.maps.SymbolPath에서 미리 정의된 path를 사용할 수 있습니다. style naver.maps.SymbolStyle &lt;optional&gt; 도형 아이콘의 스타일입니다. path 속성을 naver.maps.SymbolPath로 사용하는 경우 생략할 수 있습니다. radius number &lt;optional&gt; 10 원 아이콘을 그리는 경우 원의 반지름을 정의합니다. fillColor string &lt;optional&gt; 폴리곤 배경색입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 폴리곤 배경색의 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; 폴리곤 선의 색상입니다. CSS 색상 표현법으로 설정합니다. strokeWeight number &lt;optional&gt; 1 폴리곤 선의 두께입니다. strokeOpacity number &lt;optional&gt; 1 폴리곤 선의 불투명도입니다. 값의 범위는 0~1입니다. anchor naver.maps.Point | PointLiteral | naver.maps.Position &lt;optional&gt; naver.maps.Position.BOTTOM_CENTER 지도 위에 놓이는 마커의 위치와 일치시킬 아이콘의 기준 위치입니다. × Search results Close "},"naver.maps.NaverMapTypeOptions.html":{"id":"naver.maps.NaverMapTypeOptions.html","title":"Class: naver.maps.NaverMapTypeOptions","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API NaverMapTypeOptions Class: naver.maps.NaverMapTypeOptions naver.maps. NaverMapTypeOptions NaverMapTypeOptions 클래스는 네이버 지도 유형의 옵션을 정의합니다. (Deprecated) 지도 타일이 변경되어 NaverStyleMapTypeOptions을 사용합니다. new naver.maps.NaverMapTypeOptions(options) Parameters Name Type Description options NaverImageMapTypeOptions 네이버 이미지 지도 유형 옵션 Tutorials 지도 유형 Methods &lt;static&gt; getBicycleLayer(opts) NAVER 자전거 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 자전거 레이어 지도 유형 &lt;static&gt; getBlankMap(opts) NAVER 일반 지도의 빈 타일 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도(빈 타일) 유형 &lt;static&gt; getCadastralLayer(opts) NAVER 지적도 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 지적도 레이어 지도 유형 &lt;static&gt; getHybridMap(opts) NAVER 위성 겹쳐보기 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 겹쳐보기 지도 유형 &lt;static&gt; getMapTypes(opts) 일반, 지형도, 위성, 겹쳐보기 지도 유형을 담고 있는 MapTypeRegistry 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 각 지도 유형에 적용할 옵션 Returns Type Description naver.maps.MapTypeRegistry NAVER 지도 유형 컬렉션 객체 &lt;static&gt; getNormalLabelLayer(opts) NAVER 일반 지도의 주기(Label) 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도의 주기(Label) 레이어 지도 유형 &lt;static&gt; getNormalMap(opts) NAVER 일반 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도 유형 &lt;static&gt; getSatelliteLabelLayer(opts) NAVER 위성 지도의 주기(Label) 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 지도의 주기(Label) 레이어 지도 유형 &lt;static&gt; getSatelliteMap(opts) NAVER 위성 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 지도 유형 &lt;static&gt; getStreetLayer(opts) NAVER 거리뷰 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 거리뷰 레이어 지도 유형 &lt;static&gt; getTerrainMap(opts) NAVER 지형도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 지형도 유형 &lt;static&gt; getTrafficLayer(opts) NAVER 교통 상황 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 교통 상황 레이어 지도 유형 &lt;static&gt; getVectorMap(opts) NAVER 일반 지도의 배경 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도의 배경 지도 유형 객체 &lt;static&gt; getWorldMap(opts) NAVER 세계 지도 유형 객체를 반환합니다. 이 지도 유형은 EPSG3857 Projection 객체를 사용하며, 최대/최소 줌 레벨은 0 ~ 7입니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 세계 지도 유형 Type Definitions NaverImageMapTypeOptions NaverImageMapTypeOptions 객체는 ImageMapTypeOptions를 상속받으며, NAVER 지도 전용으로 설계된 별도의 옵션을 추가로 정의합니다. Type: object Properties Name Type Argument Default Description maxZoom number &lt;optional&gt; 14 지도 유형의 최대 줌 레벨입니다. minZoom number &lt;optional&gt; -1 지도 유형의 최소 줌 레벨입니다. projection naver.maps.Projection &lt;optional&gt; naver.maps.UTMK_NAVER 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. tileSize naver.maps.Size &lt;optional&gt; (256,256) 지도 유형의 타일 크기입니다. hd string &lt;optional&gt; 고해상도 이미지 타일의 사용 여부입니다. window.devicePixelRation의 값이 2 이상이면 true로 설정됩니다. NaverStyleMapTypeOptions NaverStyleMapTypeOptions 객체는 ImageMapTypeOptions를 상속받으며, NAVER 지도 전용으로 설계된 별도의 옵션을 추가로 정의합니다. Type: object Properties Name Type Argument Default Description maxZoom number &lt;optional&gt; 21 지도 유형의 최대 줌 레벨입니다. minZoom number &lt;optional&gt; 0 지도 유형의 최소 줌 레벨입니다. projection naver.maps.Projection &lt;optional&gt; naver.maps.EPSG3857 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. tileSize naver.maps.Size &lt;optional&gt; (256,256) 지도 유형의 타일 크기입니다. hd string &lt;optional&gt; 고해상도 이미지 타일의 사용 여부입니다. window.devicePixelRation의 값이 2 이상이면 true로 설정됩니다. × Search results Close "},"naver.maps.NaverStyleMapTypeOptions.html":{"id":"naver.maps.NaverStyleMapTypeOptions.html","title":"Class: naver.maps.NaverStyleMapTypeOptions","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API NaverStyleMapTypeOptions Class: naver.maps.NaverStyleMapTypeOptions naver.maps. NaverStyleMapTypeOptions NaverStyleMapTypeOptions 클래스는 네이버 지도 유형의 옵션을 정의합니다. new naver.maps.NaverStyleMapTypeOptions(options) Parameters Name Type Description options NaverStyleMapTypeOptions 네이버 스타일 지도 유형 옵션 Tutorials 지도 유형 Methods &lt;static&gt; getBicycleLayer(opts) NAVER 자전거 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 자전거 레이어 지도 유형 &lt;static&gt; getBlankMap(opts) NAVER 일반 지도의 빈 타일 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도(빈 타일) 유형 &lt;static&gt; getCadastralLayer(opts) NAVER 지적도 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 지적도 레이어 지도 유형 &lt;static&gt; getHybridMap(opts) NAVER 위성 겹쳐보기 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 겹쳐보기 지도 유형 &lt;static&gt; getMapTypes(opts) 일반, 지형도, 위성, 겹쳐보기 지도 유형을 담고 있는 MapTypeRegistry 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 각 지도 유형에 적용할 옵션 Returns Type Description naver.maps.MapTypeRegistry NAVER 지도 유형 컬렉션 객체 &lt;static&gt; getNormalLabelLayer(opts) NAVER 일반 지도의 주기(Label) 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도의 주기(Label) 레이어 지도 유형 &lt;static&gt; getNormalMap(opts) NAVER 일반 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도 유형 &lt;static&gt; getSatelliteLabelLayer(opts) NAVER 위성 지도의 주기(Label) 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 지도의 주기(Label) 레이어 지도 유형 &lt;static&gt; getSatelliteMap(opts) NAVER 위성 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 지도 유형 &lt;static&gt; getStreetLayer(opts) NAVER 거리뷰 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 거리뷰 레이어 지도 유형 &lt;static&gt; getTerrainMap(opts) NAVER 지형도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 지형도 유형 &lt;static&gt; getTrafficLayer(opts) NAVER 교통 상황 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 교통 상황 레이어 지도 유형 &lt;static&gt; getTrafficMiniMap(opts) NAVER 위성 겹쳐보기 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 겹쳐보기 지도 유형 &lt;static&gt; getVectorMap(opts) NAVER 일반 지도의 배경 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도의 배경 지도 유형 객체 &lt;static&gt; getWorldMap(opts) NAVER 세계 지도 유형 객체를 반환합니다. 이 지도 유형은 EPSG3857 Projection 객체를 사용하며, 최대/최소 줌 레벨은 0 ~ 21입니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 세계 지도 유형 × Search results Close "},"naver.maps.OverlayView.html":{"id":"naver.maps.OverlayView.html","title":"Class: naver.maps.OverlayView","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API OverlayView Class: naver.maps.OverlayView naver.maps. OverlayView OverlayView 클래스는 오버레이를 만들 때 구현해야 할 여러 메서드를 정의하는 추상 클래스입니다. NAVER 지도 API v3에서 제공하는 모든 오버레이(마커, 정보 창 등)는 이 클래스를 상속받아 구현되었습니다. 사용자 정의 오버레이를 만들려면 이 클래스를 상속받아 구현해야 합니다. 이때 다음 메서드는 반드시 재정의해야 합니다. onAdd: 지도에 오버레이를 추가할 때 호출됩니다. onRemove: 지도에서 오버레이를 제거할 때 호출됩니다. draw: 지도에 오버레이를 그릴 때 호출됩니다. new naver.maps.OverlayView() Tutorials 사용자 정의 오버레이 Extends naver.maps.KVO Methods &lt;abstract&gt; draw() 지도에 오버레이를 그릴 때 호출됩니다. 지도의 창(pane) 위에 원하는 오버레이를 그리고, 배치하는 기능을 구현합니다. getContainerTopLeft() 현재 지도 컨테이너 요소의 left, top 픽셀값을 반환합니다. Returns Type naver.maps.Point getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 getPanes() 오버레이 요소를 추가할 수 있는 지도의 창(pane) 요소 집합 객체를 반환합니다. Returns Type Description MapPanes MapPanes 객체 getProjection() 지도 좌표, 화면 좌표 간에 변환할 수 있는 MapSystemProjection 객체를 반환합니다. 반환된 객체를 이용해 지도 위의 원하는 위치에 오버레이를 배치할 수 있습니다. Returns Type Description naver.maps.MapSystemProjection MapSystemProjection 객체 &lt;abstract&gt; onAdd() 지도에 오버레이를 추가할 때 호출됩니다. 오버레이 요소를 Map 객체의 창(pane) 요소에 추가하는 기능을 구현합니다. MapPanes 중 적합한 창 요소에 오버레이 요소를 추가합니다. &lt;abstract&gt; onRemove() 지도에서 오버레이를 제거할 때 호출됩니다. 오버레이 요소를 Map 객체의 창(pane) 요소에서 제거하는 기능을 구현합니다. setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 × Search results Close "},"naver.maps.Panorama.html":{"id":"naver.maps.Panorama.html","title":"Class: naver.maps.Panorama","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Panorama Class: naver.maps.Panorama naver.maps. Panorama Panorama 클래스는 애플리케이션에서 파노라마 인스턴스를 정의합니다. 개발자는 이 객체를 생성해서 지정한 DOM 요소에 파노라마를 삽입할 수 있습니다. 이 클래스는 panorama 서브 모듈을 로드해야 합니다. new naver.maps.Panorama(panoramaDiv, panoramaOptions) Parameters Name Type Description panoramaDiv string | HTMLElement 파노라마를 삽입할 HTML 요소 panoramaOptions PanoramaOptions 파노라마 옵션 Tutorials 파노라마 생성 및 기본 동작 Requires module:panorama Example Panorama 기본 사용법 var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814), size: new naver.maps.Size(800, 600), pov: { pan: -135, tilt: 29, fov: 100 } }); naver.maps.Event.addListener(pano, \"init\", function() { console.log(\"init\"); }); naver.maps.Event.addListener(pano, \"pano_status\", function(status) { console.log(\"pano_status\", status, pano.getPanoId()); }); naver.maps.Event.addListener(pano, \"pano_changed\", function() { console.log(\"pano_changed\", pano.getLocation()); }); naver.maps.Event.addListener(pano, \"pov_changed\", function() { console.log(\"pov_changed\", pano.getPov()); }); Extends naver.maps.KVO Requires module:panorama Methods getElement() 파노라마의 HTML 요소를 반환합니다. Returns Type Description HTMLElement 현재 파노라마의 HTML 요소 getLocation() 파노라마의 위치 정보를 반환합니다. Returns Type Description PanoramaLocation 위치 정보 getMaxScale() 파노라마의 최대 배율을 반환합니다. Returns Type Description number 파노라마 최대 배율 getMaxZoom() 파노라마의 최대 줌 레벨을 반환합니다. Returns Type Description number 파노라마 최대 줌 레벨 getMinScale() 파노라마의 최소 배율을 반환합니다. Returns Type Description number 파노라마 최소 배율 getMinZoom() 파노라마의 최소 줌 레벨을 반환합니다. Returns Type Description number 파노라마 최소 줌 레벨 getOptions(key) 파노라마의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 getPanoId() 파노라마의 id를 반환합니다. Returns Type Description string 파노라마 id getPosition() 파노라마의 위치를 반환합니다. Returns Type Description naver.maps.LatLng 파노라마 위치 getPov() 파노라마의 시야를 반환합니다. Returns Type Description PanoramaPov 파노라마 시야 getProjection() 파노라마의 투영을 반환합니다. Returns Type Description PanoramaProjection 파노라마 투영 객체 getScale() 파노라마의 배율을 반환합니다. Returns Type Description number 파노라마 배율 getSize() 파노라마의 화면 크기를 반환합니다. Returns Type Description naver.maps.Size 파노라마 화면 크기 getVisible() 파노라마의 노출 여부를 반환합니다. Returns Type Description boolean 파노라마 노출 여부 getZoom() 파노라마의 줌 레벨을 반환합니다. Returns Type Description number 파노라마 줌 레벨 setOptions(newOptions|key, value) 파노라마의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Argument Description newOptions|key object | string 파노라마의 옵션 객체 또는 특정 옵션의 이름 value any &lt;optional&gt; 옵션의 값 setPanoId(panoId) 파노라마의 id를 설정합니다. Parameters Name Type Description panoId string 파노라마 id Fires pano_status pano_changed setPanoIdWithPov(panoId, pov) 파노라마의 id와 시야를 함께 설정합니다. Parameters Name Type Description panoId string 파노라마 id pov PanoramaPov 파노라마 시야 Fires pano_status pano_changed pov_changed setPosition(position) 파노라마의 위치를 설정합니다. 해당 위치에서 가장 가까운 파노라마(검색 반경 300미터)를 자동으로 설정합니다. Parameters Name Type Description position naver.maps.LatLng | LatLngLiteral 파노라마 위치 Fires pano_status pano_changed setPov(pov) 파노라마의 시야를 설정합니다. Parameters Name Type Description pov PanoramaPov 파노라마 시야 Fires pov_changed setScale(scale) 파노라마의 배율을 설정합니다. Parameters Name Type Description scale number 파노라마 배율 setSize(size) 파노라마의 화면 크기를 펙셀 단위로 설정합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 파노라마 화면 크기 setVisible(visible) 파노라마의 노출 여부를 설정합니다. Parameters Name Type Description visible boolean 파노라마 노출 여부 setZoom(zoom) 파노라마의 줌 레벨을 설정합니다. Parameters Name Type Description zoom number 파노라마 줌 레벨 Fires pov_changed zoomIn() 파노라마를 1 레벨 확대합니다. Fires pov_changed zoomOut() 파노라마를 1 레벨 축소합니다. Fires pov_changed Type Definitions PanoramaLocation PanoramaLocation 객체는 파노라마의 위치 정보를 나타냅니다. Type: object Properties Name Type Description panoId string 파노라마의 id입니다. title string 파노라마의 도로명입니다. address string 파노라마의 주소입니다. coord naver.maps.LatLng 파노라마 위치(촬영 위치)의 위/경도 좌표입니다. photodate string 파노라마의 촬영일입니다. PanoramaOptions PanoramaOptions 객체는 파노라마를 정의하는 옵션을 나타냅니다. panoId 속성과 position 속성 중 하나는 반드시 설정해야 합니다. 두 속성을 모두 설정하면, 우선순위에 따라 panoId 속성을 적용합니다. Type: object Properties Name Type Default Description size naver.maps.Size | SizeLiteral 파노라마의 크기입니다. 이 옵션을 설정하지 않으면 파노라마 초기화 시 파노라마 개체가 삽입된 요소의 크기로 설정합니다. panoId string 파노라마의 id입니다. position naver.maps.LatLng | LatLngLiteral 파노라마의 위/경도 좌표입니다. pov PanoramaPov 파노라마의 시야 정보입니다. visible boolean true 파노라마의 노출 여부입니다. minScale number 0 파노라마의 최소 배율입니다. maxScale number 10 파노라마의 최대 배율입니다. minZoom number 0 파노라마의 최소 줌 레벨입니다. maxZoom number 4 파노라마의 최대 줌 레벨입니다. flightSpot boolean true 주변 항공뷰 아이콘 표시 여부입니다. logoControl boolean true NAVER 로고 컨트롤의 표시 여부입니다. logoControlOptions LogoControlOptions NAVER 로고 컨트롤의 옵션입니다. 자세한 설명은 LogoControlOptions 명세를 참고합니다. zoomControl boolean false 줌 컨트롤의 표시 여부입니다. zoomControlOptions ZoomControlOptions 줌 컨트롤의 옵션입니다. 자세한 설명은 ZoomControlOptions 명세를 참고합니다. aroundControl boolean false 주변 컨트롤(거리뷰/항공뷰 전환)의 표시 여부입니다. aroundControlOptions AroundControlOptions 주변 컨트롤(거리뷰/항공뷰 전환)의 옵션입니다. 자세한 설명은 AroundControlOptions 명세를 참고합니다. Example var panoramaOptions = { size: new naver.maps.Size(800, 600), // panoId: \"GeuHvj1YMFW56xcrravtcg==\", position: new naver.maps.LatLng(37.3599605, 127.1058814), pov: { pan: -135, tilt: 29, fov: 100 }, visible: true, aroundControl: true, minScale: 0, maxScale: 10, minZoom: 0, maxZoom: 4, flightSpot: true, logoControl: true, logoControlOptions: { position: naver.maps.Position.BOTTOM_RIGHT }, zoomControl: true, zoomControlOptions: { position: naver.maps.Position.TOP_LEFT, style: naver.maps.ZoomControlStyle.SMALL }, aroundControl: true, aroundControlOptions: { position: naver.maps.Position.TOP_RIGHT } }; var panorama = new naver.maps.Panorama(\"pano\",panoramaOptions); PanoramaPov PanoramaPov 객체는 파노라마의 시야(POV, Point of View) 정보를 나타냅니다. Type: object Properties Name Type Default Description pan number 0 카메라의 이동(좌우) 위치입니다. 진북 기준이며, 값은 -180(좌)~180(우)입니다. tilt number 0 카메라의 이동(상하) 위치입니다. 값은 -90(하)~90(상)입니다. fov number 90 카메라의 각도입니다. 값은 100(최대)~20(최소)입니다. Events init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. × Search results Close "},"naver.maps.PanoramaProjection.html":{"id":"naver.maps.PanoramaProjection.html","title":"Interface: PanoramaProjection","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API PanoramaProjection Interface: PanoramaProjection naver.maps. PanoramaProjection PanoramaProjection 인터페이스는 파노라마의 투영을 나타내는 것으로, 좌표 변환과 같은 작업에 필요한 메서드를 제공합니다. 이 인터페이스는 Panorama 인스턴스의 getProjection 메서드를 이용해 가져올 수 있으며, 직접 초기화해서 사용할 수 없습니다. Extends naver.maps.KVO Requires module:panorama Methods fromCoordToPov(coord) 지정한 위/경도 좌표에 해당하는 파노라마 시야를 반환합니다. Parameters Name Type Description coord naver.maps.LatLng 위/경도 좌표 Returns Type Description PanoramaPov 파노라마 시야 Example 파노라마 초기화 이벤트 발생 시 추가한 마커를 바라보도록 시야를 조정하는 예제 var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); var marker = new naver.maps.Marker({ position: new naver.maps.LatLng(37.359484, 127.105333) }); naver.maps.Event.addListener(pano, \"init\", function() { marker.setMap(pano); var proj = pano.getProjection(); var lookAtPov = proj.fromCoordToPov(marker.getPosition()); if (lookAtPov) { pano.setPov(lookAtPov); } }); × Search results Close "},"naver.maps.Point.html":{"id":"naver.maps.Point.html","title":"Class: naver.maps.Point","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Point Class: naver.maps.Point naver.maps. Point Point 클래스는 2차원 평면의 좌표를 정의합니다. new naver.maps.Point(x, y) Parameters Name Type Default Description x number 0 x 좌표 y number 0 y 좌표 Methods add(x, y) 좌표 객체의 x, y에 지정한 수치를 더합니다. Parameters Name Type Description x number x 좌표 y number y 좌표 Returns Type Description naver.maps.Point this add(point) 좌표 객체의 x, y에 지정한 좌표의 x, y를 더합니다. Parameters Name Type Description point Coord | PointLiteral 더할 좌표 객체 Returns Type Description naver.maps.Point this ceil() 좌표 객체의 x, y값을 올려 정수 형태로 만듭니다. Returns Type Description naver.maps.Point this clone() 객체의 복제본을 반환합니다. Returns Type Description naver.maps.Point 복제된 객체 div(point) 좌표 객체의 x, y에 지정한 좌표의 x, y를 나눕니다. Parameters Name Type Description point Coord | PointLiteral 나눌 좌표 객체 Returns Type Description naver.maps.Point this div(x, y) 좌표 객체의 x, y에 지정한 수치를 나눕니다. Parameters Name Type Description x number x 좌표 y number y 좌표 Returns Type Description naver.maps.Point this equals(point) 객체의 좌표와 지정한 좌표가 같은지 여부를 확인합니다. Parameters Name Type Description point Coord | PointLiteral 비교할 좌표 객체 Returns Type Description boolean 동일 여부 floor() 좌표 객체의 x, y값의 소수점 이하를 버리고 정수 형태로 만듭니다. Returns Type Description naver.maps.Point this mul(x, y) 좌표 객체의 x, y에 지정한 수치를 곱합니다. Parameters Name Type Description x number x 좌표 y number y 좌표 Returns Type Description naver.maps.Point this mul(point) 좌표 객체의 x, y에 지정한 좌표의 x, y를 곱합니다. Parameters Name Type Description point Coord | PointLiteral 곱할 좌표 객체 Returns Type Description naver.maps.Point this round() 좌표 객체의 x, y값을 반올림한 정수 형태로 만듭니다. Returns Type Description naver.maps.Point this sub(point) 좌표 객체의 x, y에 지정한 좌표의 x, y를 뺍니다. Parameters Name Type Description point Coord | PointLiteral 뺄 좌표 객체 Returns Type Description naver.maps.Point this sub(x, y) 좌표 객체의 x, y에 지정한 수치를 뺍니다. Parameters Name Type Description x number x 좌표 y number y 좌표 Returns Type Description naver.maps.Point this toString() 객체의 좌표를 문자열로 반환합니다. Returns Type Description string 좌표를 나타내는 문자열로 형식은 (x,y)입니다. Example var point = new naver.map.Point(128, 256); point.toString(); // '(128,256)' × Search results Close "},"naver.maps.PointBounds.html":{"id":"naver.maps.PointBounds.html","title":"Class: naver.maps.PointBounds","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API PointBounds Class: naver.maps.PointBounds naver.maps. PointBounds PointBounds 클래스는 최소 좌표와 최대 좌표를 포함하는 직사각형의 지리적 영역(이하 좌표 경계)을 정의합니다. new naver.maps.PointBounds(minPoint, maxPoint) Parameters Name Type Description minPoint naver.maps.Point 최소 좌표 maxPoint naver.maps.Point 최대 좌표 Methods &lt;static&gt; bounds(point, pointN) 두 개 이상의 좌표 중 최소/최대 좌표를 선정하여 새로운 PointBounds 객체를 반환하는 팩토리 메서드입니다. Parameters Name Type Argument Description point Coord | PointLiteral 좌표 객체 pointN Coord | PointLiteral &lt;repeatable&gt; 좌표 객체 Returns Type Description naver.maps.PointBounds 좌표 경계 clone() 객체의 복제본을 반환합니다. Returns Type Description naver.maps.PointBounds 복제된 객체 equals(bounds) 객체의 좌표 경계와 지정한 좌표 경계가 같은지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 비교할 좌표 경계 객체 Returns Type Description boolean 동일 여부 extend(point) 객체의 좌표 경계에 지정한 좌표가 들어가도록 좌표 경계를 확장합니다. Parameters Name Type Description point Coord | PointLiteral 확장할 좌표 Returns Type Description naver.maps.PointBounds this getCenter() 좌표 경계의 중심 좌표를 반환합니다. Returns Type Description naver.maps.Point 좌표 경계의 중심 좌표 getMax() 좌표 경계의 최대 좌표를 반환합니다. Returns Type Description naver.maps.Point 최대 좌표 getMin() 좌표 경계의 최소 좌표를 반환합니다. Returns Type Description naver.maps.Point 최소 좌표 hasBounds(bounds) 객체의 좌표 경계가 지정한 좌표 경계를 포함하는지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 확인할 좌표 경계 객체 Returns Type Description boolean 포함 여부 hasPoint(point) 객체의 좌표 경계 내에 지정한 좌표가 있는지 여부를 확인합니다. Parameters Name Type Description point Coord | PointLiteral 확인할 좌표 객체 Returns Type Description boolean 포함 여부 intersects(bounds) 객체의 좌표 경계가 지정한 좌표 경계와 겹치는 부분이 있는지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 확인할 좌표 경계 객체 Returns Type Description boolean 겹침 여부 maxX() 최대 좌표의 x 좌표를 반환합니다. Returns Type Description number x 좌표 maxY() 최대 좌표의 y 좌표를 반환합니다. Returns Type Description number y 좌표 minX() 최소 좌표의 x 좌표를 반환합니다. Returns Type Description number x 좌표 minY() 최소 좌표의 y 좌표를 반환합니다. Returns Type Description number y 좌표 toString() 객체의 좌표 경계를 문자열로 반환합니다. Returns Type Description string 좌표 경계를 나타내는 문자열로 형식은 (({minX},{minY}),({maxX},{maxY}))입니다. Example var bounds = new naver.map.PointBounds( new naver.maps.Point(0, 0), new naver.maps.Point(256, 256)); bounds.toString(); // '((0,0),(256,256))' union(bounds) 객체의 좌표 경계와 지정한 좌표 경계를 모두 포함하는 새로운 좌표 경계 객체를 반환합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 확장할 좌표 경계 Returns Type Description naver.maps.PointBounds 확장된 새로운 좌표 경계 객체 × Search results Close "},"naver.maps.Polygon.html":{"id":"naver.maps.Polygon.html","title":"Class: naver.maps.Polygon","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Polygon Class: naver.maps.Polygon naver.maps. Polygon Polygon 클래스는 폴리곤을 정의합니다. new naver.maps.Polygon(options) Parameters Name Type Argument Description options PolygonOptions &lt;optional&gt; 도형 옵션 Tutorials 도형 Extends naver.maps.OverlayView Methods getAreaSize() 도형의 전체 면적을 제곱미터 단위로 반환합니다. Returns Type Description number 면적 getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description PolygonOptions | any 도형 옵션 getPath() 첫 번째 도형의 좌표 목록을 반환합니다. Returns Type Description ArrayOfCoords | KVOArrayOfCoords 첫 번째 도형의 좌표 목록 getPaths() 모든 도형의 좌표 목록을 반환합니다. Returns Type Description Array.&lt;ArrayOfCoords&gt; | KVOArray.&lt;KVOArrayOfCoords&gt; 모든 도형의 좌표 목록 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description PolygonOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setClickable(clickable) 도형의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부 Fires clickable_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options PolygonOptions 도형 옵션 Fires clickable_changed visible_changed zIndex_changed setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션값 Fires clickable_changed visible_changed zIndex_changed setPath(path) 도형의 좌표 목록을 설정합니다. Parameters Name Type Description path ArrayOfCoords | KVOArrayOfCoords | ArrayOfCoordsLiteral 도형 좌표 목록 setPaths(paths) 도형의 좌표 목록을 설정합니다. Parameters Name Type Description paths Array.&lt;ArrayOfCoords&gt; | KVOArray.&lt;KVOArrayOfCoords&gt; | Array.&lt;ArrayOfCoordsLiteral&gt; 도형 좌표 목록. 여러 개의 path로 구성됩니다. setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일값 setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options PolygonOptions 도형 스타일 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions PolygonOptions PolygonOptions 객체는 Polygon을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. paths Array.&lt;ArrayOfCoords&gt; | KVOArray.&lt;KVOArrayOfCoords&gt; | Array.&lt;ArrayOfCoordsLiteral&gt; 도형의 좌표 목록입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; none 도형 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. Events click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.Polyline.html":{"id":"naver.maps.Polyline.html","title":"Class: naver.maps.Polyline","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Polyline Class: naver.maps.Polyline naver.maps. Polyline Polyline 클래스는 폴리라인을 정의합니다. new naver.maps.Polyline(options) Parameters Name Type Argument Description options PolylineOptions &lt;optional&gt; 도형 옵션 Tutorials 도형 Extends naver.maps.OverlayView Methods getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDistance() 폴리라인의 길이를 반환합니다. Returns Type Description number 폴리라인의 길이(미터) getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description PolylineOptions | any 도형 옵션 getPath() 도형 좌표 목록을 반환합니다. 내부적으로 좌표 목록은 KVOArray 객체로 관리됩니다. 따라서 도형의 좌표를 동적으로 추가, 삭제, 수정할 수 있습니다. Returns Type Description ArrayOfCoords | KVOArrayOfCoords 도형 좌표 목록 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description PolylineOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setClickable(clickable) 도형의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부 Fires clickable_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options PolylineOptions 도형 옵션 Fires clickable_changed visible_changed zIndex_changed setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션 값 setPath(path) 도형의 좌표 목록을 설정합니다. Parameters Name Type Description path ArrayOfCoords | KVOArrayOfCoords | ArrayOfCoordsLiteral 도형 좌표 목록. 내부적으로 좌표 목록은 KVOArray 객체로 관리됩니다. 따라서 도형의 좌표를 동적으로 추가, 삭제, 수정할 수 있습니다. setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options PolylineOptions 도형 스타일 setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일 값 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions PolylineOptions PolylineOptions 객체는 Polyline을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. path ArrayOfCoords | KVOArrayOfCoords | ArrayOfCoordsLiteral 도형의 좌표 목록입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. startIcon naver.maps.PointingIcon &lt;optional&gt; 도형의 시작점에 표시할 아이콘입니다. 아래와 같이 지원합니다. startIconSize number &lt;optional&gt; 도형의 시작점에 표시할 아이콘의 크기(픽셀)입니다. 해당 옵션은 IE9 이상에서 지원합니다. endIcon naver.maps.PointingIcon &lt;optional&gt; 도형의 끝점에 표시할 아이콘입니다. 아래와 같이 지원합니다. endIconSize number &lt;optional&gt; 도형의 끝점에 표시할 아이콘의 크기(픽셀)입니다. 해당 옵션은 IE9 이상에서 지원합니다. Events click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.Projection.html":{"id":"naver.maps.Projection.html","title":"Interface: Projection","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Projection Interface: Projection naver.maps. Projection Projection 클래스는 지도 투영을 만들 때 구현해야 할 메서드와 속성을 정의하고 있는 기본 클래스입니다. NAVER 지도 API에서 기본으로 제공하는 투영(UTMK, EPSG3857 등)은 이 클래스를 상속받아 구현되었습니다. 사용자 정의 지도 투영을 만들려면 이 클래스를 상속받아 구현합니다. Tutorials 지도 투영과 좌표 체계 Methods fromCoordToPoint(coord) 지정한 지도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord Coord 지도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 지도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description Coord 지도 좌표 × Search results Close "},"naver.maps.Rectangle.html":{"id":"naver.maps.Rectangle.html","title":"Class: naver.maps.Rectangle","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Rectangle Class: naver.maps.Rectangle naver.maps. Rectangle Rectangle 클래스는 사각형 모양의 폴리곤을 정의합니다. new naver.maps.Rectangle(options) Parameters Name Type Argument Description options RectangleOptions &lt;optional&gt; 도형 옵션 Tutorials 도형 Extends naver.maps.OverlayView Methods getAreaSize() 도형의 전체 면적을 제곱미터 단위로 반환합니다. Returns Type Description number 면적 getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description RectangleOptions | any 도형 옵션 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description RectangleOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setBounds(bounds) 도형의 좌표 경계를 설정합니다. Parameters Name Type Description bounds Bounds | BoundsLiteral 좌표 경계 Fires bounds_changed setClickable(clickable) 도형의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부 Fires clickable_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options RectangleOptions 도형 옵션 Fires bounds_changed clickable_changed visible_changed zIndex_changed setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션값 Fires bounds_changed clickable_changed visible_changed zIndex_changed setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일 값 setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options RectangleOptions 도형 스타일 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions RectangleOptions RectangleOptions 객체는 Rectangle을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. bounds Bounds | BoundsLiteral 도형의 좌표 경계입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; none 도형 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. Events bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.ScaleControl.html":{"id":"naver.maps.ScaleControl.html","title":"Class: naver.maps.ScaleControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API ScaleControl Class: naver.maps.ScaleControl naver.maps. ScaleControl ScaleControl 클래스는 지도 축척 컨트롤을 정의합니다. new naver.maps.ScaleControl(ScaleControlOptions) Parameters Name Type Description ScaleControlOptions ScaleControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { scaleControl: true, scaleControlOptions: { position: naver.maps.Position.TOP_LEFT } }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions ScaleControlOptions ScaleControlOptions 객체는 지도 축척 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position BOTTOM_RIGHT 지도 축척 컨트롤을 배치할 위치입니다. × Search results Close "},"naver.maps.Service.html":{"id":"naver.maps.Service.html","title":"StaticObjects: Service","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Service StaticObjects: Service naver.maps. Service Service 객체는 NAVER 지도 API v3을 이용해 호출할 수 있는 서버 API들을 메서드로 제공합니다. Tutorials Geocoder를 활용한 주소와 좌표 검색 API 호출하기 Members &lt;static, readonly&gt; CoordinatesType CoordinatesType 객체는 좌표 체계의 이름을 나타냅니다. Properties Name Type Default Description LATLNG string epsg:4326 위/경도(WGS 84) 좌표계를 나타냅니다. UTMK string nhn:2048 UTMK 좌표계를 나타냅니다. TM128 string nhn:128 TM128(KATECH) 좌표계를 나타냅니다. EPSG3857 string epsg:3857 구글맵(EPSG3857) 좌표계를 나타냅니다. &lt;static, readonly&gt; GeocodeStatus GeocodeStatus Geocode 응답 상태를 나타냅니다. Properties Name Type Default Description OK string OK 정상 응답 INVALID_REQUEST string INVALID_REQUEST 요청 에러 SYSTEM_ERROR string SYSTEM_ERROR 예외처리가 안된 에러 &lt;static, readonly&gt; OrderType OrderType 객체는 변환 작업 이름을 나타냅니다. Properties Name Type Default Description LEGAL_CODE string legalcode 좌표를 법정동으로 나타냅니다. ADDR string addr 좌표를 행정동으로 나타냅니다. ROAD_ADDR string roadaddr 좌표를 지번 주소로 나타냅니다. ADM_CODE string admcode 좌표를 도로명 주소로 나타냅니다. &lt;static, readonly&gt; ReverseGeocodeStatusCode ReverseGeocodeStatusCode ReverseGeocode 응답 상태 코드를 나타냅니다. Properties Name Type Default Description CODE_0 string 0 정상적인 기능수행 및 반환된 결과가 있는 경우 CODE_3 string 3 정상적인 기능수행 및 반환된 결과가 없는 경우 CODE_100 string 100 요청 파라미터가 잘못된 경우 CODE_900 string 900 정의되지 않은 에러 &lt;static, readonly&gt; ReverseGeocodeStatusName ReverseGeocodeStatusName ReverseGeocode 응답 상태 이름을 나타냅니다. Properties Name Type Argument Default Description OK string ok 정상적인 기능수행 및 반환된 결과가 있는 경우 NO_RESULTS string &lt;optional&gt; no result 정상적인 기능수행 및 반환된 결과가 없는 경우 INVALID_REQUEST string &lt;optional&gt; invalid request 요청 파라미터가 잘못된 경우 UNKNOWN_ERROR_IO_ERROR string &lt;optional&gt; unknown error / io error 정의되지 않은 에러 &lt;static, readonly&gt; Status Status 객체는 서비스의 응답 상태를 나타냅니다. Properties Name Type Default Description OK number 200 요청이 성공한 상태입니다. ERROR number 500 요청이 실패한 상태입니다. Methods fromAddrToCoord() 특정 주소의 좌표를 반환하는 geocode API를 호출합니다. See naver.maps.Service#geocode fromCoordToAddr() 특정 좌표에 해당하는 주소를 반환하는 reversegeocode API를 호출합니다. See naver.maps.Service#reverseGeocode geocode(options, callback) 특정 주소의 좌표를 반환하는 geocode API를 호출합니다. Parameters Name Type Description options ServiceOptions 서버 API 호출 시 전달할 옵션 Properties Name Type Description query string 주소 검색을 위한 주소 coordinate string 검색 중심 좌표. lon,lat 형식 filter string 검색 결과 필터링 조건. ’필터 타입@코드1;코드2;… ’ 형식 예) HCODE@4113554500;4113555000 - HCODE: 행정동 코드 - BCODE: 법정동 코드 page number 페이지 번호 count number 결과 목록 크기 callback function 결과 반환 시 실행할 콜백 함수 Properties Name Type Argument Description status naver.maps.Service.Status 응답 결과에 대한 상태 코드 response GeocodeResponse &lt;optional&gt; 응답 본문 reverseGeocode(options, callback) 특정 좌표에 해당하는 주소를 반환하는 reversegeocode API를 호출합니다. Parameters Name Type Description options ServiceOptions 서버 API 호출 시 전달할 옵션 Properties Name Type Description coords string | Coord | CoordLiteral 주소 검색을 위한 입력 좌표 sourcecrs string 입력 좌표계 코드 targetcrs string 출력 좌표계 코드 orders string 변환 작업 이름 callback function 결과 반환 시 실행할 콜백 함수 Properties Name Type Argument Description status naver.maps.Service.Status 응답 결과의 상태 코드 response ReverseGeocodeResponse &lt;optional&gt; 응답 본문 Type Definitions Addition0 Addition0은 추가정보 나타냅니다. 지번 주소인 경우 reserved, 도로명 주소인 경우 건물정보 Type: object Properties Name Type Description type string 도로명 주소이고 건물정보가 있는경우 ‘building’ value string 도로명 주소이고 건물정보가 있는경우 건물명 Addition1 Addition1은 추가정보 나타냅니다. 지번 주소인 경우 reserved, 도로명 주소인 경우 우편번호 Type: object Properties Name Type Description type string 도로명 주소이고 우편번호정보가 있는경우 ‘zipcode’ value string 도로명 주소이고 우편번호정보가 있는경우 우편번호 Addition2 Addition2은 추가정보 나타냅니다. 지번 주소인 경우 reserved, 도로명 주소인 경우 도로코드 Type: object Properties Name Type Description type string 도로명 주소일경우 ‘roadGroupCode’ value string 도로명 주소일경우 도로코드(12자리 road group code) Addition3 Addition3 reserved Type: object Addition4 Addition4 reserved Type: object AddressItem AddressItem은 특정 주소의 정보를 나타냅니다. (deprecated) Type: object Properties Name Type Description address string 개별 주소의 전체 텍스트 addrdetail object 개별 주소의 상세 정보 Properties Name Type Description country string 개별 주소의 국가명 sido string 개별 주소가 속한 특별시/광역시/도에 해당되는 정보 sigugun string 개별 주소가 속한 일반시/구/군/면 해당되는 정보 dongmyun string 개별 주소가 속한 동/면/리에 해당되는 정보 rest string 지번 주소 또는 도로명과 같은 개별 주소의 나머지 정보 isRoadAddress boolean 해당 주소가 도로명 주소인지 여부 point PointObjectLiteral 개별 주소의 좌표 AddressItemV2 AddressItemV2은 주소 검색 결과를 나타냅니다. Type: object Properties Name Type Description roadAddress string 도로명 주소 jibunAddress string 지번 주소 englishAddress string 영어 주소 addressElements array 주소를 이루는 요소들 x string x 좌표(경도) y string y 좌표(위도) distance string 검색 중심 좌표로부터의 거리(단위: 미터) Area0 Area0은 국가 정보를 나타냅니다. Type: object Properties Name Type Description name string 국가 코드 최상위 도메인 두 자리 coords Coords 행정 구역과 관련된 좌표 Area1 Area1은 행정 구역 단위 명칭 1 정보 나타냅니다. Type: object Properties Name Type Description name string 대한민국인 경우 행정안전부에서 공시된 시/도 명칭 coords Coords 행정 구역과 관련된 좌표 Area2 Area2은 행정 구역 단위 명칭 2 정보 나타냅니다. Type: object Properties Name Type Description name string 대한민국인 경우 행정안전부에서 공시된 시/군/구 명칭 coords Coords 행정 구역과 관련된 좌표 Area3 Area3은 행정 구역 단위 명칭 3 정보 나타냅니다. Type: object Properties Name Type Description name string 대한민국인 경우 행정안전부에서 공시된 읍/면/동 명칭 coords Coords 행정 구역과 관련된 좌표 Area4 Area4은 행정 구역 단위 명칭 4 정보 나타냅니다. Type: object Properties Name Type Description name string 대한민국인 경우 행정안전부에서 공시된 리 명칭 coords Coords 행정 구역과 관련된 좌표 Coords Coords은 행정 구역과 관련된 좌표를 나타냅니다. Type: object Properties Name Type Description center object 행정 구역의 중심 좌표 Properties Name Type Description crs string 좌표계 코드 x string x축 좌표, 예) 경위도(epsg:4326)인 경우 위도(longitude) y string y축 좌표, 예) 경위도(epsg:4326)인 경우 경도(latitude) GeocodeResponse GeocodeResponse는 특정 주소의 좌표를 반환하는 geocode API의 응답 형태입니다. Type: object Properties Name Type Description result object 기존 응답 형식의 내용을 담고 있는 컨테이너. (deprecated) Properties Name Type Description userquery string API에 질의한 주소 total number 사용자가 질의한 주소에 해당되는 좌표의 결과 수 items Array.&lt;naver.maps.Service~AddressItem&gt; 좌표 목록의 배열 v2 object API의 응답 내용을 담고 있는 컨테이너. Properties Name Type Description status naver.maps.Service.GeocodeStatus 검색 결과 상태 코드 meta Meta 응답 정보 addresses Array.&lt;naver.maps.Service~AddressItemV2&gt; 주소 검색 결과 목록 errorMessage string 예외 발생 시 메시지 Example { \"result\": { \"total\": 1, \"userquery\": \"불정로6\", \"items\": [ { \"address\": \"경기도 성남시 분당구 불정로 6 그린팩토리\", \"addrdetail\": { \"country\": \"대한민국\", \"sido\": \"경기도\", \"sigugun\": \"성남시 분당구\", \"dongmyun\": \"불정로\", \"rest\": \" 6 그린팩토리\" }, \"isRoadAddress\": true, \"point\": { \"x\": 127.1052133, \"y\": 37.3595316 } } ] }, \"v2\": { \"status\": \"OK\", \"meta\": { \"totalCount\": 1, \"page\": 1, \"count\": 1 }, \"addresses\": [ { \"roadAddress\": \"경기도 성남시 분당구 불정로 6 그린팩토리\", \"jibunAddress\": \"경기도 성남시 분당구 정자동 178-1 그린팩토리\", \"englishAddress\": \"6, Buljeong-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea\", \"addressElements\": [ { \"types\": [ \"POSTAL_CODE\" ], \"longName\": \"13561\", \"shortName\": \"\", \"code\": \"\" } ], \"x\": \"127.10522081658463\", \"y\": \"37.35951219616309\", \"distance\": 20.925857741585514 } ], \"errorMessage\": \"\" } } Land Land는 상세주소 정보 나타냅니다. Type: object Properties Name Type Description type string 지번주소의 경우 지적 타입, 예) 대한민국 지번 주소인 경우 1: 일반토지, 2: 산, 도로명주소의 경우 reserved name string 상세 명칭, 예) 대한민국 지번 주소인 경우 reserved, 대한민국 도로명 주소인 경우 도로명 number1 string 상세 번호 1, 예) 대한민국 지번 주소인 경우 토지 본번호, 대한민국 도로명 주소인 경우 상세주소 number2 string 상세 번호 2, 예) 대한민국 지번 주소인 경우 토지 부번호, 대한민국 도로명 주소인 경우 reserved coords Coords 지적 구역에 관계된 좌표 (reserved) Meta Meta는 응답 정보를 나타냅니다. Type: object Properties Name Type Description totalCount number 총 검색 건수 page number 현재 페이지 번호 count number 페이지 내 결과 개수 Region Region은 지역 명칭 정보을 나타냅니다. Type: object Properties Name Type Description area0 Area0 국가 정보 area1 Area1 시/도 정보 area2 Area2 시/군/구 정보 area3 Area3 읍/면/동 정보 area4 Area4 리 정보 land Land 상세주소 정보 addition0 Addition0 추가정보 addition1 Addition1 추가정보 addition2 Addition2 추가정보 addition3 Addition3 reserved addition4 Addition4 reserved ResultItem ResultItem은 ReverseGeocode 응답 결과를 나타냅니다. Type: object Properties Name Type Description name string 변환 작업 이름 code object 코드 정보 Properties Name Type Description id string 코드값 type string 코드 타입, 예) L: 법정동, A: 행정동, S: 동일법정동 이름 존재하는 행정동 mappingId string id와 관련된 매핑 코드, 예) 법정 코드의 매핑된 네이버 동 코드 또는 행정 코드의 매핑된 네이버 동 코드 region Region 지역 명칭 정보. ReverseGeocodeAddress ReverseGeocodeAddress은 ReverseGeocodeResponse 응답 값으로 만든 주소입니다. Type: object Properties Name Type Description roadAddress string 도로명 주소 (서버 응답 결과에 따라 지번 주소만 있을 수 있음) jibunAddress string 지번 주소 (서버 응답 결과에 따라 도로명 주소만 있을 수 있음) ReverseGeocodeResponse ReverseGeocodeResponse는 특정 좌표에 해당하는 주소를 반환하는 reversegeocode API의 응답 형태입니다. Type: object Properties Name Type Description result object 기존 응답 형식의 내용을 담고 있는 컨테이너. (deprecated) Properties Name Type Description userquery string API에 질의한 좌표 total number 사용자가 질의한 좌표에 해당되는 주소의 결과 수 items Array.&lt;naver.maps.Service~AddressItem&gt; 주소 목록의 배열 v2 object API의 응답 내용을 담고 있는 컨테이너. Properties Name Type Description status ReverseGeocodeStatus 응답 상태 results Array.&lt;naver.maps.Service~ResultItem&gt; 주소 목록의 배열 address ReverseGeocodeAddress 주소 결과 Example { \"result\": { \"total\": 2, \"userquery\": \"127.1052133,37.3595316\", \"items\": [ { \"address\": \"경기도 성남시 분당구 정자동 178-1\", \"addrdetail\": { \"country\": \"대한민국\", \"sido\": \"경기도\", \"sigugun\": \"성남시 분당구\", \"dongmyun\": \"정자동\", \"rest\": \"178-1\" }, \"isRoadAddress\": false, \"point\": { \"x\": 127.1052208, \"y\": 37.3595122 } }, { \"address\": \"경기도 성남시 분당구 불정로 6 그린팩토리\", \"addrdetail\": { \"country\": \"대한민국\", \"sido\": \"경기도\", \"sigugun\": \"성남시 분당구\", \"dongmyun\": \"불정로\", \"rest\": \"6 그린팩토리\" }, \"isRoadAddress\": true, \"point\": { \"x\": 127.1052133, \"y\": 37.3595316 } } ] }, \"v2\": { \"status\":{ \"code\":0, \"name\":\"ok\", \"message\":\"done\" }, \"results\":[ { \"name\":\"legalcode\", \"code\":{ \"id\":\"2641010100\", \"type\":\"L\", \"mappingId\":\"08410101\" }, \"region\":{ \"area0\":{ \"name\":\"kr\", \"coords\":{ \"center\":{ \"crs\":\"\", \"x\":0.0, \"y\":0.0 } } }, \"area1\":{ \"name\":\"부산광역시\", \"coords\":{ \"center\":{ \"crs\":\"EPSG:4326\", \"x\":129.0750222, \"y\":35.1798159 } } }, \"area2\":{ \"name\":\"금정구\", \"coords\":{ \"center\":{ \"crs\":\"EPSG:4326\", \"x\":129.0921, \"y\":35.243068 } } }, \"area3\":{ \"name\":\"두구동\", \"coords\":{ \"center\":{ \"crs\":\"EPSG:4326\", \"x\":129.1133567, \"y\":35.2982641 } } }, \"area4\":{ \"name\":\"\", \"coords\":{ \"center\":{ \"crs\":\"\", \"x\":0.0, \"y\":0.0 } } } } } ], address: { jibunAddress: \"경기도 성남시 분당구 정자동 178-1\", roadAddress: \"경기도 성남시 분당구 불정로 6 NAVER그린팩토리\" } } } ReverseGeocodeStatus ReverseGeocodeStatus은 ReverseGeocode 응답 상태를 나타냅니다. Type: object Properties Name Type Description code naver.maps.Service.ReverseGeocodeStatusCode 응답 상태 코드 name naver.maps.Service.ReverseGeocodeStatusName 응답 상태 이름 message string 응답 상태 설명 ServiceOptions ServiceOptions는 서버 API 호출 시 전달하기 위한 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description sourcecrs naver.maps.Service.CoordinatesType &lt;optional&gt; epsg:4326 입력 좌표계 코드 targetcrs naver.maps.Service.CoordinatesType &lt;optional&gt; epsg:4326 출력 좌표계 코드 orders naver.maps.Service.OrderType &lt;optional&gt; legalcode,admcode 변환 작업 이름 × Search results Close "},"naver.maps.Size.html":{"id":"naver.maps.Size.html","title":"Class: naver.maps.Size","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Size Class: naver.maps.Size naver.maps. Size Size 클래스는 2차원 평면의 크기를 정의합니다. new naver.maps.Size(width, height) Parameters Name Type Default Description width number 0 너비 height number 0 높이 Methods add(width, height) Size 객체의 너비와 높이에 지정한 수치를 더합니다. Parameters Name Type Description width number 너비 height number 높이 Returns Type Description naver.maps.Size this add(size) Size 객체의 너비와 높이에 지정한 Size 객체의 너비와 높이를 더합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 더할 Size 객체 Returns Type Description naver.maps.Size this ceil() Size 객체의 너비와 높이를 정수 형태(올림)로 만듭니다. Returns Type Description naver.maps.Size this clone() 객체의 복제본을 반환합니다. Returns Type Description naver.maps.Size 복제된 객체 div(size) Size 객체의 너비와 높이를 지정한 Size 객체의 너비와 높이로 나눕니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 나눌 Size 객체 Returns Type Description naver.maps.Size this div(width, height) Size 객체의 너비와 높이를 지정한 수치로 나눕니다. Parameters Name Type Description width number 너비 height number 높이 Returns Type Description naver.maps.Size this equals(size) 객체의 크기와 지정한 Size 객체의 크기가 같은지 여부를 확인합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 비교할 Size 객체 Returns Type Description boolean 동일 여부 floor() Size 객체의 너비와 높이를 정수 형태(소수점 이하 버림)로 만듭니다. Returns Type Description naver.maps.Size this mul(size) Size 객체의 너비와 높이에 지정한 Size 객체의 너비와 높이를 곱합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 곱할 Size 객체 Returns Type Description naver.maps.Size this mul(width, height) Size 객체의 너비와 높이에 지정한 수치를 곱합니다. Parameters Name Type Description width number 너비 height number 높이 Returns Type Description naver.maps.Size this round() Size 객체의 너비와 높이를 정수 형태(반올림)로 만듭니다. Returns Type Description naver.maps.Size this sub(size) Size 객체의 너비와 높이에서 지정한 Size 객체의 너비와 높이를 뺍니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 뺄 Size 객체 Returns Type Description naver.maps.Size this sub(width, height) Size 객체의 너비와 높이에서 지정한 수치를 뺍니다. Parameters Name Type Description width number 너비 height number 높이 Returns Type Description naver.maps.Size this toString() 객체의 크기를 문자열로 반환합니다. Returns Type Description string 크기를 나타내는 문자열로 형식은 (w:{너비},h:{높이})입니다. Example var size = new naver.map.Size(1024, 768); size.toString(); // '(w:1024,h:768)' × Search results Close "},"naver.maps.StreetLayer.html":{"id":"naver.maps.StreetLayer.html","title":"Class: naver.maps.StreetLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API StreetLayer Class: naver.maps.StreetLayer naver.maps. StreetLayer StreetLayer 클래스는 거리뷰 오버레이를 하나의 지도 유형으로 나타내는 레이어를 정의합니다. new naver.maps.StreetLayer(option) Parameters Name Type Argument Description option StreetLayerOptions &lt;optional&gt; 레이어 옵션 (Deprecated) Properties Name Type Description name string 레이어 이름입니다. 이 레이어의 이름은 street입니다. Tutorials 레이어 Extends naver.maps.LabelLayer Methods getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. (Deprecated) Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity Type Definitions StreetLayerOptions StreetLayerOptions 객체는 StreetLayer를 정의하는 옵션을 나타냅니다. (Deprecated) Type: object Properties Name Type Default Description overlayMap boolean true 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. zIndex number 10 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. × Search results Close "},"naver.maps.Tile.html":{"id":"naver.maps.Tile.html","title":"Class: naver.maps.Tile","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Tile Class: naver.maps.Tile naver.maps. Tile Tile 클래스는 한 장의 지도 타일을 정의합니다. new naver.maps.Tile(element, tileOptions) Parameters Name Type Argument Description element HTMLElement 지도 타일에 해당하는 HTML 요소 tileOptions TileOptions &lt;optional&gt; 타일의 옵션 Extends naver.maps.KVO Methods appendTo(parentNode) 지정한 parentNode에 타일 HTML 요소를 추가합니다. Parameters Name Type Description parentNode HTMLElement 타일이 추가될 HTML 요소 cancelFadeIn() 진행 중인 페이드 인(타일이 서서히 나타나는) 효과를 즉시 중지하고, 본래의 불투명도를 설정합니다. destroy() 타일 객체를 완전히 삭제합니다. fadeIn(callback, startOpacity) 페이드 인(타일이 서서히 나타나는) 효과를 실행합니다. Parameters Name Type Argument Default Description callback function 페이드 인 효과가 완료되었을 때 실행할 콜백 함수입니다. startOpacity number &lt;optional&gt; 0 페이드 인 효과의 시작 불투명도입니다. getDuration() 타일의 fadeIn 효과 지속시간을 반환합니다. Returns Type Description number 타일의 fadeIn animation duration getElement() 타일의 HTML 요소를 반환합니다. Returns Type Description HTMLElement 타일의 HTML 요소 getOffset() 타일의 오프셋(위치)을 반환합니다. Returns Type Description naver.maps.Point 타일의 오프셋 getOpacity() 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Returns Type Description number 0~1 사이의 실수. getSize() 타일의 크기를 반환합니다. Returns Type Description naver.maps.Size 타일의 크기 getTileIndex() 타일 인덱스를 반환합니다. Returns Type Description TileIndex 타일 인덱스 getZIndex() 타일의 쌓임 순서를 반환합니다. Returns Type Description number 타일의 쌓임 순서 hide() 타일을 숨깁니다. load(tileOptions, loaded) 타일을 불러옵니다. Parameters Name Type Argument Description tileOptions TileOptions &lt;optional&gt; 타일의 옵션 loaded function 이벤트 알림 이전에 실행할 함수 remove() 타일의 HTML 요소를 지도에서 삭제합니다. reset(mapType, zoom, tileOptions) 지정한 mapType에 맞게 타일을 재설정합니다. Parameters Name Type Argument Description mapType naver.maps.MapType 재설정할 지도 유형 zoom number 타일 재설정 시 적용할 지도의 줌 레벨 tileOptions TileOptions &lt;optional&gt; 타일의 옵션 setBlank() 타일의 내용물을 비워 공백으로 만듭니다. setDuration(duration) 타일의 fadeIn 효과 지속시간을 설정합니다. 단위는 밀리초 (millisecond), 기본값은 300~600ms 입니다. Parameters Name Type Description duration number 타일의 fadeIn animation duration setOffset(offset) 타일이 표시될 오프셋(위치)을 지정합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 setOffset(x, y) 타일이 표시될 오프셋(위치)을 지정합니다. Parameters Name Type Description x number 타일의 x축 오프셋 y number 타일의 y축 오프셋 setOpacity(opacity) 타일의 불투명도를 지정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도 0~1 사이의 실수. setSize(size) 타일의 크기를 설정합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 setTileIndex(tileIndex) 타일 인덱스를 설정합니다. Parameters Name Type Description tileIndex TileIndex 타일 인덱스 setZIndex(zIndex) 타일의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 show() 타일을 보이게 합니다. Type Definitions TileIndex TileIndex 객체는 각 타일링 시스템에서 x축과 y축에 대한 인덱스를 나타냅니다. Type: object Properties Name Type Description xIndex number x축의 인덱스 yIndex number y축의 인덱스 TileOptions TileOptions 객체는 naver.maps.Tile을 정의하는 데 필요한 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description opacity number &lt;optional&gt; 1 타일의 불투명도 duration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간 (밀리초 단위) transition boolean &lt;optional&gt; true 타일 로드 시 fadeIn 효과의 사용 여부입니다. offset naver.maps.Point &lt;optional&gt; 타일의 오프셋입니다. zIndex number &lt;optional&gt; 0 타일의 쌓임 순서입니다. size naver.maps.Size &lt;optional&gt; 타일의 크기입니다. pane HTMLElement &lt;optional&gt; 타일이 추가될 HTML 요소입니다. Events loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"naver.maps.TM128.html":{"id":"naver.maps.TM128.html","title":"StaticObjects: TM128","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API TM128 StaticObjects: TM128 naver.maps. TM128 TM128 객체는 위/경도 좌표를 기본 좌표계로 사용하는 TM128 투영 객체입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.TM128Coord Methods fromCoordToPoint(latlng) 지정한 위/경도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 × Search results Close "},"naver.maps.TM128Coord.html":{"id":"naver.maps.TM128Coord.html","title":"StaticObjects: TM128Coord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API TM128Coord StaticObjects: TM128Coord naver.maps. TM128Coord TM128Coord 객체는 TM128 좌표를 기본 좌표계로 사용하는 투영 객체입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.UTMK Methods fromCoordToLatLng(tm128) 지정한 TM128 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromCoordToPoint(tm128) 지정한 TM128 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToCoord(latlng) 지정한 위/경도 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromLatLngToTM128(latlng) 지정한 위/경도 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromPointToTM128(point) 지정한 세계 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromTM128ToLatLng(tm128) 지정한 TM128 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromTM128ToPoint(tm128) 지정한 TM128 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromTM128ToUTMK(tm128) 지정한 TM128 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromUTMKToTM128(utmk) 지정한 UTMK 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point TM128 좌표 × Search results Close "},"naver.maps.TrafficLayer.html":{"id":"naver.maps.TrafficLayer.html","title":"Class: naver.maps.TrafficLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API TrafficLayer Class: naver.maps.TrafficLayer naver.maps. TrafficLayer TrafficLayer 클래스는 교통 정보 관련 오버레이를 하나의 지도 유형으로 나타내는 레이어를 정의합니다. new naver.maps.TrafficLayer(option) Parameters Name Type Argument Description option TrafficLayerOptions &lt;optional&gt; 레이어 옵션 Properties Name Type Description name string 레이어 이름입니다. 이 레이어의 이름은 traffic입니다. Tutorials 레이어 Extends naver.maps.LabelLayer Methods endAutoRefresh() 자동 새로 고침을 종료합니다. getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. (Deprecated) Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 getRTSVersion() 최신의 교통 정보 버전을 반환합니다. Returns Type number refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh refreshRTSVersion() 버전정보를 새로 고침합니다. setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. (Deprecated) 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity startAutoRefresh() 자동 새로 고침을 시작합니다. 이 레이어의 interval 옵션이 0보다 크면 자동으로 호출됩니다. Type Definitions TrafficLayerOptions TrafficLayerOptions 객체는 TrafficLayer를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description interval number 300000 교통 상황을 자동으로 갱신하는 시간 간격(ms)입니다. 이 값이 0이면 자동으로 갱신하지 않습니다. 최소값은 5분입니다. overlayMap boolean true 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. (Deprecated) zIndex number 2 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. (Deprecated) × Search results Close "},"naver.maps.TransCoord.html":{"id":"naver.maps.TransCoord.html","title":"StaticObjects: TransCoord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API TransCoord StaticObjects: TransCoord naver.maps. TransCoord TransCoord 객체는 여러 가지의 좌표 체계 사이의 변환을 수행하는 메서드를 제공합니다. 지원하는 좌표 체계의 목록은 아래와 같습니다. LatLng: 위/경도로 나타내는 좌표계입니다. UTMK: UTMK 좌표계입니다. NAVER: NAVER의 자체 좌표계입니다. TM128: TM128 좌표계입니다. EPSG3857: EPSG3857 평면 좌표계입니다. Tutorials Geocoder를 활용한 좌표 변환 Methods fromEPSG3857ToLatLng(coord) 지정한 EPSG3857 평면 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromEPSG3857ToNaver(coord) 지정한 EPSG3857 평면 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromEPSG3857ToTM128(coord) 지정한 EPSG3857 평면 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromEPSG3857ToUTMK(coord) 지정한 EPSG3857 평면 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromLatLngToEPSG3857(latlng) 지정한 위/경도 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromLatLngToNaver(latlng) 지정한 위/경도 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromLatLngToTM128(latlng) 지정한 위/경도 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromLatLngToUTMK(latlng) 지정한 위/경도 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromNaverToEPSG3857(n) 지정한 NAVER 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromNaverToLatLng(n) 지정한 NAVER 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromNaverToTM128(n) 지정한 NAVER 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromNaverToUTMK(n) 지정한 NAVER 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromTM128ToEPSG3857(tm128) 지정한 TM128 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromTM128ToLatLng(tm128) 지정한 TM128 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromTM128ToNaver(tm128) 지정한 TM128 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromTM128ToUTMK(tm128) 지정한 TM128 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromUTMKToEPSG3857(utmk) 지정한 UTMK 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromUTMKToLatLng(utmk) 지정한 UTMK 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromUTMKToNaver(utmk) 지정한 UTMK 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromUTMKToTM128(utmk) 지정한 UTMK 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point TM128 좌표 × Search results Close "},"naver.maps.UTMK.html":{"id":"naver.maps.UTMK.html","title":"StaticObjects: UTMK","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UTMK StaticObjects: UTMK naver.maps. UTMK UTMK 객체는 한국형 UTM(Universal Transverse Mercator) 좌표계를 나타내는 것으로 UTMK 좌표계와 관련된 좌표 변환 메서드를 제공합니다. 원본 Projection 객체의 세계 좌표는 0~1 사이의 값입니다. Properties Name Type Description name string \"UTMK\" pointPerMeter number 8192 Tutorials 지도 투영과 좌표 체계 Extends naver.maps.Projection Methods fromCoordToPoint(latlng) 지정한 위/경도 좌표를 세계 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromCoordToUTMK(latlng) 지정한 위/경도 좌표를 UTMK 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromLatLngToPoint(latlng) 지정한 위/경도 좌표를 세계 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToUTMK(latlng) 지정한 위/경도 좌표를 UTMK 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromPointToCoord(point) 지정한 세계 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromPointToLatLng(point) 지정한 세계 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromPointToUTMK(point) 지정한 세계 좌표를 UTMK 좌표로 변환하여 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromUTMKToCoord(utmk) 지정한 UTMK 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromUTMKToLatLng(utmk) 지정한 UTMK 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromUTMKToPoint(utmk) 지정한 UTMK 좌표를 세계 좌표로 변환하여 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point 세계 좌표 getDestinationCoord(fromLatLng, angle, meter) 지정한 좌표에서 북쪽을 기준으로 지정한 각도(시계 방향)와 거리만큼 떨어진 위치의 지도 좌표를 반환합니다. Parameters Name Type Description fromLatLng naver.maps.LatLng 기준이 되는 위/경도 좌표 angle number 지정한 좌표에서 북쪽을 기준으로 한 시계 방향의 각도(0-북, 90-동, 180-남, 270-서). 이 값이 0이면 현재의 좌표에서 북쪽을 가리키며, 90이면 동쪽을 가리킵니다. meter number 지정한 좌표에서 구하려는 좌표까지의 거리(미터) Returns Type Description naver.maps.LatLng 새로운 위/경도 좌표 getDistance(latlng1, latlng2) 지정한 두 위/경도 좌표 간의 거리를 반환합니다. 단위는 미터입니다. Parameters Name Type Description latlng1 naver.maps.LatLng 위/경도 좌표 latlng2 naver.maps.LatLng 위/경도 좌표 Returns Type Description number 거리 × Search results Close "},"naver.maps.UTMK_NAVER.html":{"id":"naver.maps.UTMK_NAVER.html","title":"StaticObjects: UTMK_NAVER","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UTMK_NAVER StaticObjects: UTMK_NAVER naver.maps. UTMK_NAVER UTMK_NAVER 객체는 한국형 UTM(Universal Transverse Mercator) 좌표계를 변조해 네이버에서 사용하는 좌표계를 나타냅니다. UTMK_NAVER 좌표계와 관련된 좌표 변환 메서드를 제공합니다. 원본 Projection 객체의 세계 좌표는 0~1 사이의 값입니다. Properties Name Type Description name string \"UTMK_NAVER\" pointPerMeter number 8192 Tutorials 지도 투영과 좌표 체계 Extends naver.maps.UTMK Methods fromCoordToNaver(latlng) 지정한 위/경도 좌표를 NAVER 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromLatLngToNaver(latlng) 지정한 위/경도 좌표를 NAVER 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromNaverToCoord(naverPoint) 지정한 NAVER 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description naverPoint naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromNaverToLatLng(naverPoint) 지정한 NAVER 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description naverPoint naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromNaverToPoint(naverPoint) 지정한 NAVER 좌표를 세계 좌표로 변환하여 반환합니다. Parameters Name Type Description naverPoint naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromNaverToUTMK(naverPoint) 지정한 NAVER 좌표를 UTMK 좌표로 변환하여 반환합니다. Parameters Name Type Description naverPoint naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromPointToNaver(point) 지정한 세계 좌표를 NAVER 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromUTMKToNaver(utmk) 지정한 UTMK 좌표를 NAVER 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point NAVER 좌표 × Search results Close "},"naver.maps.UTMK_NAVERCoord.html":{"id":"naver.maps.UTMK_NAVERCoord.html","title":"StaticObjects: UTMK_NAVERCoord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UTMK_NAVERCoord StaticObjects: UTMK_NAVERCoord naver.maps. UTMK_NAVERCoord UTMK_NAVERCoord 객체는 NAVER 좌표계를 기본 좌표계로 사용하는 투영 객체입니다. 기존의 UTMK_NAVER 투영 객체와 유사하지만, 실제 사용 좌표계는 위/경도 좌표계가 아닌 NAVER 좌표계입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.UTMK_NAVER Methods fromCoordToLatLng(n) 지정한 NAVER 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromCoordToPoint(n) 지정한 NAVER 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToCoord(latlng) 지정한 위/경도 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point NAVER 좌표 × Search results Close "},"naver.maps.UTMKCoord.html":{"id":"naver.maps.UTMKCoord.html","title":"StaticObjects: UTMKCoord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UTMKCoord StaticObjects: UTMKCoord naver.maps. UTMKCoord UTMKCoord 객체는 UTMK 좌표를 기본 좌표계로 사용하는 투영 객체입니다. 기존의 UTMK 투영 객체와 유사하지만, 실제 사용 좌표계는 위/경도 좌표계가 아닌 UTMK 좌표계입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.UTMK Methods fromCoordToLatLng(utmk) 지정한 UTMK 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromCoordToPoint(utmk) 지정한 UTMK 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToCoord(latlng) 지정한 위/경도 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point UTMK 좌표 × Search results Close "},"naver.maps.visualization.html":{"id":"naver.maps.visualization.html","title":"Namespace: naver.maps.visualization","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API visualization Namespace: naver.maps.visualization naver.maps. visualization 시각화 서브모듈 네임스페이스입니다. Classes DotMap HeatMap WeightedLocation StaticObjects SpectrumStyle × Search results Close "},"naver.maps.visualization.DotMap.html":{"id":"naver.maps.visualization.DotMap.html","title":"Class: naver.maps.visualization.DotMap","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API DotMap Class: naver.maps.visualization.DotMap naver.maps.visualization. DotMap DotMap 클래스는 점지도를 정의합니다. 가중치가 있는 지점 목록을 이용할 때는 가중치를 1 ~ {반지름}로 정규화하고, 해당 값을 점지도를 표현하는 점의 반지름으로 사용합니다. 가중치가 없는 지점 목록을 이용할 때는 반지름을 점지도를 표현하는 점의 반지름으로 사용합니다. new naver.maps.visualization.DotMap(dotMapOptions) Parameters Name Type Argument Description dotMapOptions DotMapOptions &lt;optional&gt; 점지도 옵션 Tutorials 데이터 시각화 Methods getData() 점지도의 데이터를 반환합니다. Returns Type Description Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; 점지도의 데이터 getMap() 현재 점지도가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 점지도의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description DotMapOptions | any 점지도 옵션 redraw() 점지도를 새로 그립니다. setData(data) 점지도의 데이터를 설정합니다. 새로 추가된 데이터는 naver.maps.visualization.DotMap#redraw 메서드를 호출해야 반영됩니다. Parameters Name Type Description data Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; 점지도의 데이터 setMap(map) 점지도를 지도에 추가합니다. 인수로 null을 전달하면 점지도를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 점지도를 추가할 Map 객체 setOptions(key, value) 점지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 점지도 옵션 이름 value any 점지도 옵션 값 setOptions(options) 점지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options DotMapOptions 점지도 옵션 Type Definitions DotMapOptions DotMapOptions 객체는 DotMap을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map 점지도가 그려질 지도 객체입니다. data Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; | Array.&lt;naver.maps.visualization.WeightedLocation&gt; 점지도의 지점 목록입니다. opacity number &lt;optional&gt; 0.5 점지도의 불투명도입니다. 0 ~ 1의 값을 입력합니다. radius number &lt;optional&gt; 5 점지도를 표현하는 점의 반지름입니다. 단위는 픽셀입니다. strokeWeight number &lt;optional&gt; 1 점지도를 표현하는 점의 선 두께입니다. strokeColor string &lt;optional&gt; white 점지도를 표현하는 점의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeLineCap string &lt;optional&gt; butt 점지도를 표현하는 점의 선 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값으로는 butt, flat(butt와 동일), round 그리고 square가 있습니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 점지도를 표현하는 점의 선들이 맞닿는 부분에 대한 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값으로는 miter, round 그리고 bevel이 있습니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; red 점지도를 표현하는 점의 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. × Search results Close "},"naver.maps.visualization.HeatMap.html":{"id":"naver.maps.visualization.HeatMap.html","title":"Class: naver.maps.visualization.HeatMap","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API HeatMap Class: naver.maps.visualization.HeatMap naver.maps.visualization. HeatMap HeatMap 클래스는 열지도를 정의합니다. 가중치가 있는 지점 목록을 이용할 때는 가중치를 0.1 ~ 1로 정규화하고, 해당 값을 열지도를 표현하는 점의 영향력 강도(세기)로 사용합니다. 가중치가 없는 지점 목록을 이용할 때는 기본 값 1을 열지도를 표현하는 점의 영향력 강도(세기)로 사용합니다. new naver.maps.visualization.HeatMap(heatMapOptions) Parameters Name Type Argument Description heatMapOptions HeatMapOptions &lt;optional&gt; 열지도 옵션 Tutorials 데이터 시각화 Methods getColorMap() 열지도의 색상 스펙트럼을 반환합니다. Returns Type Description naver.maps.visualization.SpectrumStyle 열지도 색상 스펙트럼 getData() 열지도의 데이터를 반환합니다. Returns Type Description Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; 열지도의 데이터 getMap() 현재 열지도가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 열지도의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description HeatMapOptions | any 열지도 옵션 redraw() 열지도를 새로 그립니다. setColorMap(colormap, inReverse) 열지도의 색상 스펙트럼을 설정합니다. Parameters Name Type Description colormap naver.maps.visualization.SpectrumStyle 열지도 색상 스펙트럼 inReverse boolean 반전된 색상 설정 여부입니다. 이 값이 true 이면 설정한 색상 스펙트럼의 반전을 이용합니다. setData(data) 열지도의 데이터를 설정합니다. 새로 추가된 데이터는 naver.maps.visualization.HeatMap#redraw 메서드를 호출해야 반영됩니다. Parameters Name Type Description data Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; 열지도의 데이터 setMap(map) 열지도를 지도에 추가합니다. 인수로 null을 전달하면 열지도를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 열지도를 추가할 Map 객체 setOptions(key, value) 열지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 열지도 옵션 이름 value any 열지도 옵션 값 setOptions(options) 열지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options HeatMapOptions 열지도 옵션 Type Definitions HeatMapOptions HeatMapOptions 객체는 HeatMap을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map 열지도가 그려질 지도 객체입니다. data Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; | Array.&lt;naver.maps.visualization.WeightedLocation&gt; 열지도의 지점 목록입니다. opacity number &lt;optional&gt; 0.6 열지도의 불투명도입니다. 0 ~ 1의 값을 입력합니다. radius number &lt;optional&gt; 10 열지도를 표현하는 점의 영향력을 나타내는 반지름입니다. 단위는 픽셀입니다. colorMap naver.maps.visualization.SpectrumStyle &lt;optional&gt; RAINBOW 열지도의 색상 스펙트럼입니다. × Search results Close "},"naver.maps.visualization.SpectrumStyle.html":{"id":"naver.maps.visualization.SpectrumStyle.html","title":"StaticObjects: SpectrumStyle","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API SpectrumStyle StaticObjects: SpectrumStyle naver.maps.visualization. SpectrumStyle SpectrumStyle 객체는 열지도의 색상 스펙트럼을 사전에 정의한 것입니다. 설정할 수 있는 색상 스펙트럼은 아래와 같습니다. Properties Name Type Description JET string rgb(0,0,131) ~ rgb(128,0,0) 값으로 구성된 스펙트럼입니다. HSV string rgb(255,0,0) ~ rgb(255,0,6) 값으로 구성된 스펙트럼입니다. HOT string rgb(0,0,0) ~ rgb(255,255,255) 값으로 구성된 스펙트럼입니다. COOL string rgb(0,255,255) ~ rgb(255,0,255) 값으로 구성된 스펙트럼입니다. GREYS string rgb(0,0,0) ~ rgb(255,255,255) 값으로 구성된 스펙트럼입니다. YIGnBu string rgb(8,29,88) ~ rgb(255,255,217) 값으로 구성된 스펙트럼입니다. YIOrRd string rgb(128,0,38) ~ rgb(255,255,204) 값으로 구성된 스펙트럼입니다. RdBu string rgb(5,10,172) ~ rgb(178,10,28) 값으로 구성된 스펙트럼입니다. RAINBOW string rgb(150,0,90) ~ rgb(255,0,0) 값으로 구성된 스펙트럼입니다. PORTLAND string rgb(12,51,131) ~ rgb(217,30,30) 값으로 구성된 스펙트럼입니다. OXYGEN string rgb(64,5,5) ~ rgb(248,254,105) 값으로 구성된 스펙트럼입니다. Requires module:visualization × Search results Close "},"naver.maps.visualization.WeightedLocation.html":{"id":"naver.maps.visualization.WeightedLocation.html","title":"Class: naver.maps.visualization.WeightedLocation","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API WeightedLocation Class: naver.maps.visualization.WeightedLocation naver.maps.visualization. WeightedLocation WeightedLocation 클래스는 가중치가 있는 위/경도 좌표를 정의합니다. new naver.maps.visualization.WeightedLocation(lat, lng, weight) Parameters Name Type Argument Default Description lat number 위도 lng number 경도 weight number &lt;optional&gt; 1 가중치 Tutorials 데이터 시각화 Methods clone() 객체의 복제본을 반환합니다. Returns Type Description naver.maps.visualization.WeightedLocation 복제된 객체 getLocation() 위/경도 좌표를 반환합니다. Returns Type Description naver.maps.LatLng 위/경도 좌표 getWeight() 가중치를 반환합니다. Returns Type Description number 가중치 lat() 위도를 반환합니다. Returns Type Description number 위도 lng() 경도를 반환합니다. Returns Type Description number 경도 toString() 객체의 가중치와 좌표를 문자열로 반환합니다. Returns Type Description number 가중치, 위/경도 좌표를 나타내는 문자열로 형식은 (lat:{위도},lng:{경도},weight:{가중치})입니다. × Search results Close "},"naver.maps.ZoomControl.html":{"id":"naver.maps.ZoomControl.html","title":"Class: naver.maps.ZoomControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API ZoomControl Class: naver.maps.ZoomControl naver.maps. ZoomControl ZoomControlOptions 클래스는 줌 컨트롤을 정의합니다. new naver.maps.ZoomControl(ZoomControlOptions) Parameters Name Type Description ZoomControlOptions ZoomControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { zoomControl: true, zoomControlOptions: { position: naver.maps.Position.TOP_RIGHT } }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions ZoomControlOptions ZoomControlOptions 객체는 줌 컨트롤의 위치나 모양을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position TOP_LEFT 줌 컨트롤을 배치할 위치입니다. style ZoomControlStyle LARGE 줌 컨트롤의 스타일입니다. legendDisabled boolean false 줌 컨트롤의 범례 노출 여부입니다. ZoomControlStyle ZoomControlStyle 객체는 줌 컨트롤의 스타일을 정의합니다. Type: object Properties Name Type Description LARGE number 확대/축소 버튼과 슬라이드 바가 함께 있는 스타일입니다. SMALL number 확대/축소 버튼만 있는 스타일입니다. × Search results Close "},"tutorial-1-Conceptual-Overview.html":{"id":"tutorial-1-Conceptual-Overview.html","title":"Tutorial: NAVER 지도 API v3 특징","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API NAVER 지도 API v3 특징 NAVER 지도 API v3 특징 NAVER 지도 API v3은 JavaScript 형태로 제공되는 NAVER 지도 플랫폼으로서, 웹 서비스 또는 애플리케이션에 NAVER 지도 기능을 구현할 수 있도록 다양한 클래스와 메서드를 제공합니다. 특히, 성능을 높이기 위해 데스크톱과 모바일 환경에 최적화된 코드를 제공하고 있으며, 주요 웹 브라우저를 완벽하게 지원할 수 있도록 새롭게 설계되었습니다. NAVER 지도 API v3은 다음과 같은 특징이 있습니다. 독립적인 API 모바일 최적화 KVO(Key-Value Observing) 디자인 단일 버전 관리 독립적인 API NAVER 지도 API의 이전 버전(v1, v2)은 JindoJS 프레임워크를 사용했습니다. 그러나 NAVER 지도 API v3은 DOM(Document Object Model) 처리 및 웹 브라우저 호환 코드를 내장하고 있으므로, JindoJS 등의 다른 프레임워크 또는 라이브러리와 완벽히 독립적으로 동작합니다. 따라서, 어떠한 프레임워크 또는 라이브러리를 함께 사용해도 문제 없이 동작합니다. 또한 NAVER 지도 API v3은 이전 버전과 달리 별도의 CSS(Cascading Style Sheets)를 필요로 하지 않도록 설계했습니다. 모바일 최적화 모바일 웹 브라우징 환경은 최근 몇 년 사이 매우 진보하였지만 단말기의 성능과 제조사의 커스터마이징 상태에 따라 동작 방식이 매우 다양합니다. NAVER 지도 API v3은 대부분의 모바일 단말기에서도 최적의 성능으로 동작할 수 있도록 설계되었습니다. 또한 touchstart, touchmove, touchend 터치 이벤트 외에도 다음과 같은 제스처 이벤트를 사용할 수 있습니다. tap - 한 손가락으로 터치합니다. doubletap - 한 손가락으로 빠르게 두 번 터치합니다. longtap - 한 손가락으로 터치를 1초 이상 유지합니다. twofingertap - 두 손가락으로 터치합니다. pinch in/out - 두 손가락으로 터치 후 손가락을 오므리거나 폅니다. 제스처 이벤트는 지속적으로 추가할 예정입니다. NAVER 지도 API v3은 CSS3 Transform 속성을 적극적으로 활용하고 있습니다. 그러나 특정 웹 브라우저 또는 단말기의 성능이 낮은 환경에서는 자동으로 CSS2 렌더링 방식을 이용합니다. 즉, 각 환경에서 최적의 성능으로 동작할 수 있도록 전환하여 지도를 표현합니다. KVO 디자인 KVO 디자인은 NAVER 지도 API v3 전체 설계의 핵심입니다. KVO 클래스를 상속받은 클래스는 사용자가 관심있는 속성을 바인딩(bind)함으로써 속성이 변경되었을 때 효율적으로 대응할 수 있습니다. KVO 매커니즘에 대한 자세한 설명은 KVO 디자인을 참고합니다. 단일 버전 관리 NAVER 지도 API v3은 단일 버전으로 제공합니다. 버전 정보를 확인하려면 다음과 같이 JavaScript 파일 시작 부분의 주석을 확인합니다. /*! * mantle - NAVER Maps API v3.0.0 - 2016-05-26 11:20:56 * * Copyright(c) 2016, NAVER corp, Team mantle */ 버전 변경에 따른 오류 및 문의 사항은 Question에 등록해 주시면 빠르게 처리하겠습니다. 빠르고 원활한 처리를 원하신다면 로그인 이후 문의 바랍니다. × Search results Close "},"tutorial-1-Getting-Client-ID.html":{"id":"tutorial-1-Getting-Client-ID.html","title":"Tutorial: 클라이언트 아이디 발급","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 클라이언트 아이디 발급 클라이언트 아이디 발급 NAVER 지도 API v3을 사용하려면 클라이언트 아이디를 이용해서 인증해야 합니다. 네이버 클라우드 플랫폼 클라이언트 아이디는 NAVER CLOUD PLATFORM Console에서 애플리케이션을 등록해 발급받습니다. 공공기관용 클라이언트 아이디는 NAVER CLOUD PLATFORM GOV Console에서 애플리케이션을 등록해 발급받습니다. 금융기관용 클라이언트 아이디는 NAVER CLOUD PLATFORM FIN Console에서 애플리케이션을 등록해 발급받습니다. 콘솔의 AI·Application Service &gt; AI·NAVER API &gt; Application에서 애플리케이션을 등록합니다. 네이버 클라우드 플랫폼 자세한 방법 보기 &gt; 공공기관용 자세한 방법 보기 &gt; 금융기관용 자세한 방법 보기 &gt; AI·Application Service &gt; AI·NAVER API &gt; Application에서 등록한 애플리케이션을 선택해 Client ID와 Client Secret값을 확인합니다. AI·Application Service &gt; AI·NAVER API &gt; Application의 변경 화면에서 **Maps(Web)**가 선택되어 있는지 확인합니다. 선택되어 있지 않으면 429 오류(Quota Exceed)가 발생하니 주의하시기 바랍니다. × Search results Close "},"tutorial-1-Layers.html":{"id":"tutorial-1-Layers.html","title":"Tutorial: 레이어","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 레이어 레이어 레이어는 지도 타일 위에 겹쳐서 노출되는 지도 유형을 말합니다. NAVER 지도 API v3은 다섯 가지 레이어를 기본적으로 제공합니다. 자전거 전용도로와 자전거 관련 오버레이를 하나의 레이어로 제공 교통상황을 나타내는 레이어를 제공 거리뷰를 보여줄 수 있는 영역을 나타내는 레이어를 제공 전국 토지 소개, 지번, 지목, 경계, 도로 철도 등을 나타내는 레이어를 제공 일반 지도 유형과 위성 지도 유형을 함께 나타내는 겹쳐보기 레이어를 제공 지도 유형과 마찬가지로, NAVER 지도 API v3에서 기본적으로 제공하는 레이어 외에 사용자 정의 레이어를 만들 수 있습니다. 자세한 설명은 사용자 정의 레이어 만들기를 참고합니다. 기본 레이어 표시하기 NAVER 지도 API v3에서 제공하는 기본 레이어를 표시하려면 각 레이어의 인스턴스를 생성하고 init 이후, Map 객체의 setMap 메서드를 호출합니다. var cadastralLayer = new naver.maps.CadastralLayer(); var streetLayer = new naver.maps.StreetLayer(); var bicycleLayer = new naver.maps.BicycleLayer(); var trafficLayer = new naver.maps.TrafficLayer(); naver.maps.Event.once(map, 'init', function() { cadastralLayer.setMap(map); streetLayer.setMap(map); bicycleLayer.setMap(map); trafficLayer.setMap(map); }); Examples: 네이버 자전거 레이어 표시하기 Examples: 네이버 지적도 레이어 표시하기 Examples: 네이버 실시간 교통상황 레이어 표시하기 사용자 정의 레이어 만들기 레이어는 기본 타일 위에 올라가는 지도 유형입니다. 따라서 사용자 정의 레이어를 만들려면 Layer 클래스를 사용하는 것뿐만 아니라 지도 유형을 만들 때 필요한 부분을 함께 구현해야 합니다. 사용자 정의 지도 유형을 만드는 방법은 지도 유형을 참고합니다. Layer 클래스는 레이어를 만들 때 구현해야 할 여러 메서드를 제공합니다. 즉, 사용자 정의 지도 유형을 만들고 지도 유형 저장소에 등록합니다. var myMapTypeRegistry = new naver.maps.MapTypeRegistry({ 'myLayer': myLayerType }, 'myLayer'); Layer 객체를 생성할 때 앞서 생성한 지도 유형 저장소를 인수로 전달하고, Map 객체의 setMap 메서드를 호출해 레이어를 표시합니다. var myLayer = new naver.maps.Layer('myLayer', myMapTypeRegistry); myLayer.setMap(map); Examples: 사용자 정의 레이어 만들기 × Search results Close "},"tutorial-1-Overlay-Overview.html":{"id":"tutorial-1-Overlay-Overview.html","title":"Tutorial: 오버레이 개요","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 오버레이 개요 오버레이 개요 오버레이는 지리적 정보를 시각화하기 위해 지도 위에 추가할 수 있는 도형이나 개체 등을 말합니다. 오버레이는 지도의 지리 좌표와 연동되어 표시되므로 사용자가 지도를 확대/축소하거나 이동하면 오버레이도 함께 움직입니다. NAVER 지도 API v3은 마커, 정보 창, 도형, 지상 오버레이 등 다양한 오버레이를 제공하며, 사용자가 직접 오버레이를 정의해 사용할 수 있도록 지원합니다. 자세한 내용은 각 오버레이 설명을 참고하세요. 마커 정보 창 도형 지상 오버레이 사용자 정의 오버레이 × Search results Close "},"tutorial-2-Abbreviation.html":{"id":"tutorial-2-Abbreviation.html","title":"Tutorial: 축약형 표현","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 축약형 표현 축약형 표현 네임스페이스 NAVER 지도 API v3은 naver.maps 네임스페이스를 사용하며, 사용자의 편의성을 위해 축약형인 N 네임스페이스를 제공합니다. N 네임스페이스는 NAVER 지도 API v3을 로드하는 시점에 해당 전역 변수가 사용되지 않은 경우에만 유효합니다. // 일반 표현 var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); // 축약 표현 var map2 = new N.Map('map', { center: new N.LatLng(37.3595704, 127.105399), zoom: 10 }); naver.maps === N; // true 또한, 다음과 같이 사용자 네임스페이스를 사용할 수도 있습니다. var MyNS = naver.maps; var map = new MyNS.Map('map', { center: new MyNS.LatLng(37.3595704, 127.105399), zoom: 10 }); 기본 클래스 팩토리 메서드 NAVER 지도 API v3은 자주 사용하는 기본 클래스의 인스턴스를 팩토리 메서드 방식으로 생성할 수 있도록 지원합니다. 팩토리 메서드를 지원하는 기본 클래스의 목록은 다음과 같습니다. Point LatLng PointBounds LatLngBounds Size 팩토리 메서드 방식으로 생성한 인스턴스는 new 키워드를 사용해 생성하는 방식과 동일하게 동작합니다. 팩토리 메서드와 축약형 네임스페이스를 함께 사용하면 간결한 코드를 작성할 수 있습니다. var cityHall = naver.maps.LatLng(37.5666805, 126.9784147); var cityHall2 = N.LatLng(37.5666805, 126.9784147); cityHall.equals(cityHall2); // true var point = naver.maps.Point(10, 20); var point2 = N.Point(10, 20); var dokdo = naver.maps.LatLngBounds( naver.maps.LatLng(37.2380651, 131.8562652), naver.maps.LatLng(37.2444436, 131.8786475)); var dokdo2 = N.LatLngBounds( N.LatLng(37.2380651, 131.8562652), N.LatLng(37.2444436, 131.8786475)); var size = naver.maps.Size(300, 400); var size2 = N.Size(300, 400); 기본 클래스의 리터럴 표현 NAVER 지도 API v3에서는 아래의 자주 사용하는 기본 클래스의 인스턴스 객체를 대신해 리터럴 표현을 사용할 수 있습니다. Point LatLng PointBounds LatLngBounds Size 리터럴 표현은 Object 리터럴과 Array 리터럴 두 가지 방식으로 사용할 수 있습니다. Object 리터럴 Object 리터럴은 객체의 속성을 모두 표현하는 일반 객체입니다. SizeObject 리터럴은 width, height 속성을 포함해야 합니다. PointObject나 LatLngObject 리터럴은 x, y 또는 lat, lng 속성을 포함해야 하며, PointBoundsObject나 LatLngBoundsObject 리터럴은,minX, minY, maxX, maxY 또는 south, west, north, east 속성을 포함해야 합니다. SizeObject 리터럴 naver.maps.Size 클래스를 사용하는 대신 SizeObject 리터럴을 사용할 수 있습니다. SizeObject 리터럴은 width와 height 속성을 포함하는 일반 객체입니다. var size = new naver.maps.Size(1024, 768), sizeObject = { width: 1024, height: 768 }; map.setSize(sizeObject); PointObject 리터럴 naver.maps.Point 클래스를 사용하는 대신 PointObject 리터럴을 사용할 수 있습니다. PointObject 리터럴은 x와 y 속성을 포함하는 일반 객체입니다. var point = new naver.maps.Point(64, 128), pointObject = { x: 64, y: 128 }; map.setCenterPoint(pointObject); LatLngObject 리터럴 naver.maps.LatLng 클래스를 사용하는 대신 LatLngObject 리터럴을 사용할 수 있습니다. LatLngObject 리터럴은 lat와 lng 속성을 포함하는 일반 객체입니다. var latlng = new naver.maps.LatLng(37.5666103, 126.9783882), latlngObject = { lat: 37.5666103, lng: 126.9783882 }; map.setCenter(latlngObject); LatLngObject 리터럴을 사용할 수 있는 곳에서는 PointObject 리터럴도 사용할 수 있습니다. PointBoundsObject 리터럴 naver.maps.PointBounds 클래스를 사용하는 대신 PointBoundsObject 리터럴을 사용할 수 있습니다. PointBoundsObject 리터럴은 minX, minY, maxX, maxY 속성을 포함하는 일반 객체입니다. var pointBounds = new naver.maps.PointBounds( new naver.maps.Point(125, 36), new naver.maps.Point(128, 38)), pointBoundsObject = { minX: 125, minY: 36, maxX: 128, maxY: 37 }; map.fitBounds(pointBoundsObject); LatLngBoundsObject 리터럴 naver.maps.LatLngBounds 클래스를 사용하는 대신 LatLngBoundsObject 리터럴을 사용할 수 있습니다. LatLngBoundsObject 리터럴은 south, west, north, east 속성을 포함하는 일반 객체입니다. var latlngBounds = new naver.maps.LatLngBounds( new naver.maps.LatLng(36, 125), new naver.maps.LatLng(38, 128)), latlngBoundsObject = { south: 36, west: 125, north: 38, east: 128 }; map.fitBounds(latlngBoundsObject); LatLngBoundsObject 리터럴을 사용할 수 있는 곳에서는 PointBoundsOBject 리터럴도 사용할 수 있습니다. Array 리터럴 Array 리터럴은 GeoJSON 방식의 순서로 된 배열로 표기합니다. SizeArray 리터럴의 순서는 width, height입니다. PointArray 리터럴의 순서는 x, y 또는 lng, lat이며, PointBoundsArray 리터럴은 4개의 배열 원소를 minX, minY, maxX, maxY 또는 west, south, east, north 순서로 배치합니다. SizeArray 리터럴 naver.maps.Size 클래스를 사용하는 대신 SizeArray 리터럴을 사용할 수 있습니다. SizeArray 리터럴은 [width, height] 순서로 된 배열 객체입니다. var size = new naver.maps.Size(1024, 768), sizeArray = [1024, 768]; map.setSize(sizeArray); PointArray 리터럴 naver.maps.Point 클래스를 사용하는 대신 PointArray 리터럴을 사용할 수 있습니다. PointArray 리터럴은 [x, y] 또는 [lng, lat] 순서로 된 배열 객체입니다. var latlng = new naver.maps.LatLng(37.5666103, 126.9783882), pointArray = [126.9783882, 37.5666103]; map.setCenter(pointArray); PointBoundsArray 리터럴 naver.maps.PointBounds 클래스를 사용하는 대신 PointBoundsArray 리터럴을 사용할 수 있습니다. PointBoundsArray 리터럴은 [minX, minY, maxX, maxY] 또는 [west, south, east, north] 순서로 된 배열 객체입니다. var latlngBounds = new naver.maps.LatLngBounds( new naver.maps.LatLng(36, 125), new naver.maps.LatLng(38, 128)), pointBoundsArray = [125, 36, 128, 38]; map.fitBounds(pointBoundsArray); × Search results Close "},"tutorial-2-DataLayer.html":{"id":"tutorial-2-DataLayer.html","title":"Tutorial: 데이터 레이어","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 데이터 레이어 데이터 레이어 NAVER 지도 API v3은 지리 공간 데이터를 기반으로 지도 위에 점, 선, 도형 등을 쉽게 표현할 수 있는 가상의 Data 레이어를 제공합니다. GeoJSON, KML, GPX 형식의 지리 공간 데이터를 지도 위에 표현할 수 있으며, 반대로 표시된 데이터를 GeoJSON 형식으로 저장할 수 있습니다. KML, GPX 형식의 지리 공간 데이터는 내부적으로 GeoJSON 형식의 지리 공간 데이터로 변환됩니다. 현재 지원하는 요소는 다음과 같습니다. GPX Line Paths (wpt, rte, trk) Line Styles (color, opacity, width, linecap, pattern) bounds, name, time, desc, cmt, type, sym KML Point, LineString, LinearRing, Polygon, MultiGeometry, gx:Track, gx:MultiTrack Style (LineStyle, PolyStyle) LatLonAltBox name, address, description, visibility 개요 Data 레이어는 GeoJSON 지리 공간 데이터의 형상 정보(feature)를 다룹니다. 각 형상 정보는 Feature 객체로 표현되며, 형상 정보의 기하 구조(geometry)는 Geometry 객체로 표현됩니다. Feature 객체는 기하 구조의 타입에 따라 폴리라인, 폴리곤, 마커 등으로 렌더링됩니다. KML, GPX 형식의 지리 공간 데이터 역시 내부적으로 GeoJSON 형식의 지리 공간 데이터로 변환 후 렌더링됩니다. 기하 구조의 타입이 GeometryCollection이면, geometryies라는 기하 구조 컬렉션이 존재하며, 이 컬렉션에는 여러 가지 타입의 기하 구조가 존재할 수 있습니다. 즉, 하나의 Feature 객체는 여러 가지 타입의 Geometry 객체를 관리할 수 있습니다. Geometry 객체의 타입이 하나의 오버레이를 의미하므로 Feature 객체는 여러 가지 타입의 오버레이를 관리할 수 있습니다. 다음은 GeoJSON 지리 공간 데이터의 기하 구조 타입에 따라 NAVER 지도 API v3에서 표현하는 오버레이 타입을 정의한 것입니다. 기하 구조 타입 오버레이 타입 설명 Point Marker 한 개의 마커 MultiPoint Marker 한 개 이상의 마커 LineString Polyline 한 개의 폴리라인 MultiLineString Polyline 한 개 이상의 폴리라인 Polygon Polygon 한 개의 폴리곤 MultiPolygon Polygon 한 개 이상의 폴리곤 Feature의 스타일과 속성(properties)은 변경할 수 있으며, 이를 다시 GeoJSON 형식으로 저장할 수 있습니다. GeoJSON 표준에 대해서는 http://geojson.org를 참고합니다. GeoJSON 로드하기 GeoJSON 형식의 데이터를 로드하려면 addGeoJson 메서드를 사용합니다. 기본적으로 모든 Map 객체는 data 객체를 포함합니다. 따라서, map.data.addGeoJson 메서드를 사용합니다. $.ajax({ url: './geojson/naver.json', dataType: 'json', success: startDataLayer }); var map; function startDataLayer(geojson) { map = new naver.map.Map('map', { zoom: 13, center: new naver.maps.LatLng(37.3586524, 127.1060678) }); map.data.addGeoJson(geojson); } 위 예제는 jQuery 구문을 포함하고 있습니다. GeoJSON 데이터 스타일 지정하기 GeoJSON 지리 공산 데이터의 형상 정보의 스타일을 지정하려면 setStyle 메서드를 사용합니다. 이 메서드는 Data 레이어의 모든 Feature 객체에 영향을 미치며, StyleOptions 객체 리터럴 또는 StylingFunction 함수를 인수로 사용합니다. StyleOptions 객체 리터럴로 스타일 지정하기 StyleOptions 객체 리터럴에서 설정한 스타일은 모든 Feature 객체에 적용됩니다. 단, 각 Feature 객체의 기하 구조(geometry) 타입에 따라 적용되는 범위는 다릅니다. 예를 들어, icon 스타일은 Marker 오버레이 타입인 Point, MultiPoint 기하 구조에만 영향을 줍니다. map.data.setStyle({ strokeColor: 'red', fillColor: 'red', icon: './img/pin_spot.png' }); StylingFunction 함수로 스타일 지정하기 StylingFunction 함수를 이용하면 각 형상 정보(Feature 객체)의 속성이나 특성에 따라 다른 스타일을 지정할 수 있습니다. map.data.setStyle(function(feature) { var color = 'red'; if (feature.getProperty('color')) { color = feature.getProperty('color'); } return { strokeColor: color, fillColor: color }; }); 지정된 스타일 재정의하기 앞서 설명한대로 setStyle 메서드는 Data 레이어의 모든 Feature 객체에 영향을 미칩니다(이를 전역 스타일이라고 함). 특정 Feature 객체에 특별한 스타일을 적용하고자 할 때는 overrideStyle 메서드를 사용합니다. 이 메서드는 전역 스타일에 추가로 적용됩니다. 재정의한 스타일을 이전 스타일로 다시 복원하려면 revertStyle 메서드를 사용합니다. 이 메서드는 특정 Feature 객체에 사용할 수 있지만, 인수를 생략하면 모든 Feature 객체의 스타일을 복원합니다. 다음은 마우스 포인터가 기하 구조의 경계에 들어올 때와 벗어날 때 스타일을 변경하고 복원하는 예제입니다. map.data.addListener('mouseover', function(e) { map.data.overrideStyle(e.feature, { strokeWeight: 8, icon: './img/pin_spot.png' }); map.data.addListener('mouseout', function(e) { map.data.revertStyle(); }); Data 레이어 이벤트 활용하기 Data 레이어는 각 Feature 객체의 UI 인터랙션과 속성 변경 등에 대한 이벤트와 Feature 객체의 추가/삭제에 대한 이벤트를 발생시킵니다. 이벤트에 관한 자세한 내용은 Data 레이어의 Events 내용을 참고합니다. 다음은 마우스 포인터가 기하 구조의 경계에 들어올 때와 벗어날 때 각 Feature 객체의 스타일을 변경하고, 특정 Feature 객체 클릭 시 해당 Feature 객체의 속성값을 이용해 스타일을 반영하며, 더블 클릭 시 Feature 객체의 좌표 경계를 이용해 지도를 이동시키는 예제입니다. var map = new naver.maps.Map(document.getElementById('map'), { zoom: 13, mapTypeId: 'normal', center: new naver.maps.LatLng(37.3586524, 127.1060678) }); $.ajax({ url: '../geojson/naver.json', dataType: 'json', success: startDataLayer }); function startDataLayer(geojson) { map.data.addGeoJson(geojson); map.data.setStyle(function(feature) { var color = 'red'; if (feature.getProperty('isColorful')) { color = feature.getProperty('color'); } return { fillColor: color, strokeColor: color, strokeWeight: 2, icon: null }; }); map.data.addListener('click', function(e) { e.feature.setProperty('isColorful', true); }); map.data.addListener('dblclick', function(e) { var bounds = e.feature.getBounds(); if (bounds) { map.panToBounds(bounds); } }); map.data.addListener('mouseover', function(e) { map.data.overrideStyle(e.feature, { strokeWeight: 8, icon: './img/pin_spot.png' }); }); map.data.addListener('mouseout', function(e) { map.data.revertStyle(); }); } 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: GeoJSON 데이터 레이어 표시하기 KML 로드하기 KML 형식의 데이터를 로드하려면 addKml 메서드를 사용합니다. 기본적으로 모든 Map 객체는 data 객체를 포함합니다. 따라서, map.data.addKml 메서드를 사용합니다. $.ajax({ url: './geojson/naver.kml', dataType: 'xml', success: startDataLayer }); var map; function startDataLayer(xmlDoc) { map = new naver.map.Map('map', { zoom: 13, center: new naver.maps.LatLng(37.3586524, 127.1060678) }); map.data.addKml(xmlDoc); } 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: KML 데이터 레이어 표시하기 GPX 로드하기 GPX 형식의 데이터를 로드하려면 addGpx 메서드를 사용합니다. 기본적으로 모든 Map 객체는 data 객체를 포함합니다. 따라서, map.data.addGpx 메서드를 사용합니다. $.ajax({ url: './geojson/naver.gpx', dataType: 'xml', success: startDataLayer }); var map; function startDataLayer(xmlDoc) { map = new naver.map.Map('map', { zoom: 13, center: new naver.maps.LatLng(37.3586524, 127.1060678) }); map.data.addGpx(xmlDoc); } 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: GPX 데이터 레이어 표시하기 × Search results Close "},"tutorial-2-Getting-Started.html":{"id":"tutorial-2-Getting-Started.html","title":"Tutorial: Hello, World","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Hello, World Hello, World 간단한 예제를 보면서 NAVER 지도 API v3에 대해 설명합니다. 아래는 NAVER 그린팩토리를 중심점으로 하는 지도를 생성하는 예제입니다. &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=\"UTF-8\"&gt; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\"&gt; &lt;title&gt;간단한 지도 표시하기&lt;/title&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID\"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=\"map\" style=\"width:100%;height:400px;\"&gt;&lt;/div&gt; &lt;script&gt; var mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }; var map = new naver.maps.Map('map', mapOptions); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; Examples: 지도 기본 예제 NAVER 지도 API v3 로드하기 클라이언트 아이디 발급에서 발급받은 ncpClientId를 사용해 NAVER 지도 API v3을 로드해야 합니다. 공공기관용의 경우 govClientId를 금융기관용의 경우 finClientId를 사용하여 호출해주세요. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID\"&gt;&lt;/script&gt; 금융기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?finClientId=YOUR_CLIENT_ID\"&gt;&lt;/script&gt; NAVER 지도 API v3이 로드되는 동안 나머지 웹 사이트를 렌더링하는 비동기 방식으로 사용하려면 다음과 같이 callback 파라미터를 이용해 콜백 함수를 지정합니다. NAVER API v3이 준비되면 지정한 콜백 함수를 호출합니다. &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;callback=CALLBACK_FUNCTION\"&gt;&lt;/script&gt; 지도 DOM 요소 지정하기 웹 페이지에 지도를 삽입할 DOM 요소를 지정합니다. 일반적으로 &lt;div&gt;&lt;/div&gt; 요소를 사용합니다. &lt;div id=\"map\" style=\"width:100%;height:400px;\"&gt;&lt;/div&gt; 지도를 초기화할 때 MapOptions의 size를 지정하지 않으면, 초기화 시점의 지도 DOM 컨테이너의 크기로 지도 크기를 설정합니다. 이후 setSize 메서드를 이용해 지도 크기를 변경하기 전까지 지도 크기는 고정됩니다. 지도 옵션 설정하기 지도 옵션은 지도를 생성할 때 지도의 속성을 초기화하는 데 사용되며, 객체 리터럴로 만듭니다. 지도 옵션에 대한 자세한 설명은 MapOptions 명세를 참고합니다. var mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 } 지도 생성하기 Map 클래스는 지도를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); 새 인스턴스를 만들 때 두 가지 인수를 전달합니다. 지도를 표현할 컨테이너 요소. 반드시 전달해야 하는 인수입니다. 앞서 지도를 표현하기 위해 지정한 DOM 요소의 id 문자열을 직접 전달하거나, document.getElementById 메서드를 이용해 해당 DOM 요소의 참조를 전달할 수 있습니다. 지도의 속성을 초기화하는 데 이용하는 지도 옵션. 반드시 전달할 필요는 없습니다. 지도 옵션을 전달하면 설정한 속성으로 지도를 초기화합니다. 그렇지 않으면 NAVER 지도 API v3에서 가지고 있는 기본값으로 지도를 초기화합니다. 앞서 NAVER 지도 API v3을 비동기 방식으로 로드한 경우 아래와 같이 콜백 함수 내에서 지도를 생성합니다. 네이버 클라우드 플랫폼 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; 공공기관용 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; 금융기관용 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?finClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; × Search results Close "},"tutorial-2-Marker.html":{"id":"tutorial-2-Marker.html","title":"Tutorial: 마커","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 마커 마커 마커는 지도 위의 한 위치를 아이콘으로 표시하는 오버레이입니다. 아이콘은 이미지를 사용하거나, 벡터 그래픽 폴리곤 등으로 사용할 수 있습니다. 원하는 위치에 마커 올리기 마커를 사용하려면 Marker 클래스의 객체를 생성해야 합니다. 생성자에는 MarkerOptions 객체 리터럴을 인수로 넘겨서 마커의 속성을 설정해야 합니다. 마커는 지도상의 한 위치를 아이콘으로 표시하는 객체입니다. 따라서 위치를 나타내는 position 속성을 반드시 입력해야 합니다. 그 외의 속성은 기본값을 제공합니다. 다음 예제는 position 속성만 설정한 기본 마커를 네이버 그린팩토리 위에 올리는 예제입니다. 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 }); Examples: 마커 표시하기 다음은 마커의 setPosition 메서드를 사용하여 지도에 클릭한 지점으로 마커의 위치를 옮기는 예제입니다. 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); }); Examples: 클릭한 지점으로 마커 옮기기 원하는 이미지를 마커 아이콘으로 사용하기 마커의 icon 속성은 마커의 외형인 아이콘을 정의하는 객체입니다. icon 속성은 두 가지 타입의 객체 리터럴로 정의합니다. ImageIcon: 이미지 파일을 사용하여 아이콘을 설정합니다. SymbolIcon: 백터 그래픽(폴리곤)을 사용하여 아이콘을 설정합니다. 이 절에서는 ImageIcon 객체 리터럴을 활용하여 원하는 이미지의 마커를 사용하는 예제를 다룹니다. 다음은 icon 속성에 ImageIcon 객체 리터럴를 설정하여 특정 이미지의 마커를 만드는 예제입니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var markerOptions = { position: position, map: map, icon: { url: './img/pin_default.png', size: new naver.maps.Size(22, 35), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(11, 35) } }; var marker = new naver.maps.Marker(markerOptions); Examples: 이미지 아이콘 사용하기 icon 속성에 ImageIcon 객체 리터럴 대신 이미지의 url만 넣어 주어도 위 예제와 동일하게 동작합니다. icon 속성에 url 문자열을 넣으면 NAVER 지도 API v3 내부에서 자동으로 ImageIcon 객체 리터럴로 변환하고, ImageIcon의 size 속성은 이미지의 크기, origin 속성은 (0, 0), anchor 속성은 이미지의 가운데 아래 포인터를 기본값으로 설정합니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var markerOptions = { position: position, map: map, icon: './img/pin_default.png' }; var marker = new naver.maps.Marker(markerOptions); 하나의 이미지에 여러 모양의 아이콘을 합친 스프라이트 이미지를 활용하여 마커를 만들 수도 있습니다. var MARKER_ICON_URL = './img/sp_pins_spot_v2.png'; var MARKER_SPRITE_X_OFFSET = 29; var MARKER_SPRITE_Y_OFFSET = 50; var MARKER_SPRITE_POSITION = { \"A0\": [0, 0], \"B0\": [MARKER_SPRITE_X_OFFSET, 0], \"C0\": [MARKER_SPRITE_X_OFFSET*2, 0], \"D0\": [MARKER_SPRITE_X_OFFSET*3, 0], \"E0\": [MARKER_SPRITE_X_OFFSET*4, 0], \"F0\": [MARKER_SPRITE_X_OFFSET*5, 0], \"G0\": [MARKER_SPRITE_X_OFFSET*6, 0], \"H0\": [MARKER_SPRITE_X_OFFSET*7, 0], \"I0\": [MARKER_SPRITE_X_OFFSET*8, 0], \"A1\": [0, MARKER_SPRITE_Y_OFFSET], \"B1\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET], \"C1\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET], \"D1\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET], \"E1\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET], \"F1\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET], \"G1\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET], \"H1\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET], \"I1\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET], \"A2\": [0, MARKER_SPRITE_Y_OFFSET*2], \"B2\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET*2], \"C2\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET*2], \"D2\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET*2], \"E2\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET*2], \"F2\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET*2], \"G2\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET*2], \"H2\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET*2], \"I2\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET*2] }; var myLatlng = new naver.maps.LatLng(37.3614483, 129.1114883); var mapOptions = { zoom: 11, center: myLatlng }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); var bounds = map.getBounds(), southWest = bounds.getSW(), northEast = bounds.getNE(), lngSpan = northEast.lng() - southWest.lng(), latSpan = northEast.lat() - southWest.lat(); var markers = [], marker, position; for (var key in MARKER_SPRITE_POSITION) { position = new naver.maps.LatLng( southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); marker = new naver.maps.Marker({ map: map, position: position, title: key, icon: { url: MARKER_ICON_URL, size: new naver.maps.Size(24, 37), anchor: new naver.maps.Point(12, 37), origin: new naver.maps.Point(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1]) } }); }; Examples: 스프라이트 이미지 아이콘 사용하기 이미지 아이콘 마커 사용 시 레티나 디스플레이 대응하기 ImageIcon 객체 리터럴에 scaledSize 속성이 있습니다. scaledSize는 아이콘으로 사용하는 이미지의 크기를 강제로 조절하는 속성입니다. scaledSize를 입력하지 않으면 이미지의 원본 크기가 scaledSize에 기본값으로 입력됩니다. 레티나 디스플레이에 대응하려면 화면에 보이는 이미지보다 두 배 큰 이미지를 준비하고 scaledSize를 원본 이미지 크기의 반으로 입력합니다. 큰 이미지를 작게 보여주어 레티나 디스플레이에서도 정상적으로 보이게 하는 원리입니다. 다음은 레티나 디스플레이에 대응하는 단일 이미지 마커 예제입니다. 50 x 68 크기의 이미지를 25 x 34 크기의 마커 아이콘으로 사용하여 레티나 디스플레이에 대응합니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var marker = new naver.maps.Marker({ position: position, map: map, icon: { url: './img/ico_pin.jpg', size: new naver.maps.Size(25, 34), scaledSize: new naver.maps.Size(25, 34), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(12, 34) } }); Examples: 이미지 아이콘 레티나 대응하기 다음은 레티나 디스플레이에 대응하는 스프라이트 이미지 마커 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); makeMarker(map, new naver.maps.LatLng(37.3595704, 127.105399), 0); makeMarker(map, new naver.maps.LatLng(37.3618025, 127.1153248), 1); makeMarker(map, new naver.maps.LatLng(37.3561936, 127.0983706), 2); function makeMarker(map, position, index) { var ICON_GAP = 31; var ICON_SPRITE_IMAGE_URL = './img/sp_pin_hd.png'; var iconSpritePositionX = (index * ICON_GAP) + 1; var iconSpritePositionY = 1; var marker = new naver.maps.Marker({ map: map, position: position, icon: { url: ICON_SPRITE_IMAGE_URL, size: new naver.maps.Size(26, 36), // 이미지 크기 origin: new naver.maps.Point(iconSpritePositionX, iconSpritePositionY), // 스프라이트 이미지에서 클리핑 위치 anchor: new naver.maps.Point(13, 36), // 지도상 위치에서 이미지 위치의 offset값 scaledSize: new naver.maps.Size(395, 79) } }); return marker; } Examples: 스프라이트 이미지 아이콘 레티나 대응하기 폴리곤을 마커 아이콘으로 사용하기 지금까지 MarkerOptions의 icon 속성에 ImageIcon 객체 리터럴을 설정하여 이미지 파일을 마커 아이콘으로 활용하는 예제를 보았습니다. icon 속성에 SymbolIcon 객체 리터럴을 설정하면 이미지 파일 대신 폴리곤을 그려 마커의 아이콘으로 활용할 수 있습니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var marker = new naver.maps.Marker({ map: map, position: position, icon: { path: [ new naver.maps.Point(0, 70), new naver.maps.Point(20, 100), new naver.maps.Point(40, 70), new naver.maps.Point(30, 70), new naver.maps.Point(70, 0), new naver.maps.Point(10, 70) ], anchor: new naver.maps.Point(23, 103), fillColor: '#ff0000', fillOpacity: 1, strokeColor: '#000000', strokeStyle: 'solid', strokeWeight: 3 }, shadow: { url: \"./img/shadow-arrow.png\", size: new naver.maps.Size(193, 128), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(62, 120) } }); Examples: 심벌 아이콘 사용하기 HTML 마크업을 마커 아이콘으로 사용하기 이미지 또는 심벌 외에도 HTML 마크업을 이용해 마커를 생성할 수 있습니다. 'icon' 속성에 HtmlIcon 객체 리터럴을 설정하면 설정한 HTML을 노출하는 마커를 생성할 수 있습니다. var boundary = naver.maps.LatLngBounds.bounds(new naver.maps.LatLng(37.3724620, 127.1051714), new naver.maps.LatLng(37.3542795, 127.1174332)); var unarySpot = new naver.maps.LatLng(37.3637770, 127.1174332); var map = new naver.maps.Map(document.getElementById('map'), { zoom: 10 }); map.fitBounds(boundary); var unarySpotMarker = new naver.maps.Marker({ position: unarySpot, map: map, title: 'Unary Spot!!', icon: { content: '&lt;img src=\"./img/pin_default.png\" alt=\"\" style=\"margin: 0px; padding: 0px; border: 0px solid transparent; display: block; max-width: none; max-height: none; -webkit-user-select: none; position: absolute; width: 22px; height: 35px; left: 0px; top: 0px;\"&gt;', size: new naver.maps.Size(22, 35), anchor: new naver.maps.Point(11, 35) } }); Examples: HTML 아이콘 사용하기 마커의 인터랙션 영역 정의하기 MarkerOptions의 shape 속성은 사용자 인터랙션의 영역(마우스, 터치 이벤트)을 정의하는 속성입니다. 기본값은 null이고, shape가 null인 경우는 다음과 같이 사용자 인터랙션의 영역을 설정합니다. icon이 ImageIcon이면 마커 크기만큼의 사각 영역을 사용자 인터랙션 영역으로 설정합니다. icon이 SymbolIcon이면 폴리곤의 모양 그대로 사용자 인터랙션 영역으로 설정합니다. 마커의 사용자 인터랙션의 영역을 임의로 설정하고 싶은 경우 shape 속성에 MarkerShape 객체 리터럴을 설정하여 원하는 모양의 좌표를 입력합니다. 다음 예제는 마커의 모양대로 사용자 인터랙션을 설정하기 위해 shape 속성을 활용한 예제입니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var markerOptions = { position: position, map: map, icon: { url: './img/pin_default.png', size: new naver.maps.Size(22, 35), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(11, 35) }, shadow: { url: './img/shadow-pin_default.png', size: new naver.maps.Size(40, 35), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(11, 35) }, shape: { coords: [11, 0, 9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 5, 20, 6, 23, 8, 26, 9, 30, 9, 34, 13, 34, 13, 30, 14, 26, 16, 23, 17, 20, 17, 19, 20, 16, 21, 14, 22, 12, 22, 12, 22, 8, 20, 4, 18, 2, 16, 1, 13, 0], type: 'poly' } }; var marker = new naver.maps.Marker(markerOptions); Examples: 마커 인터랙션 영역 설정하기 마커의 애니메이션 정의하기 MarkerOptions의 animation 속성은 마커의 애니메이션을 정의하는 속성입니다. 제공하는 애니메이션은 다음과 같습니다. BOUNCE: 마커가 지도에 노출되면 마커 위치에서 튀기는 애니메이션을 수행합니다. 이 애니메이션은 animation 속성을 null로 설정해 애니메이션을 중지할 때까지 계속 수행됩니다. DROP: 마커를 지도에 노출할 때 지도 위에서 떨어지는 애니메이션을 수행합니다. 최종적으로 떨어지는 위치는 마커의 위치입니다. 이 애니메이션은 한 번만 수행되며, 수행 후 animation 속성은 null로 바뀝니다. 다음은 마커를 지도에 표시할 때 DROP 애니메이션을 적용한 예제입니다. var mapOptions = { zoom: 11 }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); map.fitBounds(naver.maps.LatLngBounds.bounds(new naver.maps.LatLng(37.3724620, 127.1051714), new naver.maps.LatLng(37.3542795, 127.1174332))); var urlMarker = new naver.maps.Marker({ position: new naver.maps.LatLng(37.3542795, 127.1072556), map: map, title: 'urlMarker', icon: \"./img/pin_default.png\", animation: naver.maps.Animation.DROP }); Examples: 애니메이션 마커 표시하기 현재 화면에 보이는 마커만 표시하기 지도 위에 오버레이가 많이 올라갈수록 브라우저의 그래픽 리소스를 많이 사용하게 되고 그만큼 성능이 느려질 수 밖에 없습니다. 따라서 가능한 한 적은 수의 오버레이만 지도 위에 올리는 것이 성능에 도움이 됩니다. 가장 쉽게 생각할 수 있는 방법은 화면에 보이는 오버레이만 지도에 올리고 보이지 않는 오버레이는 지도에서 빼는 것입니다. LatLngBounds, PointBounds 객체의 hasLatLng, hasPoint 메서드를 사용하면 이를 어렵지 않게 구현할 수 있습니다. LatLngBounds, PointBounds은 특정 영역을 표현하기 위한 클래스입니다. 특정 영역이 정의되면 그 영역 내에 특정 위치가 포함되는지 그렇지 않은지를 판단할 수 있고 이는 hasLatLng, hasPoint 메서드를 이용해 확인할 수 있습니다. Map 객체는 getBounds 메서드를 제공하여 현재 화면에 표시되고 있는 지도 영역을 LatLngBounds 객체로 반환합니다. 각 마커의 위치가 Map 객체의 getBounds 메서드를 이용해 받은 현재 화면의 지도 영역에 포함되는지 확인하여, 화면에 보이면 지도에 올리고 그렇지 않다면 지도에서 뺄 수 있습니다. 다음은 위에서 설명한 내용을 구현한 예제입니다. 지도를 초기화한 후 getBounds를 이용해 지도 영역을 구하고 해당 영역 내에서 임의의 위치에 여러 개의 마커를 올립니다. 그 후 지도 영역이 변경되는 drag_end, zoom_changed 이벤트에서 각 마커들이 현재 지도 영역에 포함되는지 여부에 따라 지도에 올리거나 뺍니다. var MARKER_ICON_URL = './img/sp_pins_spot_v3.png'; var MARKER_SPRITE_X_OFFSET = 29; var MARKER_SPRITE_Y_OFFSET = 50; var MARKER_SPRITE_POSITION = { \"A0\": [0, 0], \"B0\": [MARKER_SPRITE_X_OFFSET, 0], \"C0\": [MARKER_SPRITE_X_OFFSET*2, 0], \"D0\": [MARKER_SPRITE_X_OFFSET*3, 0], \"E0\": [MARKER_SPRITE_X_OFFSET*4, 0], \"F0\": [MARKER_SPRITE_X_OFFSET*5, 0], \"G0\": [MARKER_SPRITE_X_OFFSET*6, 0], \"H0\": [MARKER_SPRITE_X_OFFSET*7, 0], \"I0\": [MARKER_SPRITE_X_OFFSET*8, 0], \"A1\": [0, MARKER_SPRITE_Y_OFFSET], \"B1\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET], \"C1\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET], \"D1\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET], \"E1\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET], \"F1\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET], \"G1\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET], \"H1\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET], \"I1\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET], \"A2\": [0, MARKER_SPRITE_Y_OFFSET*2], \"B2\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET*2], \"C2\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET*2], \"D2\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET*2], \"E2\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET*2], \"F2\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET*2], \"G2\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET*2], \"H2\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET*2], \"I2\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET*2] }; var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); var bounds = map.getBounds(), southWest = bounds.getSW(), northEast = bounds.getNE(), lngSpan = northEast.lng() - southWest.lng(), latSpan = northEast.lat() - southWest.lat(); var markers = []; for (var key in MARKER_SPRITE_POSITION) { var position = new naver.maps.LatLng( southWest.lat() + (latSpan * Math.random()), southWest.lng() + (lngSpan * Math.random()) ); var marker = new naver.maps.Marker({ map: map, position: position, title: key, icon: { url: MARKER_ICON_URL, size: new naver.maps.Size(24, 37), anchor: new naver.maps.Point(12, 37), origin: new naver.maps.Point(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1]) }, zIndex: 100 }); markers.push(marker); }; naver.maps.Event.addListener(map, 'zoom_changed', function() { updateMarkers(map, markers); }); naver.maps.Event.addListener(map, 'dragend', function() { updateMarkers(map, markers); }); function updateMarkers(map, markers) { var mapBounds = map.getBounds(); var marker, position; for (var i = 0; i &lt; markers.length; i++) { marker = markers[i] position = marker.getPosition(); if (mapBounds.hasLatLng(position)) { showMarker(map, marker); } else { hideMarker(map, marker); } } } function showMarker(map, marker) { if (marker.setMap()) return; marker.setMap(map); } function hideMarker(map, marker) { if (!marker.setMap()) return; marker.setMap(null); } Examples: 보이는 지도 영역의 마커만 표시하기 getDrawingRect 메서드를 활용하여 겹침 마커 구분하기 NAVER 지도 API v3에서 제공하는 오버레이 중 Marker, Rectangle, Circle, Polyline, Polygon은 getDrawingRect 메서드를 제공합니다. 이 메서드는 현재 지도 상태에서 오버레이가 그려지는 영역을 구합니다. 반환값은 PointBounds 객체이고 단위는 화면 픽셀을 기준으로 합니다. 앞서 주어진 영역에 특정 위치가 포함되는지 여부를 확인할 수 있는 LatLngBounds, PointBounds의 hasPoint 메서드를 설명했습니다. 이 절에서는 intersects 메서드를 설명합니다. LatLngBounds, PointBounds의 intersects 메서드는 두 영역이 겹치는지 여부를 검사하는 메서드입니다. 이 메서드를 사용하면 두 개의 마커가 현재 겹쳐진 상태인지 그렇지 않은지를 쉽게 알 수 있습니다. getDrawingRect 메서드로 두 마커의 그리기 영역을 구하고 두 영역이 겹치는지 검사하면 됩니다. 다음은 이를 간단하게 구현한 코드입니다. var marker1 = new naver.maps.Marker({...}); var marker2 = new naver.maps.Marker({...}); marker1.setMap(map); marker2.setMap(map); function intersects() { var marker1Rect = marker1.getDrawingRect(); var marker2Rect = marker2.getDrawingRect(); // 두 마커가 겹치는지 여부를 true 또는 false로 반환한다. return marker1Rect.intersects(marker2Rect); } 다음 예제는 지도 위에 불특정 다수의 마커를 올리고 zoom_changed 이벤트 핸들러에서 각 마커의 겸침 상태를 확인해 화면에 표시하는 예제입니다. 이 예제는 위치가 변경되지 않는 마커이므로 줌 레벨이 변경되는 경우 겹침 여부를 검사합니다. 지도 초기화 후 현재 보이는 지도 영역의 임의의 위치에 마커를 올립니다. 줌 레벨이 변경되면 각 마커는 다른 마커와의 겹침 여부를 확인하고 인접한 마커들을 모으는 작업을 합니다. 겹쳐진 마커는 하이라이트 처리를 한 후 인접한 마커들의 그리기 영역을 합쳐 지도 좌표계 단위의 LatLngBounds 객체로 변환하고 Rectangle을 그려 겹쳐진 마커들을 눈으로 확인할 수 있도록 합니다. var MARKER_ICON_URL = './img/sp_pins_spot_v3.png'; var MARKER_HIGHLIGHT_ICON_URL = './img/sp_pins_spot_v3_over.png'; var COLORS = ['#45ABD9', '#6154B6', '#E43736', '#44AE3F', '#F6D200', '#344554']; var MARKER_SPRITE_X_OFFSET = 29; var MARKER_SPRITE_Y_OFFSET = 50; var MARKER_SPRITE_POSITION = { \"A0\": [0, 0], \"B0\": [MARKER_SPRITE_X_OFFSET, 0], \"C0\": [MARKER_SPRITE_X_OFFSET*2, 0], \"D0\": [MARKER_SPRITE_X_OFFSET*3, 0], \"E0\": [MARKER_SPRITE_X_OFFSET*4, 0], \"F0\": [MARKER_SPRITE_X_OFFSET*5, 0], \"G0\": [MARKER_SPRITE_X_OFFSET*6, 0], \"H0\": [MARKER_SPRITE_X_OFFSET*7, 0], \"I0\": [MARKER_SPRITE_X_OFFSET*8, 0], \"A1\": [0, MARKER_SPRITE_Y_OFFSET], \"B1\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET], \"C1\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET], \"D1\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET], \"E1\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET], \"F1\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET], \"G1\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET], \"H1\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET], \"I1\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET] }; var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); var bounds = map.getBounds(), southWest = bounds.getSW(), northEast = bounds.getNE(), lngSpan = northEast.lng() - southWest.lng(), latSpan = northEast.lat() - southWest.lat(); var markers = [], markersMap = {}; var rectangles = [], colorIndex = 0; for (var key in MARKER_SPRITE_POSITION) { var position = new naver.maps.LatLng( southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); var marker = new naver.maps.Marker({ map: map, position: position, title: key, icon: { url: MARKER_ICON_URL, size: new naver.maps.Size(24, 37), anchor: new naver.maps.Point(12, 37), origin: new naver.maps.Point(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1]) }, zIndex: 100 }); markers.push(marker); markersMap[key] = marker; }; naver.maps.Event.addListener(map, 'zoom_changed', function() { updateMarkersIntersectState(); }); function updateMarkersIntersectState() { var store = getIntersectMarkerStore(markers); var intersectMarkers = getMarkersByStore(store); var boundsList = getIntersectMarkerBounds(intersectMarkers); resetMarkers(markers); highlightMarkers(intersectMarkers); resetRectangles(rectangles); rectangles = drawRectangles(boundsList); } function resetRectangles(rectangles) { for (var i = 0; i &lt; rectangles.length; i++) { rectangles[i].setMap(null); } } function drawRectangles(boundsList) { var rectangles = [] for (var i = 0; i &lt; boundsList.length; i++) { rectangles.push(new naver.maps.Rectangle({ map: map, bounds: boundsList[i], strokeColor: COLORS[colorIndex % COLORS.length], strokeWeight: 2, strokeOpacity: 0.8, fillColor: COLORS[colorIndex % COLORS.length], fillOpacity: 0.4 })); colorIndex++; } return rectangles; } function getIntersectMarkerStore(markers) { var store = []; var target, checked, targetBounds, checkedBounds; for (var i = 0; i &lt; markers.length; i++) { target = markers[i]; for (var j = 0; j &lt; markers.length; j++) { checked = markers[j]; if (target === checked) continue; targetBounds = target.getDrawingRect(); checkedBounds = checked.getDrawingRect(); if (targetBounds.intersects(checkedBounds)) { _inertToIntersectStore(store, target.getTitle(), checked.getTitle()); } } } return store; } function getMarkersByStore(store) { var intersectMarkers = []; for (var i = 0; i &lt; store.length; i++) { intersectMarkers[i] = []; for (var j = 0; j &lt; store[i].length; j++) { intersectMarkers[i].push(markersMap[store[i][j]]); } } return intersectMarkers; } function getIntersectMarkerBounds(intersectMarkers) { var boundsList = [], bounds; for (var i = 0; i &lt; intersectMarkers.length; i++) { for (var j = 0; j &lt; intersectMarkers[i].length; j++) { if (j === 0) { bounds = intersectMarkers[i][j].getDrawingRect(); } else { bounds = bounds.union(intersectMarkers[i][j].getDrawingRect()); } } bounds = _pixelBoundsToLatLngBounds(map, bounds); boundsList.push(bounds); } return boundsList; } function resetMarkers(markers) { for (var i = 0; i &lt; markers.length; i++) { var icon = markers[i].getIcon(); icon.url = MARKER_ICON_URL; markers[i].setIcon(icon); } } function highlightMarkers(intersectMarkers) { for (var i = 0; i &lt; intersectMarkers.length; i++) { for (var j = 0; j &lt; intersectMarkers[i].length; j++) { var icon = intersectMarkers[i][j].getIcon(); icon.url = MARKER_HIGHLIGHT_ICON_URL; intersectMarkers[i][j].setIcon(icon); } } } function _pixelBoundsToLatLngBounds(map, pixelBounds) { var zoom = map.getZoom(); var proj = map.getProjection(); var min = pixelBounds.getMin(); var max = pixelBounds.getMax(); min = proj.scaleDown(min, zoom); max = proj.scaleDown(max, zoom); min = proj.fromPointToCoord(min); max = proj.fromPointToCoord(max); return new naver.maps.LatLngBounds(min, max); } function _uniqueArray(a) { return a.reduce(function(p, c) { if (p.indexOf(c) &lt; 0) p.push(c); return p; }, []); } function _inertToIntersectStore(store, value1, value2) { var index1 = _has(store, value1); var index2 = _has(store, value2); if (index1 !== -1 &amp;&amp; index2 === -1) { index2 = index1; } else if (index1 === -1 &amp;&amp; index2 !== -1) { index1 = index2; } if (index1 === -1 &amp;&amp; index2 === -1) { store.push([value1, value2]); } else { store[index1].push(value1); store[index2].push(value2); if (index1 !== index2) { var low = Math.min(index1, index2); var high = Math.max(index1, index2); store[low] = store[low].concat(store[high]); store.splice(high, 1); store[low] = _uniqueArray(store[low]); } else { store[index1] = _uniqueArray(store[index1]); } } } function _has(store, value) { var array; for (var i = 0; i &lt; store.length; i++) { array = store[i]; if (array.indexOf(value) !== -1) { return i; } } return -1; } Examples: 겹침 마커 처리하기 기타 마커 구현 예제 위에서 설명한 내용 외에도 다양한 방식으로 마커를 활용할 수 있습니다. 다음의 마커 구현 예제를 참고하세요. Examples: 마커 클러스터화하기 Examples: 다수의 마커에 이벤트 핸들러 사용하기 × Search results Close "},"tutorial-3-InfoWindow.html":{"id":"tutorial-3-InfoWindow.html","title":"Tutorial: 정보 창","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 정보 창 정보 창 InfoWindow는 지도 위에 말풍선 모양의 콘텐츠를 표시할 수 있는 정보 창을 정의하는 객체입니다. 정보 창의 디자인은 NAVER 지도 API v3에서 제공하는 스타일을 사용할 수 있고, 스타일 관련 옵션으로 정보 창 테두리, 배경색, 말풍선 꼬리의 스타일을 설정할 수 있습니다. 정보 창 내부의 콘텐츠는 DOM 요소로 구성되므로 NAVER 지도 API v3에서 제공하는 스타일을 무시하고 사용자가 원하는 디자인으로 정보 창을 꾸밀 수도 있습니다. 마커 위에 정보 창 올리기 정보 창을 지도 위에 노출하려면 open(map, anchor) 메서드를 호출합니다. 첫 번째 파라미터인 map은 정보 창을 올릴 Map 객체를 설정합니다. 두 번째 파라미터인 anchor는 지도 위에서 정보 창의 위치를 결정하는 인자입니다. anchor에 LatLng 또는 Point 객체로 지도 좌표를 설정하면 해당 좌표를 가리키도록 정보 창을 위치시킵니다. anchor는 지도 좌표뿐만 아니라 Marker 객체와 같이 객체 내부에 지도 좌표 속성과 해당 지도 좌표 위치에서의 오프셋값인 anchor 속성을 포함하는 KVO 객체로도 설정할 수 있습니다. 해당 객체는 getPosition과 getAnchor 메서드가 구현되어 있어야 하고, InfoWindow 객체는 이를 이용해 position과 anchor값을 계산하여 적절한 위치에 정보 창을 노출합니다. 다음은 마커 위에 정보 창을 노출하는 예제입니다. var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147); var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.5698411, 126.9783927), zoom: 10 }); var contentString = [ '&lt;div class=\"iw_inner\"&gt;', ' &lt;h3&gt;서울특별시청&lt;/h3&gt;', ' &lt;p&gt;서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청&lt;br&gt;', ' &lt;img src=\"./img/hi-seoul.jpg\" width=\"55\" height=\"55\" alt=\"서울시청\" class=\"thumb\" /&gt;&lt;br&gt;', ' 02-120 | 공공,사회기관 &gt; 특별,광역시청&lt;br&gt;', ' &lt;a href=\"http://www.seoul.go.kr\" target=\"_blank\"&gt;www.seoul.go.kr/&lt;/a&gt;', ' &lt;/p&gt;', '&lt;/div&gt;' ].join(''); var marker = new naver.maps.Marker({ map: map, position: cityhall }); var infowindow = new naver.maps.InfoWindow({ content: contentString }); naver.maps.Event.addListener(marker, \"click\", function(e) { if (infowindow.getMap()) { infowindow.close(); } else { infowindow.open(map, marker); } }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 정보 창 표시하기 정보 창 디자인 스타일 옵션 조정하기 InfoWindow를 생성할 때 생성자에 InfoWindowOptions를 설정해야 합니다. InfoWindowOptions에는 정보 창의 테두리, 배경색, 말꼬리 등의 모양을 결정하는 스타일 옵션이 포함되어 있습니다. 이를 조정하여 사용자는 원하는 모양대로 정보 창을 노출할 수 있습니다. 다음은 스타일 옵션값을 조절하여 정보 창 모양을 설정하는 예제입니다. var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147); var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.5698411, 126.9783927), zoom: 10 }); var contentString = [ '&lt;div class=\"iw_inner\"&gt;', ' &lt;h3&gt;서울특별시청&lt;/h3&gt;', ' &lt;p&gt;서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청&lt;br&gt;', ' &lt;img src=\"./img/hi-seoul.jpg\" width=\"55\" height=\"55\" alt=\"서울시청\" class=\"thumb\" /&gt;&lt;br&gt;', ' 02-120 | 공공,사회기관 &gt; 특별,광역시청&lt;br&gt;', ' &lt;a href=\"http://www.seoul.go.kr\" target=\"_blank\"&gt;www.seoul.go.kr/&lt;/a&gt;', ' &lt;/p&gt;', '&lt;/div&gt;' ].join(''); var marker = new naver.maps.Marker({ map: map, position: cityhall }); var infowindow = new naver.maps.InfoWindow({ content: contentString, maxWidth: 140, backgroundColor: \"#eee\", borderColor: \"#2db400\", borderWidth: 5, anchorSize: new naver.maps.Size(30, 30), anchorSkew: true, anchorColor: \"#eee\", pixelOffset: new naver.maps.Point(20, -20) }); naver.maps.Event.addListener(marker, \"click\", function(e) { if (infowindow.getMap()) { infowindow.close(); } else { infowindow.open(map, marker); } }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 정보 창 옵션 사용하기 사용자 정의 정보 창 InfoWindow 객체에서 제공하는 정보 창 모양을 무시하고 사용자가 원하는 대로 정보 창 디자인을 꾸밀 수 있습니다. InfoWindowOptions의 borderWidth를 0으로 설정하여 테두리 디자인을 무시합니다. backgroundColor를 transparent로 설정하여 배경색을 무시합니다. 말꼬리를 없애기 위해 disableAnchor를 false로 설정합니다. disableAnchor 속성은 기본 말풍선 꼬리의 사용 여부입니다. CSS 스타일을 설정해 원하는 대로 정보 창 요소를 디자인합니다. 다음은 NAVER 지도 API v3에서 제공하는 정보 창 디자인을 무시하고 CSS를 설정해 정보 창 디자인을 적용한 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.5698411, 126.9783927), zoom: 10 }); // 핀 요소 var infoWindowElement = $([ '&lt;div class=\"pin_nation\"&gt;', ' &lt;a href=\"http://www.naver.com/\" target=\"_blank\" class=\"pin_a\"&gt;', ' &lt;img src=\"./img/hi-seoul.jpg\" width=\"38\" height=\"26\" alt=\"\" class=\"pin_flag_m\"&gt;', ' &lt;span class=\"pin_txt\"&gt;&lt;em&gt;캐나다&lt;/em&gt; &lt;span class=\"spr spr_arrow\"&gt;&lt;/span&gt;&lt;/span&gt;', ' &lt;span class=\"spr spr_arr\"&gt;&lt;/span&gt;', ' &lt;/a&gt;', ' &lt;div class=\"pin\"&gt;&lt;span class=\"pin_blur\"&gt;&lt;/span&gt;&lt;/div&gt;', '&lt;/div&gt;'].join('')); var infowindow = new naver.maps.InfoWindow({ content: infoWindowElement[0], borderWidth: 0, disableAnchor: true, backgroundColor: 'transparent', pixelOffset: new naver.maps.Point(0, -28), }); naver.maps.Event.addListener(map, \"click\", function(e) { var latlng = e.latlng; infoWindowElement.find(\"em\").text(latlng.toString()); infowindow.open(map, latlng); }); 위 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-KVO-Mechanism.html":{"id":"tutorial-3-KVO-Mechanism.html","title":"Tutorial: KVO 디자인","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVO 디자인 KVO 디자인 KVO(Key-Value Observing)는 객체의 속성에 접근할 때 해당 속성을 의미하는 문자열을 키(key)로 사용해 속성의 값(value)을 참조하는 매커니즘입니다. 또한 키에 대응하는 속성값의 변경 사항을 추적하는 역할을 합니다. KVO 클래스 상속받기 KVO 클래스를 상속받으려면 클래스를 선언할 때 다음과 같이 해당 클래스의 prototype을 설정해야 합니다. var MyClass = function() { // class initialization codes }; MyClass.prototype = new naver.maps.KVO(); MyClass.prototype.constructor = MyClass; MyClass.prototype.myMethod = function() { // implementation }; 위와 같이 MyClass를 선언하면 MyClass의 인스턴스는 KVO 클래스를 상속받은 객체가 됩니다. var myKVO = new naver.maps.KVO(); var myClass = new MyClass(); myClass instanceof MyClass; // true myClass instanceof naver.maps.KVO; // true myKVO instanceof naver.maps.KVO; // true myKVO instanceof MyClass; // false Key-Value 이용하기 KVO 클래스를 상속받은 클래스는 set과 get 메서드를 이용해 키에 대응하는 값을 설정하거나 가져올 수 있습니다. var MyClass = function() { this.set('zoom', 10); }; MyClass.prototype = new naver.maps.KVO(); MyClass.prototype.constructor = MyClass; MyClass.prototype.getZoom = function() { return this.get('zoom'); }; Key-Value 연결하기 KVO 클래스를 상속받은 클래스의 인스턴스는 bindTo 메서드를 이용해 키에 대응하는 값을 서로 동기화할 수 있습니다. 다음은 zoom 문자열을 키로 사용해 속성의 값을 설정하고, KVO 클래스를 상속받은 클래스의 두 인스턴스 간에 zoom 속성을 연결하는 예제입니다. myView 객체가 myModel 객체의 zoom 속성을 바인딩함으로써 해당 속성에 접근해 변경할 수 있습니다. 또한 zoom 속성의 상태 변경은 두 객체에 동일하게 적용됩니다. var myModel = new naver.maps.KVO(); myModel.set('zoom', 11); var myView = new naver.maps.KVO(); myView.bindKVO = function() { this.bindTo('zoom', myModel); }; myView.bindKVO(); myView.get('zoom'); // 11 myModel.set('zoom', 21); myModel.get('zoom'); // 21 myView.get('zoom'); // 21 속성을 바인딩할 때 속성의 이름을 별도로 지정해 동기화할 수 있습니다. 다음은 앞의 예제에서 zoom 속성을 myZoom이란 키로 지정해 연결하는 예제입니다. myView.bindKVO = function() { this.bindTo('myZoom', myModel, 'zoom'); }; myView.bindKVO(); myView.get('zoom'); // undefined myView.get('myZoom'); // 11 myModel.set('zoom', 21); myView.get('myZoom'); // 21 bindTo 메서드의 세 번째 인수(targetKey)를 생략하면, 연결하려는 객체의 속성 목록에서 첫 번째 인수의 속성 이름을 찾아 연결합니다. 여러 개의 속성을 바인딩할 때는 배열 형태의 키를 지정해 이용할 수 있습니다. 다음은 myModel 객체의 zoom, center, centerPoint, scale 속성을 한 번에 연결하는 예제입니다. var myModel = new naver.maps.KVO(); myModel.set('zoom', 11); myModel.set('center', new naver.maps.LatLng(38, 127)); myModel.set('centerPoint', new naver.maps.Point(128, 128)); myModel.set('scale', 1); var myView = new naver.maps.KVO(); myView.bindKVO = function() { this.bindTo([ 'zoom', 'center', 'centerPoint', 'scale' ], myModel); }; myView.bindKVO(); 연결된 Key-Value 상태 변경 감지하기 KVO는 속성의 상태(내용) 변경을 {key}_changed 이름 규칙을 사용해 알립니다. 따라서 속성을 연결한 객체들은 해당 속성의 상태가 변경된 시점을 감지할 수 있습니다. 즉, 특정 속성의 상태가 변경되면 추가적으로 수행해야 할 것이 있을 때 유용하게 이용할 수 있습니다. 연결된 Key-Value 상태 변경 감지에 대한 자세한 설명은 KVO 상태 변경 알림를 참고합니다. NAVER 지도 API v3은 속성의 상태 변경을 감지할 수 있도록 두 가지 방법을 제공합니다. 첫 번째는 {key}_changed 이름 규칙을 준수하는 메서드를 사용하는 것입니다. 다음은 myModel 객체의 zoom 속성을 변경하면 시스템 경고 창을 표시하는 예제입니다. myView.zoom_changed = function(zoom) { alert('zoom 값이 '+ zoom +'으로 변경되었습니다!'); }; myModel.set('zoom', 14); 두 번째는 {key}_changed 이름 규칙을 준수하는 이벤트를 구독하는 것입니다. 다음은 위 예제를 이벤트 구독으로 처리하는 예제입니다. var listener = naver.maps.Event.addListener(myView, 'zoom_changed', function(zoom) { alert('zoom 값이 '+ zoom +'으로 변경되었습니다!'); }); myModel.set('zoom', 14); Event의 addListener 메서드를 이용해 KVO 이벤트를 구독하면 removeListener 메서드를 이용해 구독을 취소할 수 있습니다. var listener = naver.maps.Event.addListener(myView, 'zoom_changed', function(zoom) { alert('zoom 값이 '+ zoom +'으로 변경되었습니다!'); }); naver.maps.Event.removeListener(listener); myModel.set('zoom', 14); // not notified × Search results Close "},"tutorial-4-Shape.html":{"id":"tutorial-4-Shape.html","title":"Tutorial: 도형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 도형 도형 NAVER 지도 API v3에서는 지도 좌표를 기반으로 백터 그래픽을 올릴 수 있는 도형 오버레이를 제공합니다. NAVER 지도 API v3에서 제공하는 도형의 종류는 아래와 같습니다. Polyline Polygon Rectangle Circle Ellipse 폴리라인 폴리라인은 일련의 지도 좌표를 연결하여 선을 그리는 객체입니다. 지도 위에 폴리라인 그리기 path 속성에 지도 좌표 목록을 입력합니다(path는 반드시 입력해야 합니다). 그리고 map 속성에 폴리라인이 그려질 Map 객체를 입력하거나, setMap 메서드를 이용해 지도 객체를 설정할 수 있습니다. 다음은 Polyline 객체를 만들어 지도위에 폴리라인을 그리는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3700065, 127.121359), zoom: 9 }); var polyline = new naver.maps.Polyline({ map: map, path: [ new naver.maps.LatLng(37.359924641705476, 127.1148204803467), new naver.maps.LatLng(37.36343797188166, 127.11486339569092), new naver.maps.LatLng(37.368520071054576, 127.11473464965819), new naver.maps.LatLng(37.3685882848096, 127.1088123321533), new naver.maps.LatLng(37.37295383612657, 127.10876941680907), new naver.maps.LatLng(37.38001321351567, 127.11851119995116), new naver.maps.LatLng(37.378546827477855, 127.11984157562254), new naver.maps.LatLng(37.376637072444105, 127.12052822113036), new naver.maps.LatLng(37.37530703574853, 127.12190151214598), new naver.maps.LatLng(37.371657839593894, 127.11645126342773), new naver.maps.LatLng(37.36855417793982, 127.1207857131958) ] }); Examples: 폴리곤, 폴리라인 그리기 폴리라인 옵션 살펴보기 폴리라인의 색상, 두께, 선 스타일, 투명도를 설정할 수 있습니다. Polyline 객체 생성 시 생성자에 PolylineOptions 객체 리터럴을 설정할 수도 있고, 생성 후 setOptions 메서드를 통해 동적으로 스타일을 변경할 수도 있습니다. PolylineOptions 객체 리터럴의 속성 중 clickable 속성을 true로 설정하면 사용자 인터랙션을 처리할 수도 있습니다. 다음은 마우스 포인터를 올리거나 치우는 사용자 인터랙션 시 setOptions 메서드를 사용하여 선 스타일을 변경하는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3646656, 127.108828), zoom: 10 }); var polyline = new naver.maps.Polyline({ map: map, path: [ new naver.maps.LatLng(37.365620929135716, 127.1036195755005), new naver.maps.LatLng(37.365620929135716, 127.11353302001953), new naver.maps.LatLng(37.3606921307849, 127.10452079772949), new naver.maps.LatLng(37.36821310838941, 127.10814714431763), new naver.maps.LatLng(37.360760351656545, 127.11299657821654), new naver.maps.LatLng(37.365620929135716, 127.1036195755005) ], clickable: true, // 사용자 인터랙션을 받기 위해 clickable을 true로 설정합니다. strokeColor: '#5347AA', strokeStyle: 'longdash', strokeOpacity: 0.5, strokeWeight: 5 }); naver.maps.Event.addListener(polyline, 'mouseover', function() { polyline.setOptions({ strokeColor: '#E51D1A', strokeStyle: 'solid', strokeOpacity: 1 }); }); naver.maps.Event.addListener(polyline, 'mouseout', function() { polyline.setOptions({ strokeColor: '#5347AA', strokeStyle: 'longdash', strokeOpacity: 0.5 }); }); Examples: 폴리라인 옵션 사용하기 동적으로 폴리라인 그리기 Polyline 객체의 path 속성은 지도 좌표 목록을 입력합니다. 지도 좌표 목록을 입력할 때 [Array]로 입력할 수 있지만 객체 내부적으로는 KVOArray로 저장하고 관리합니다. 따라서 getPath 메서드를 이용해 반환받은 path는 KVOArray입니다. KVOArray는 목록의 내부 요소가 변경될 때마다 이에 해당하는 이벤트를 발생시켜 상태 변경을 알려줍니다. Polyline 객체는 이러한 KVOArray의 기능을 활용해 path의 상태를 동적으로 반영하여 선을 그립니다. KVOArray에 대한 자세한 설명은 KVO 상태 변경 알림를 참고합니다. 다음은 지도 클릭 시 클릭한 지점의 지도 좌표를 동적으로 그리는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3700065, 127.121359), zoom: 9 }); var polyline = new naver.maps.Polyline({ map: map, path: [], strokeColor: '#5347AA', strokeWeight: 2 }); naver.maps.Event.addListener(map, 'click', function(e) { var point = e.latlng; var path = polyline.getPath(); path.push(point); new naver.maps.Marker({ map: map, position: point }); }); Examples: 클릭한 지점 폴리라인 연결하기 폴리곤 폴리곤은 일련의 지도 좌표 목록을 잇는 닫힌 다각형을 그립니다. 따라서 폴리라인과 다르게 내부 색상에 대한 옵션이 추가됩니다. 그리고 닫힌 다각형 영역 내에 구멍(hole or interior ring)을 표현할 수 있기 때문에 폴리라인의 좌표 목록에는 여러 개의 path로 구성되는 paths 속성이 있습니다. 지도 위에 폴리곤 그리기 Polygon 객체를 만들 때 paths 속성에 폴리곤을 구성하는 하나의 path를 입력합니다(paths는 반드시 입력해야 합니다). paths는 여러 개의 path를 입력할 수 있는 이중 배열이어야 합니다. map 속성에 폴리곤이 그려질 Map 객체를 입력하거나, setMap 메서드를 이용해 지도 객체를 설정할 수 있습니다. 다음은 Polygon 객체를 만들어 지도 위에 폴리곤을 그리는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var polygon = new naver.maps.Polygon({ map: map, paths: [ [ new naver.maps.LatLng(37.37544345085402, 127.11224555969238), new naver.maps.LatLng(37.37230584065902, 127.10791110992432), new naver.maps.LatLng(37.35975408751081, 127.10795402526855), new naver.maps.LatLng(37.359924641705476, 127.11576461791992), new naver.maps.LatLng(37.35931064479073, 127.12211608886719), new naver.maps.LatLng(37.36043630196386, 127.12293148040771), new naver.maps.LatLng(37.36354029942161, 127.12310314178465), new naver.maps.LatLng(37.365211629488016, 127.12456226348876), new naver.maps.LatLng(37.37544345085402, 127.11224555969238) ] ], fillColor: '#ff0000', fillOpacity: 0.3, strokeColor: '#ff0000', strokeOpacity: 0.6, strokeWeight: 3 }); Examples: 폴리곤, 폴리라인 그리기 폴리곤 옵션 살펴보기 폴리곤 또한 폴리라인과 마찬가지로 색상, 두께, 선 스타일, 투명도를 설정할 수 있습니다. 그리고 폴리곤 내부 채우기 색상과 투명도를 설정할 수 있습니다. 폴리곤의 스타일은 Polygon 객체 생성 시 생성자에 PolygonOptions 객체 리터럴을 설정할 수도 있고 생성 후 setOptions 메서드를 이용해 동적으로 스타일을 변경할 수도 있습니다. PolygonOptions 객체 리터럴의 속성 중 clickable 속성을 true로 설정하면 사용자 인터랙션을 처리할 수도 있습니다. 다음은 마우스 포인터를 올리거나 치우는 사용자 인터랙션 시 setOptions 메서드를 사용하여 선 스타일을 변경하는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var polygon = new naver.maps.Polygon({ map: map, paths: [ [ new naver.maps.LatLng(37.37544345085402, 127.11224555969238), new naver.maps.LatLng(37.37230584065902, 127.10791110992432), new naver.maps.LatLng(37.35975408751081, 127.10795402526855), new naver.maps.LatLng(37.359924641705476, 127.11576461791992), new naver.maps.LatLng(37.35931064479073, 127.12211608886719), new naver.maps.LatLng(37.36043630196386, 127.12293148040771), new naver.maps.LatLng(37.36354029942161, 127.12310314178465), new naver.maps.LatLng(37.365211629488016, 127.12456226348876), new naver.maps.LatLng(37.37544345085402, 127.11224555969238) ] ], fillColor: '#ff0000', fillOpacity: 0.3, strokeColor: '#ff0000', strokeOpacity: 0.6, strokeWeight: 3, clickable: true }); naver.maps.Event.addListener(polygon, 'mouseover', function() { polygon.setOptions({ strokeColor: '#E51D1A', strokeOpacity: 1 }); }); naver.maps.Event.addListener(polygon, 'mouseout', function() { polygon.setOptions({ strokeColor: '#ff0000', strokeOpacity: 0.6 }); }); Examples: 폴리곤 옵션 사용하기 구멍 뚫린 폴리곤 그리기 Polygon 객체의 paths 속성은 여러 개의 path로 구성된 배열입니다. 폴리라인과 다르게 폴리곤에 여러 개의 path로 구성된 paths 속성이 있는 이유는 하나 이상의 닫힌 도형을 표현하거나 구멍이 뚫린 폴리곤을 표현하기 위해서입니다. 폴리곤 내부에 구멍을 표현하려면, 첫 번째 path는 시계 방향으로 지도 좌표 목록을 구성해 폴리곤 외부 좌표를 설정하고, 두 번째 path는 시계 반대 방향으로 구멍의 좌표 목록을 구성합니다. 다음은 위 기본 예제의 폴리곤에 구멍을 뚧은 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var polygon = new naver.maps.Polygon({ map: map, paths: [ [ new naver.maps.LatLng(37.37544345085402, 127.11224555969238), new naver.maps.LatLng(37.37230584065902, 127.10791110992432), new naver.maps.LatLng(37.35975408751081, 127.10795402526855), new naver.maps.LatLng(37.359924641705476, 127.11576461791992), new naver.maps.LatLng(37.35931064479073, 127.12211608886719), new naver.maps.LatLng(37.36043630196386, 127.12293148040771), new naver.maps.LatLng(37.36354029942161, 127.12310314178465), new naver.maps.LatLng(37.365211629488016, 127.12456226348876), new naver.maps.LatLng(37.37544345085402, 127.11224555969238) ], [ new naver.maps.LatLng(37.368485964153784, 127.10971355438232), new naver.maps.LatLng(37.368520071054576, 127.11464881896971), new naver.maps.LatLng(37.36350619025713, 127.11473464965819), new naver.maps.LatLng(37.363403862670665, 127.1097993850708), new naver.maps.LatLng(37.368485964153784, 127.10971355438232) ] ], fillColor: '#ff0000', fillOpacity: 0.3, strokeColor: '#ff0000', strokeOpacity: 0.6, strokeWeight: 3 }); Examples: 구멍 난 폴리곤 그리기 동적으로 폴리곤 그리기 Polygon의 paths는 KVOArray 객체이고 paths의 요소인 path 또한 지도 좌표 목록으로 구성된 KVOArray입니다. 따라서 폴리라인과 마찬가지로 KVOArray를 활용하여 폴리곤의 좌표 구성을 동적으로 변경할 수 있습니다. 생성 시 PolygonOptions의 paths를 입력할 때 또는 setPaths 메서드를 이용해 입력할 때에는 [Array]로 입력할 수 있지만 객체 내부적으로는 KVOArray로 저장하고 관리합니다. 따라서 getPaths 메서드를 이용해 반환받은 paths는 KVOArray이고 내부 path 또한 KVOArray입니다. KVOArray에 대한 자세한 설명은 KVO 상태 변경 알림를 참고합니다. 다음은 지도 클릭 시 클릭한 지점의 지도 좌표를 동적으로 반영하여 폴리곤을 그리는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var polygon = new naver.maps.Polygon({ map: map, paths: [[]], fillColor: '#ff0000', fillOpacity: 0.3, strokeColor: '#ff0000', strokeOpacity: 0.6, strokeWeight: 3, clickable: true }); naver.maps.Event.addListener(map, 'click', function(e) { var point = e.latlng; var path = polygon.getPaths().getAt(0); path.push(point); new naver.maps.Marker({ map: map, position: point }); }); Examples: 클릭한 지점 폴리곤 연결하기 사각형 그리기 Rectangle은 지도의 영역을 정의하여 간단하게 직사각형을 그릴 수 있는 객체입니다. 생성자에 RectangleOptions 객체 리터럴을 넘겨 사각형을 그립니다. bounds 속성에 LatLngBounds 또는 PointBounds 객체로 지도 영역을 설정할 수 있습니다. 폴리곤 객체와 마찬가지로 선, 채우기 스타일을 정의하는 옵션이 있습니다. 다음은 Rectangle 객체를 생성하여 지도에 직사각형을 그리는 예제입니다. var map = new naver.maps.Map('map'); var rectangle = new naver.maps.Rectangle({ map: map, bounds: new naver.maps.LatLngBounds( new naver.maps.LatLng(37.565, 126.9761217732253), // sw new naver.maps.LatLng(37.568, 126.980655026774) // ne ), strokeColor: '#5347AA', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#E51D1A', fillOpacity: 0.6 }); Examples: 사각형, 원, 타원 그리기 다음은 지도의 bounds가 변경될 때마다 Rectangle의 bounds도 함께 변경하는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var rectangle = new naver.maps.Rectangle({ map: map, bounds: map.getBounds(), strokeColor: 'none', fillColor: '#E51D1A', fillOpacity: 0.3 }); naver.maps.Event.addListener(map, 'bounds_changed', function() { rectangle.setBounds(map.getBounds()); }); Examples: 지도 좌표 경계 확인하기 원 그리기 Circle 객체는 원의 중심점과 m 단위의 반지름을 입력하여 지도 위에 원을 그리는 객체입니다. CircleOptions 객체 리터럴을 통해 center 속성에 원의 중심 지도 좌표, radius 속성에 m 단위의 반지름을 설정할 수 있고, 다른 도형 오버레이와 마찬가지로 선, 채우기 스타일을 설정할 수 있습니다. 다음은 그린팩토리에서 반경 500m를 원으로 그린 예제입니다. var GREEN_FACTORY = new naver.maps.LatLng(37.3595953, 127.1053971); var map = new naver.maps.Map('map', { center: GREEN_FACTORY, zoom: 10 }); var circle = new naver.maps.Circle({ map: map, center: GREEN_FACTORY, radius: 500, strokeColor: '#5347AA', strokeOpacity: 0.5, strokeWeight: 2, fillColor: '#E51D1A', fillOpacity: 0.3 }); Examples: 사각형, 원, 타원 그리기 타원 그리기 Ellipse는 지도의 영역을 정의하여 간단하게 타원을 그릴 수 있는 객체입니다. 생성자에 EllipseOptions 객체 리터럴을 넘겨 타원을 그립니다. bounds 속성에 LatLngBounds 또는 PointBounds 객체로 지도 영역을 설정할 수 있습니다. 다른 도형 오버레이와 마찬가지로 선, 채우기 스타일을 설정할 수 있습니다. 다음 예제는 Ellipse 객체를 생성하여 지도에 타원을 그리는 예제입니다. var map = new naver.maps.Map('map'); var ellipse = new naver.maps.Ellipse({ map: map, bounds: new naver.maps.LatLngBounds( new naver.maps.LatLng(37.565, 126.9761217732253), // sw new naver.maps.LatLng(37.568, 126.980655026774) // ne ), strokeColor: '#5347AA', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#E51D1A', fillOpacity: 0.6 }); Examples: 사각형, 원, 타원 그리기 × Search results Close "},"tutorial-4-Submodules.html":{"id":"tutorial-4-Submodules.html","title":"Tutorial: 서브 모듈 시스템","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 서브 모듈 시스템 서브 모듈 시스템 NAVER 지도 API v3은 지도의 기능을 확장하는 서브 모듈 시스템을 지원합니다. 현재 제공하는 서브 모듈의 목록은 다음과 같습니다. panorama - 거리뷰/항공뷰를 사용할 수 있는 panorama 모듈입니다. geocoder - 좌표 체계간 변환 메서드와 특정 좌표계를 지원하는 확장된 투영 객체들을 제공하는 geocoder 모듈입니다. drawing - 지도 위에 도형, 마커를 그릴 수 있는 컨트롤을 배치하고, 이용할 수 있도록 제공하는 drawing 모듈입니다. visualization - 지리 정보를 가지고 있는 데이터를 쉽게 이해할 수 있도록 열지도, 점지도를 제공하는 visualization 모듈입니다. 서브 모듈은 NAVER 지도 API v3이 로드되어 있어야 사용할 수 있으며, 기존의 naver.maps 네임스페이스를 확장합니다. 서브 모듈 로드하기 서브 모듈을 사용하려면 다음과 같이 NAVER 지도 API v3을 로드할 때 submodules URL 파라미터를 사용하여 해당 서브 모듈을 로드해야 합니다. 로드할 서브 모듈이 여러 개일 경우 콤마(,)를 이용해 여러 개의 서브 모듈을 한 번에 불러올 수 있습니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama\"&gt;&lt;/script&gt; 또는 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama,geocoder\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama,geocoder\"&gt;&lt;/script&gt; 비동기 방식으로 실행하기 DOM이 준비(ready)되기 전에 서브 모듈과 NAVER 지도 API v3을 로드했다면, 즉시 서브 모듈과 NAVER 지도 API v3을 사용할 수 있습니다. 또는 다음과 같이 HTML 문서가 모두 로드된 후에 NAVER 지도 API v3을 비동기 방식으로 로드해 사용할 수도 있습니다. 네이버 클라우드 플랫폼 var map = null; $.getScript(\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama\", function() { map = new naver.maps.Map('map-container'); }); 공공기관용 var map = null; $.getScript(\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama\", function() { map = new naver.maps.Map('map-container'); }); 위 예제는 jQuery 구문을 포함하고 있습니다. 이때, 서브 모듈 역시 비동기 방식으로 로드됩니다. 따라서, onJSContentLoaded 이벤트 핸들러를 사용합니다. 이 핸들러는 NAVER 지도 API v3 로드 시 함께 요청한 서브 모듈의 JavaScript 콘텐츠가 웹 브라우저에 모두 로드되었을 때 한 번 호출됩니다. 네이버 클라우드 플랫폼 var map = null, pano = null; $.getScript(\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama\", function() { naver.maps.onJSContentLoaded = function() { map = new naver.maps.Map('map-container'); pano = new naver.maps.Panorama('pano', { position: map.getCenter(), pov: { pan: -135, tilt: 29, fov: 100 } }); }; }); 공공기관용 $.getScript(\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama\", function() { naver.maps.onJSContentLoaded = function() { map = new naver.maps.Map('map-container'); pano = new naver.maps.Panorama('pano', { position: map.getCenter(), pov: { pan: -135, tilt: 29, fov: 100 } }); }; }); 위 예제는 jQuery 구문을 포함하고 있습니다. 또는 NAVER 지도 API v3 로드 시 callback 파라미터를 지정할 수 있습니다. 이 역시 함께 요청한 서브 모듈의 JavaScript 콘텐츠가 웹 브라우저에 모두 로드되었을 때 한 번 호출됩니다. callback 파라미터와 onJSContentLoaded 이벤트 핸들러가 모두 있을 때는 callback 파라미터로 지정한 콜백 함수만 호출합니다. 네이버 클라우드 플랫폼 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; 공공기관용 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; × Search results Close "},"tutorial-5-GroundOverlay.html":{"id":"tutorial-5-GroundOverlay.html","title":"Tutorial: 지상 오버레이","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지상 오버레이 지상 오버레이 지상 오버레이는 특정 이미지를 지도의 특정 위치(좌표 경계)에 타일처럼 배치하는 오버레이입니다. 따라서 사용자가 지도 화면을 드래그하거나 확대/축소하면 타일과 동일하게 동작합니다. 지상 오버레이 추가하기 지상 오버레이를 사용하려면 GroundOverlay 클래스의 객체를 생성해야 합니다. 생성자에는 하나의 이미지 URL과 좌표 경계, GroundOverlayOptions 객체 리터럴을 인수로 전달합니다. 다음 예제는 일반 지도 위에 위성 지도 이미지를 올리는 예제입니다. var bounds = new naver.maps.LatLngBounds( new naver.maps.LatLng(36.634249797, 127.129160067), new naver.maps.LatLng(36.734249797, 127.410516004) ); var map = new naver.maps.Map(\"map\", { zoom: 8, center: new naver.maps.LatLng(36.634249797, 127.129160067), mapTypeId: \"normal\" }); var groundOverlay = new naver.maps.GroundOverlay( \"../images/naver-satellite.png\", bounds, { opacity: 1, clickable: false } ); groundOverlay.setMap(map); Examples: 지상 오버레이 표시하기 지상 오버레이 제거하기 지상 오버레이를 제거하려면 지상 오버레이 객체의 setMap 메서드에 null을 전달합니다. groundOverlay.setMap(null); × Search results Close "},"tutorial-6-CustomOverlay.html":{"id":"tutorial-6-CustomOverlay.html","title":"Tutorial: 사용자 정의 오버레이","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 오버레이 사용자 정의 오버레이 NAVER 지도 API v3은 사용자 정의 오버레이를 생성할 수 있도록 OverlayView 클래스를 제공합니다. 이 클래스는 오버레이를 생성할 때 구현해야 하는 여러 메서드를 제공합니다. 다음은 사용자 정의 오버레이에 꼭 구현해야 하는 메서드입니다. onAdd 메서드는 지도에 오버레이를 추가할 때 호출되는 내용으로 구현해야 합니다. draw 메서드는 지도에 오버레이를 그려야 할 때 호출되는 내용으로 구현해야 합니다. onRemove 메서드는 지도에서 오버레이가 삭제될 때 호출되는 내용으로 구현해야 합니다. 사용자 정의 오버레이 추가 사용자 정의 오버레이 생성 다음 예제는 OverlayView를 상속받는 간단한 DOM 요소 오버레이를 생성합니다. /** * 사용자 정의 오버레이 구현하기 */ var CustomOverlay = function(options) { this._element = $('&lt;div style=\"position:absolute;left:0;top:0;width:120px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:2px solid #f00;\"&gt;커스텀오버레이&lt;/div&gt;') this.setPosition(options.position); this.setMap(options.map || null); }; // CustomOverlay는 OverlayView를 상속받습니다. CustomOverlay.prototype = new naver.maps.OverlayView(); CustomOverlay.prototype.constructor = CustomOverlay; CustomOverlay.prototype.onAdd = function() { var overlayLayer = this.getPanes().overlayLayer; this._element.appendTo(overlayLayer); }; CustomOverlay.prototype.draw = function() { // 지도 객체가 설정되지 않았으면 draw 기능을 하지 않습니다. if (!this.getMap()) { return; } // projection 객체를 통해 LatLng 좌표를 화면 좌표로 변경합니다. var projection = this.getProjection(), position = this.getPosition(); var pixelPosition = projection.fromCoordToOffset(position); this._element.css('left', pixelPosition.x); this._element.css('top', pixelPosition.y); }; CustomOverlay.prototype.onRemove = function() { this._element.remove(); // 이벤트 핸들러를 설정했다면 정리합니다. this._element.off(); }; CustomOverlay.prototype.setPosition = function(position) { this._position = position; this.draw(); }; CustomOverlay.prototype.getPosition = function() { return this._position; }; /** * 사용자 정의 오버레이 사용하기 */ var center = new naver.maps.LatLng(37.358202009037356, 127.10801839828491); var map = new naver.maps.Map(\"map\", { center: center, zoom: 12 }); // 오버레이 생성 var overlay = new CustomOverlay({ position: center, map: map }); // 오버레이 삭제 // overlay.setMap(null); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 사용자 정의 오버레이 표시하기 사용자 정의 오버레이 초기화 사용자 정의 오버레이 객체를 생성하면 지도에 연결해야 합니다. NAVER 지도 API는 setMap(map) 메서드 호출 시(또는 옵션의 map 속성 설정 시) onAdd 메서드를 호출해 오버레이가 지도에 추가되었음을 알립니다. 따라서, 지도 창(pane) 요소 중 적합한 요소에 오버레이 요소를 추가하는 기능을 이 메서드에 구현합니다. CustomOverlay.prototype.onAdd = function() { var overlayLayer = this.getPanes().overlayLayer; this._element.appendTo(overlayLayer); }; 위 예제는 jQuery 구문을 포함하고 있습니다. getPanes 메서드는 지도 창 요소를 나타내는 MapPanes 객체를 반환합니다. 사용자 정의 오버레이 그리기 지도에서 오버레이를 다시 그려야 할 때마다 NAVER 지도 API는 draw 메서드를 호출합니다. 따라서, 오버레이의 위치, 모양 등 현재 오버레이가 보여야 할 모습으로 업데이트하는 기능을 이 메서드에 구현합니다. CustomOverlay.prototype.draw = function() { // 지도 객체가 설정되지 않았으면 draw 기능을 하지 않습니다. if (!this.getMap()) { return; } // projection 객체를 통해 LatLng 좌표를 화면 좌표로 변경합니다. var projection = this.getProjection(), position = this.getPosition(); var pixelPosition = projection.fromCoordToOffset(position); this._element.css('left', pixelPosition.x); this._element.css('top', pixelPosition.y); }; 위 예제는 jQuery 구문을 포함하고 있습니다. getProjection 메서드는 지도 좌표와 화면 좌표를 서로 변환할 수 있는 메서드를 제공하는 MapSystemProjection 객체를 반환합니다. 이를 이용해 오버레이의 지도 좌표를 화면 좌표로 변환하고, 적절한 위치에 오버레이를 배치합니다. 사용자 정의 오버레이 제거 NAVER 지도 API v3은 setMap(null) 메서드 호출 시(또는 옵션의 map 속성을 null로 설정 시) onRemove 메서드를 호출해 오버레이가 지도에서 제거되었음을 알립니다. 따라서, 오버레이 요소를 지도 창 요소에서 제거하는 기능을 이 메서드에 구현합니다. CustomOverlay.prototype.onRemove = function() { this._element.remove(); // 이벤트 핸들러를 설정했다면 정리합니다. this._element.off(); }; 위 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-Controls.html":{"id":"tutorial-Controls.html","title":"Tutorial: 지도 컨트롤","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 컨트롤 지도 컨트롤 컨트롤은 사용자가 지도와 상호작용할 수 있도록 NAVER 지도 API v3에서 제공하는 UI(User Interface) 요소를 말합니다. NAVER 지도 API v3에서 기본적으로 제공하는 컨트롤은 다음과 같습니다. 줌 컨트롤: 지도의 줌 레벨을 조정할 수 있는 슬라이더 또는 +/- 버튼입니다. 이 컨트롤은 기본적으로 사용하지 않도록 되어 있습니다. 축척 컨트롤: 지도의 축척을 표시합니다. 이 컨트롤은 기본적으로 오른쪽 아래에 표시됩니다. 지도 유형 컨트롤: 일반 지도, 위성 지도와 같은 지도 유형을 전환할 수 있는 버튼 또는 드롭다운입니다. 이 컨트롤은 기본적으로 사용하지 않도록 되어 있습니다. 지도 데이터 저작권 컨트롤: 지도 데이터의 저작권을 표시합니다. 이 컨트롤은 기본적으로 왼쪽 아래에 표시됩니다. NAVER 로고 컨트롤: NAVER 로고를 표시합니다. 이 컨트롤은 기본적으로 오른쪽 아래에 표시됩니다. NAVER 지도 API v3에서 제공하는 컨트롤 중 축척, 지도 데이터 저작권, NAVER 로고 컨트롤은 기본적으로 표시됩니다. 그렇지 않은 컨트롤은 사용자가 명시적으로 설정하지 않는 한 표시되지 않습니다. 지도 컨트롤은 직접 접근해 수정할 수 없습니다. 지도 컨트롤의 모양 또는 위치를 수정하려면 MapOptions 객체의 속성을 수정하거나, setOptions 메서드로 지도의 옵션을 변경해 동적으로 수정해야 합니다. 지도에 컨트롤 추가/제거하기 지도에 컨트롤을 추가하거나 제거하려면 MapOptions 객체의 다음 속성을 사용합니다. { scaleControl: true, logoControl: true, mapDataControl: true, mapTypeControl: false, zoomControl: false } 다음 예제는 기본적으로 제공하는 컨트롤을 제거하고, 줌 컨트롤만 추가하는 예제입니다. var mapOptions = { scaleControl: false, logoControl: false, mapDataControl: false, zoomControl: true }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); Examples: 지도 컨트롤 추가/제거하기 컨트롤 옵션 사용하기 NAVER 지도 API v3에서 제공하는 기본 컨트롤 중 일부는 동작 방식이나 스타일을 변경할 수 있는 옵션을 제공합니다. 제공하는 스타일 옵션을 살펴보려면 아래 문서를 참고하세요. MapTypeControl ZoomControl LogoControl MapDataControl ScaleControl 컨트롤 스타일 수정하기 다음은 줌 컨트롤을 확대/축소 버튼과 슬라이드가 함께 있는 스타일로 설정하는 예제입니다. var mapOptions = { zoomControl: true, zoomControlOptions: { style: naver.maps.ZoomControlStyle.LARGE } }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); Examples: 지도 컨트롤 스타일 설정하기 컨트롤 배치하기 각 컨트롤에는 위치를 나타내는 Position 유형의 position 속성이 있습니다. 지원하는 컨트롤 위치는 다음과 같습니다. 다음 예제는 NAVER 지도 API v3에서 제공하는 모든 컨트롤이 서로 다른 위치에서 사용된 지도를 보여줍니다. var mapOptions = { mapTypeControl: true, mapTypeControlOptions: { style: naver.maps.MapTypeControlStyle.BUTTON, position: naver.maps.Position.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: naver.maps.ZoomControlStyle.SMALL, position: naver.maps.Position.RIGHT_CENTER }, scaleControl: true, scaleControlOptions: { position: naver.maps.Position.BOTTOM_RIGHT }, logoControl: true, logoControlOptions: { position: naver.maps.Position.TOP_LEFT }, mapDataControl: true, mapDataControlOptions: { position: naver.maps.Position.BOTTOM_LEFT } }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); Examples: 지도 컨트롤 위치 설정하기 × Search results Close "},"tutorial-Custom-Control.html":{"id":"tutorial-Custom-Control.html","title":"Tutorial: 사용자 정의 컨트롤","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 컨트롤 사용자 정의 컨트롤 NAVER 지도 API v3은 기본적으로 제공하는 컨트롤을 사용하지 않고, 사용자가 직접 만든 컨트롤을 사용할 수 있도록 API를 제공합니다. 사용자 정의 컨트롤 추가하기 NAVER 지도 API v3은 사용자 정의 컨트롤을 추가할 수 있도록 두 가지 방법을 제공합니다. 첫 번째는 추가할 컨트롤의 HTML을 문자열 형태로 전달하면서 CustomControl 객체를 생성하는 방법입니다. 두 번째 방법은 생성한 Map 객체의 controls 속성에 추가할 컨트롤의 HTML 노드를 설정하는 방법입니다. 다음은 두 가지 방법으로 사용자 정의 컨트롤이 생성된 지도를 보여주는 예제입니다. CustomControl 클래스를 이용한 방법 var locationBtnHtml = '&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;'; var customControl = new naver.maps.CustomControl(locationBtnHtml, { position: naver.maps.Position.TOP_LEFT }); var map = new naver.maps.Map('map', {}); naver.maps.Event.once(map, 'init', function() { customControl.setMap(map); }); Map 객체의 controls 속성을 이용한 방법 var $locationBtn = $('&lt;div style=\"position: absolute; left: 0px; top: 0px;\"&gt;&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;'), locationBtnEl = $locationBtn[0]; var map = new naver.maps.Map(\"map\", {}); naver.maps.Event.once(map, 'init', function() { map.controls[naver.maps.Position.TOP_LEFT].push(locationBtnEl); }); 위 예제는 jQuery 구문을 포함하고 있습니다. 사용자 정의 컨트롤 이벤트 추가하기 컨트롤이 사용자와 상호작용을 하려면 컨트롤이 사용자의 입력에 응답할 수 있어야 합니다. NAVER 지도 API v3에서 제공하는 Event 메서드를 이용해 컨트롤의 DOM 이벤트를 처리합니다. 다음은 버튼을 눌렀을 때 NAVER 그린팩토리의 위치로 중심점을 설정하는 예제입니다. CustomControl 클래스를 이용한 방법 var locationBtnHtml = '&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;'; var customControl = new naver.maps.CustomControl(locationBtnHtml, { position: naver.maps.Position.TOP_LEFT }); var map = new naver.maps.Map('map', {}); naver.maps.Event.once(map, 'init', function() { customControl.setMap(map); naver.maps.Event.addDOMListener(customControl.getElement(), 'click', function() { map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971)); }); }); Examples: 사용자 정의 컨트롤 만들기 Map 객체의 controls 속성을 이용한 방법 var $locationBtn = $('&lt;div style=\"position: absolute; left: 0px; top: 0px;\"&gt;&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;'), locationBtnEl = $locationBtn[0]; var map = new naver.maps.Map(\"map\", {}); naver.maps.Event.once(map, 'init', function() { map.controls[naver.maps.Position.TOP_LEFT].push(locationBtnEl); naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() { map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971)); }); }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 사용자 정의 컨트롤 만들기 × Search results Close "},"tutorial-DOM-Event.html":{"id":"tutorial-DOM-Event.html","title":"Tutorial: DOM 이벤트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API DOM 이벤트 DOM 이벤트 NAVER 지도 API v3은 지도 UI 이벤트 외에 사용자가 DOM(Document Object Model) 이벤트를 수신하고 응답할 수 있도록 메서드를 제공합니다. 이 메서드를 이용하면 사용자는 브라우저마다 다른 DOM 이벤트 모델을 별도로 처리할 필요가 없습니다. naver.maps.Event.addDOMListener( element:HTMLElement, eventName:String, listener:Function ) naver.maps.Event.removeDOMListener( listener:DOMEventListener | listeners:DOMEventListener[] | element:HTMLElement, eventName:String, listener:Function ) 이벤트 리스너 등록하기 이벤트 리스너를 등록하면 DOM 이벤트를 수신할 수 있습니다. addDOMListener 메서드를 이용해 특정 DOM에서 발생한 이벤트를 받아 핸들러를 실행하는 리스너를 등록합니다. 리스너를 등록하면 다음과 같이 DOMEventListener 객체를 받습니다. DOMEventListener = { eventName: String, listener: Function, target: HTMLElement } DOMEventListener 객체는 등록된 리스너의 정보를 담고 있는 객체로 등록된 리스너를 제거할 때 이용합니다. 이벤트 리스너 제거하기 이벤트 리스너를 등록 해제하면 더 이상 DOM 이벤트를 수신하지 않습니다. removeDOMListener 메서드를 이용해 등록한 리스너를 제거합니다. 이때, 인수로 DOMEventListener 객체(또는 객체 배열)를 전달할 수 있습니다. 다음 예제는 지도를 클릭했을 때, 마커가 있는 위치로 이동하며 줌 레벨을 변경하는 예제입니다. var mapOptions = { zoom: 4, center: new naver.maps.LatLng(37.3614483, 127.1114883) }; var map = new naver.maps.Map('map', mapOptions); var markerOptions = { position: map.getCenter(), map: map, title: 'Click to zoom' }; var marker = new naver.maps.Marker(markerOptions); var mapElement = map.getElement(); var listener = naver.maps.Event.addDOMListener(mapElement, 'click', function() { map.setZoom(8); map.setCenter(marker.getPosition()); naver.maps.Event.removeDOMListener(listener); }); × Search results Close "},"tutorial-Drawing.html":{"id":"tutorial-Drawing.html","title":"Tutorial: 그리기 도구 생성 및 기본 동작","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 그리기 도구 생성 및 기본 동작 그리기 도구 생성 및 기본 동작 그리기 도구 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 아래와 같이 사용자가 지도에 폴리곤, 사각형, 폴리라인, 원, 마커를 그릴 수 있는 그래픽 인터페이스를 제공합니다. 서브 모듈 로드하기 그리기 도구 서브 모듈은 NAVER 지도 API v3과는 별개의 라이브러리입니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 URL의 submodules 변수를 이용하여 로드해야 합니다. 그리기 도구 서브 모듈을 사용하려면 NAVER 지도 API v3이 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=drawing\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=drawing\"&gt;&lt;/script&gt; 그리기 도구 서브 모듈을 로드하면 오버레이 클래스들을 확장하여 setEditable 메서드를 추가합니다. 따라서 그리기 도구 모듈로 생성하지 않은 오버레이 객체도 setEditable(true)를 호출하면 일반적인 편집 기능을 사용할 수 있습니다. 시작하기 그리기 도구 서브 모듈의 대부분의 기능을 사용하려면 DrawingManager 객체가 필요합니다. 라이브러리를 로드한 후에 다음과 같이 DrawingManager 객체를 생성할 수 있습니다. var map = new naver.maps.Map('map'); var drawingManager = new naver.maps.drawing.DrawingManager({map: map}); Examples: 그리기 도구 기본 예제 DrawingManager DrawingManager 클래스는 사용자가 지도에 오버레이를 쉽게 그리고 수정할 수 있도록 그래픽 인터페이스를 제공합니다. 그리기 모듈의 오버레이 유형 Rectangle Ellipse: 원(Circle)은 제공하지 않습니다. Polyline Arrowline: PolylineOptions의 startIcon, endIcon을 사용하여 화살표 등을 표시할 수 있는 폴리라인 유형 Polygon Marker 그리기 도구 서브 모듈에서 만들어지는 오버레이는 NAVER 지도 API v3에서 제공하는 오버레이와 동일합니다. DrawingManager 옵션 drawingControl 옵션은 DrawingModenaver.maps.drawing.DrawingMode 상수 배열이고, 그리기 도구 컨트롤에 포함할 오버레이 유형을 정의합니다. naver.maps.drawing.HAND는 그리기 도구를 선택하지 않은 기본 상태로, 지도와 상호작용하거나 도형을 선택할 때의 상태입니다. 따라서 drawingControl 옵션의 기본값은 손 아이콘을 제외한 오버레이 유형 집합입니다. 각 오버레이 유형의 속성은 {overlay}Options 옵션으로 정의됩니다(예: rectangleOptions, polygonOptions). 단순한 스타일 속성만을 반영하고, map 객체나 위치 등은 반영하지 않습니다. NAVER 지도 API v3에서 제공하는 오버레이의 옵션들을 동일하게 사용합니다. DrawingManager 객체가 생성된 후 옵션을 변경하려면 setOptions 메서드를 호출해 새 값을 전달합니다. drawingManager.setOptions('drawingControlOptions', { position: naver.maps.Position.LEFT_CENTER, style: naver.maps.drawing.DrawingStyle.VERTICAL }); 자세한 내용은 drawingOptions를 참고하세요. Examples: 그리기 도구 옵션 활용하기 DrawingManager 이벤트 그리기 도구 서브 모듈을 이용해 만들어진 오버레이는 아래의 이벤트를 발생시킵니다. 오버레이 생성 시: naver.maps.drawing.DrawingEvent.ADD(공통), {overlay}Added(유형별) 오버레이 선택 시: naver.maps.drawing.DrawingEvent.SELECT(공통), {overlay}Selected(유형별) 오버레이 삭제 시: naver.maps.drawing.DrawingEvent.REMOVE(공통), {overlay}Removed(유형별) 아래와 같이 이벤트 리스너를 등록하면 오버레이의 객체가 인수로 전달됩니다. 전달된 오버레이 객체는 id,name 속성을 포함합니다. drawingManager.addListener('ellipseAdded', function(overlay) { console.log(overlay.id); //오버레이의 id console.log(overlay.name); //'ellipse', 오버레이의 유형 }); 그리기 인터랙션 도형 그리기 그리기 도구 컨트롤의 아이콘을 선택하여 그리기 모드로 전환합니다. 지도 위의 한 점을 클릭하여 그리기를 시작합니다. 아직 유효하지 않은 도형은 esc 키로 그리기를 취소할 수 있습니다. shift 키를 누른 상태에서 도형을 그리면 정방형 혹은 직교좌표(사용 중인 Projection 기준)로 스냅이 활성화됩니다. 두 점 이상을 클릭하여 도형을 완성합니다. 폴리라인, 화살표가 있는 폴리라인, 폴리곤은 마우스 오른쪽 버튼을 클릭하거나 esc를 눌러 그리기를 종료할 수 있습니다. 도형 이동하기 도형을 클릭하여 편집 모드로 변경합니다 도형을 드래그하여 이동합니다. 이동할 때 지도의 줌, 패닝은 제공되지 않습니다. 도형 수정하기 도형을 클릭하여 편집 모드로 변경합니다. 도형의 편집점을 드래그하여 수정합니다. 폴리라인, 화살표가 있는 폴리라인, 폴리곤은 선분의 중간에 있는 제어점을 드래그하여 점을 추가할 수 있습니다. 도형 삭제하기 그려진 도형을 마우스 오른쪽 버튼으로 클릭해 삭제 메뉴를 엽니다. 클릭하여 삭제합니다. 마커는 단일점 오버레이이므로 편집 모드를 제공하지 않고, 드래그 가능한 마커로 제공합니다. Examples: 그리기 도구 기본 예제 × Search results Close "},"tutorial-Geocoder-Geocoding.html":{"id":"tutorial-Geocoder-Geocoding.html","title":"Tutorial: Geocoder를 활용한 주소와 좌표 검색 API 호출하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Geocoder를 활용한 주소와 좌표 검색 API 호출하기 Geocoder를 활용한 주소와 좌표 검색 API 호출하기 Geocoder 서브 모듈을 활용하여 주소-&gt;좌표 검색(geocode), 좌표-&gt;주소 검색(reversegeocode) API를 호출할 수 있습니다. 등록된 Client Id와 웹 서비스 URL이 일치하는 페이지에서만 정상적으로 사용할 수 있습니다. Geocoder 서브 모듈은 Geocoding API와 ReverseGeocoding API를 호출합니다. Geocoder 서브 모듈을 사용하고자 할 경우 Module:geocoder의 사전 준비 사항을 참고하세요. Geocoder는 Geocoding와 ReverseGeocoding의 일일 허용량을 사용합니다. 주소 &lt;-&gt; 좌표 변환 API 호출 예제는 주소와 좌표 검색 API 사용하기를 참고합니다. 서브 모듈 로드하기 Geocoder를 사용하려면 Geocoder 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다. Geocoder 서브 모듈을 사용하려면 NAVER 지도 API v3이 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=geocoder\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=geocoder\"&gt;&lt;/script&gt; naver.maps.Service 객체 서버 API 서비스를 활용하려면 naver.maps.Service 정적 객체를 사용합니다. Service 객체는 서버 API를 호출하는 데 필요한 파라미터와 메서드를 제공합니다. NAVER 지도 API v3을 통해 호출하는 서버 API는 호출시 마다 애플리케이션의 API 일일 허용량을 사용합니다. CoordinatesType 객체 CoordinatesType 객체는 서버 API 호출 및 결과로 사용할 좌표 체계명을 나타냅니다. 지원하는 좌표 체계의 목록은 아래와 같습니다. LATLNG: 위/경도(WGS 84) 좌표계를 나타냅니다. 기본값 TM128: TM128(KATECH) 좌표계를 나타냅니다. UTMK: UTMK 좌표계를 나타냅니다. EPSG3857: 구글맵(EPSG3857) 좌표계를 나타냅니다. Status 객체 Status 객체는 서버 API 호출 결과의 상태를 나타냅니다. OK: 요청이 성공한 상태입니다. ERROR: 요청이 실패한 상태입니다. 서버 API 호출 시 전달하는 callback 함수의 첫 번째 파라미터로 Status값이 전달되며, 이 값으로 요청 결과의 성공 및 실패 여부를 확인할 수 있습니다. naver.maps.Service.geocode({ query: '모르는 주소' }, function(status, response) { if (status === naver.maps.Service.Status.ERROR) { return alert('Something wrong!'); } // 성공 시의 response 처리 }); ServiceOptions ServiceOptions는 서버 API 호출 시 전달할 기본 파라미터를 정의합니다. sourcecrs, targetcrs, orders 파라미터를 정의할 수 있으며, 각 파라미터의 값으로 CoordinatesType 및 [OrderType] 객체를 활용할 수 있습니다. 파라미터명 기본값 설명 sourcecrs naver.maps.Service.CoordinatesType.LATLNG 좌표 체계의 이름 targetcrs naver.maps.Service.CoordinatesType.LATLNG 좌표 체계의 이름 orders naver.maps.Service.OrderType.ADDR 변환 작업 이름 주소 -&gt; 좌표 검색(geocode) API 호출 Geocoder 서브 모듈을 이용해, 주소로 좌표를 검색하는 geocode API를 호출할 수 있습니다. naver.maps.Service.geocode 또는 naver.maps.Service.fromAddrToCoord 메서드를 사용하여 호출할 수 있습니다. 첫 번째 파라미터로 ServiceOptions 객체에 query 파라미터를 추가한 options를 전달하며, query 옵션은 필수로 전달해야 합니다. query 파라미터는 검색할 주소의 문자열입니다. 두 번째 파라미터는 요청의 결과를 처리할 callback 함수입니다. fromAddrToCoord 편의 메서드는 내부적으로 geocode 메서드를 호출하며, 동일하게 동작합니다. naver.maps.Service.geocode({ query: '불정로 6' }, function(status, response) { if (status !== naver.maps.Service.Status.OK) { return alert('Something wrong!'); } var result = response.v2, // 검색 결과의 컨테이너 items = result.addresses; // 검색 결과의 배열 // do Something }); 요청이 성공하면 callback 함수의 두 번째 파라미터로 아래와 같은 형태의 json 객체 response가 전달됩니다. { \"v2\": { \"status\": \"OK\", \"meta\": { \"totalCount\": 1, \"page\": 1, \"count\": 1 }, \"addresses\": [ { \"roadAddress\": \"경기도 성남시 분당구 불정로 6 그린팩토리\", \"jibunAddress\": \"경기도 성남시 분당구 정자동 178-1 그린팩토리\", \"englishAddress\": \"6, Buljeong-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea\", \"addressElements\": [ { \"types\": [ \"POSTAL_CODE\" ], \"longName\": \"13561\", \"shortName\": \"\", \"code\": \"\" } ], \"x\": \"127.10522081658463\", \"y\": \"37.35951219616309\", \"distance\": 20.925857741585514 } ], \"errorMessage\": \"\" } } response 형태에 대한 자세한 내용은 GeocodeResponse를 참조합니다. Geocode의 상세 설명은 Geocoding API를 참조합니다. NAVER 지도 API v3을 이용해 호출하는 서버 API는 호출할 때마다 애플리케이션의 API 일일 허용량을 사용합니다. 좌표 -&gt; 주소 검색(reversegeocode) API 호출 Geocoder 서브 모듈을 이용해, 좌표로 주소를 검색하는 reversegeocode API를 호출할 수 있습니다. naver.maps.Service.reverseGeocode 또는 naver.maps.Service.fromCoordToAddr 메서드를 사용하여 호출할 수 있습니다. 첫 번째 파라미터로 ServiceOptions 객체에 coords 파라미터를 추가한 options를 전달하며, coords 옵션은 필수로 전달해야 합니다. coords 파라미터는 검색할 좌표이며, 경도,위도로 된 문자열(예: 128.12345,37.98776) 또는 Coord 객체 형태로 전달합니다. 두 번째 파라미터는 요청의 결과를 처리할 callback 함수입니다. fromCoordToAddr 편의 메서드는 내부적으로 reverseGeocode 메서드를 호출하며, 동일하게 동작합니다. naver.maps.Service.reverseGeocode({ coords: new naver.maps.LatLng(37.3595316, 127.1052133), }, function(status, response) { if (status !== naver.maps.Service.Status.OK) { return alert('Something wrong!'); } var result = response.v2, // 검색 결과의 컨테이너 items = result.results, // 검색 결과의 배열 address = result.address; // 검색 결과로 만든 주소 // do Something }); 요청이 성공하면 callback 함수의 두 번째 파라미터로 아래와 같은 형태의 json 객체 response가 전달됩니다. { \"v2\":{ \"status\":{ \"code\": 0, \"name\": \"ok\", \"message\": \"done\" }, \"results\":[ { \"name\": \"legalcode\", \"code\": { \"id\": \"2641010100\", \"type\": \"L\", \"mappingId\": \"08410101\" }, \"region\": { \"area0\": { \"name\": \"kr\", \"coords\": { \"center\": { \"crs\": \"\", \"x\": 0.0, \"y\": 0.0 } } }, \"area1\": { \"name\": \"부산광역시\", \"coords\": { \"center\": { \"crs\": \"EPSG:4326\", \"x\": 129.0750222, \"y\": 35.1798159 } } }, \"area2\": { \"name\": \"금정구\", \"coords\": { \"center\": { \"crs\": \"EPSG:4326\", \"x\": 129.0921, \"y\": 35.243068 } } }, \"area3\": { \"name\": \"두구동\", \"coords\": { \"center\": { \"crs\": \"EPSG:4326\", \"x\": 129.1133567, \"y\": 35.2982641 } } }, \"area4\": { \"name\": \"\", \"coords\": { \"center\": { \"crs\": \"\", \"x\": 0.0, \"y\": 0.0 } } } } } ], \"address\": { \"jibunAddress\": \"경기도 성남시 분당구 정자동 178-1\", \"roadAddress\": \"경기도 성남시 분당구 불정로 6 NAVER그린팩토리\" } } } response 형태에 대한 자세한 내용은 ReverseGeocodeResponse를 참조합니다. ReverseGeocode의 상세 설명은 ReverseGeocoding API를 참조합니다. NAVER 지도 API v3을 이용해 호출하는 서버 API는 호출할 때마다 애플리케이션의 API 일일 허용량을 사용합니다. Examples: 주소와 좌표 검색 API 사용하기 × Search results Close "},"tutorial-Geocoder.html":{"id":"tutorial-Geocoder.html","title":"Tutorial: Geocoder를 활용한 좌표 변환","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Geocoder를 활용한 좌표 변환 Geocoder를 활용한 좌표 변환 Geocoder 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 좌표 체계 간 변환 메서드와 특정 좌표계를 지원하는 투영 객체들을 제공합니다. Geocoder에 대한 다양한 예제는 Geocoder 예제를 참고합니다. 서브 모듈 로드하기 Geocoder를 사용하려면 Geocoder 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다. Geocoder 서브 모듈을 사용하려면 NAVER 지도 API v3이 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=geocoder\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=geocoder\"&gt;&lt;/script&gt; 좌표 체계 변환하기 Geocoder 서브 모듈을 사용하면 좌표 체계 변환 메서드를 사용할 수 있습니다. 현재 변환할 수 있는 좌표 체계의 목록은 아래와 같습니다. 지원되는 좌표 체계는 지속적으로 추가될 예정입니다. LatLng: 위/경도로 나타내는 좌표계입니다. UTMK: UTMK 좌표계입니다. NAVER: NAVER의 자체 좌표계입니다. TM128: TM128 좌표계입니다. 좌표계를 변환하려면 naver.maps.TransCoord 정적 객체를 사용합니다. var latlng = new naver.maps.LatLng(37.5666103, 126.9783882); // 서울시청 위/경도 좌표 var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -&gt; UTMK var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk); // UTMK -&gt; TM128 var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -&gt; NAVER Examples: 좌표계 변환하기 × Search results Close "},"tutorial-KVO-State-Changes.html":{"id":"tutorial-KVO-State-Changes.html","title":"Tutorial: KVO 상태 변경 알림","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVO 상태 변경 알림 KVO 상태 변경 알림 KVO(Key-Value Observing) 상태 변경 알림은 NAVER 지도 API v3 객체의 상태 변경을 알려주는 이벤트입니다. KVO 또는 KVOArray 클래스를 상속받은 NAVER 지도 API v3의 일부 객체는 자신의 상태를 가지고 있으며, 속성이 변경될 때마다 NAVER 지도 API v3은 속성이 변경되었다는 이벤트를 시작합니다. KVO: 속성(키)이 변경되면 알려줍니다. KVOArray: 배열 형태의 KVO로 배열의 요소가 변경되면 알려줍니다. KVO 상태 변경 알림은 다음과 같은 규칙에 따라 이름이 지정됩니다. {key}_changed 이벤트 리스너 등록하기 이벤트 리스너를 등록하면 객체의 상태 변경 알림을 수신할 수 있습니다. addListener 메서드를 이용해 특정 객체에서 발생한 알림을 받아 핸들러를 실행하는 리스너를 등록합니다. 다음은 지도의 줌 레벨이 변경되었을 때 줌 레벨을 정보 창에 표시하는 예제입니다. var map = new naver.maps.Map('map', { zoom: 4, center: new naver.maps.LatLng(37.3614483, 127.1114883), padding: { top: 100 }, zoomControl:true, zoomControlOptions: { style: naver.maps.ZoomControlStyle.SMALL } }); var contentEl = $('&lt;div class=\"iw_inner\" style=\"width:350px;position:absolute;top:0;right:0;z-index:1000;background-color:#fff;border:solid 1px #333;\"&gt;' + '&lt;h3&gt;Map States&lt;/h3&gt;' + '&lt;p style=\"font-size:14px;\"&gt;zoom : &lt;em class=\"zoom\"&gt;'+ map.getZoom() +'&lt;/em&gt;&lt;/p&gt;' + '&lt;p style=\"font-size:14px;\"&gt;center : &lt;em class=\"center\"&gt;'+ map.getCenter() +'&lt;/em&gt;&lt;/p&gt;' + '&lt;p style=\"font-size:14px;\"&gt;bounds : &lt;em class=\"bounds\"&gt;'+ map.getBounds() +'&lt;/em&gt;&lt;/p&gt;' + '&lt;/div&gt;'); contentEl.appendTo(map.getElement()); naver.maps.Event.addListener(map, 'zoom_changed', function(zoom) { contentEl.find('.zoom').text(zoom); }); naver.maps.Event.addListener(map, 'bounds_changed', function(bounds) { contentEl.find('.center').text(map.getCenter()); contentEl.find('.bounds').text(bounds); }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: KVO 이벤트 리스너를 등록하면 다음과 같이 MapEventListener 객체를 받습니다. MapEventListener = { eventName: String, listener: Function, listenerId: String, target:Object } MapEventListener 객체는 등록된 리스너의 정보를 담고 있는 객체로 등록된 리스너를 제거할 때 이용합니다. 이벤트 리스너 제거하기 이벤트 리스너를 등록 해제하면 더 이상 KVO 상태 변경 알림을 수신하지 않습니다. removeListener 메서드를 이용해 등록한 리스너를 제거합니다. 이벤트 인수에 접근하기 KVO 상태 변경 알림이 발생하면 NAVER 지도 API는 일반적으로 이벤트 인수를 전달하며, 등록한 리스너를 이용해 이벤트 인수에 접근할 수 있습니다. 예를 들어, 이벤트 리스너 등록하기에서 살펴본 예제에서 zoom_changed 알림이 발생하면 변경된 줌 레벨값에 접근해 사용하는 것을 볼 수 있습니다. × Search results Close "},"tutorial-Map.html":{"id":"tutorial-Map.html","title":"Tutorial: 지도 생성 및 기본 동작","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 생성 및 기본 동작 지도 생성 및 기본 동작 Map 객체는 특정 DOM 요소에 지도를 표현합니다. 지도 기본 예제를 참고하시기 바랍니다. 지도 초기화하기 지도를 초기화하려면 지도가 표현될 DOM 요소 또는 DOM 요소의 id를 명시해야 합니다. var map = new naver.maps.Map(document.getElementById('map')); 또는 var map = new naver.maps.Map('map'); 지도 유형 설정하기 Map 객체는 지도 유형을 저장하고 있습니다. 지도 유형을 설정하려면 지도 초기화 시 MapOptions를 이용하거나, setMapTypeId 메서드를 이용합니다. var map = new naver.maps.Map('map', { mapTypeId: naver.maps.MapTypeId.HYBRID }); 또는 var maps = new naver.maps.Map('map'); map.setMapTypeId(naver.maps.MapTypeId.HYBRID); 지도 이동하기 지도는 중심 좌표와 줌 레벨, 좌표 경계를 이용해 이동할 수 있습니다. 또한, 화면의 픽셀 좌표를 이용해 원하는 화면 좌표만큼 이동할 수도 있습니다. var jeju = new naver.maps.LatLng(33.3590628, 126.534361); map.setCenter(jeju); // 중심 좌표 이동 map.setZoom(13); // 줌 레벨 변경 var seoul = new naver.maps.LatLngBounds( new naver.maps.LatLng(37.42829747263545, 126.76620435615891), new naver.maps.LatLng(37.7010174173061, 127.18379493229875)); map.fitBounds(seoul); // 좌표 경계 이동 map.panBy(new naver.maps.Point(10, 10)); // 오른쪽 아래로 10 픽셀 이동 fitBounds 메서드를 이용하면, NAVER 지도 API는 내부적으로 좌표 경계를 화면에 표시할 수 있는 최적의 중심 좌표와 줌 레벨을 계산해 지도를 이동합니다. × Search results Close "},"tutorial-MapTypes.html":{"id":"tutorial-MapTypes.html","title":"Tutorial: 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 유형 지도 유형 지도 유형(MapTypes)은 지도의 정보를 말하는 것으로 지도 타일을 어떻게 표시할지, 좌표계를 어떻게 변환할지를 정의하고 있습니다. NAVER 지도 API v3은 네 가지 지도 유형을 기본적으로 제공합니다. 기본 지도 유형 일반 일반 이미지 지도 유형입니다. MapTypeId 객체의 NORMAL 상숫값을 사용합니다. 위성 위성 이미지 지도 유형입니다. MapTypeId 객체의 SATELLITE 상숫값을 사용합니다. 겹침 위성 이미지 지도 위에 주요 도로와 지명을 함께 보여주는 겹침 지도 유형입니다. MapTypeId 객체의 HYBRID 상숫값을 사용합니다. 지형도 지형의 높낮이를 함께 보여주는 지도 유형입니다. MapTypeId 객체의 TERRAIN 상숫값을 사용합니다. 지도 유형 설정하기 지도를 초기화할 때 지도 유형을 설정하려면 다음과 같이 MapOptions 객체의 mapTypeId 속성을 설정합니다. var map = new naver.maps.Map('map', { mapTypeId: naver.maps.MapTypeId.HYBRID }); 지도 유형을 동적으로 설정하려면 다음과 같이 Map 객체의 setMapTypeId 메서드를 이용합니다. map.setMapTypeId(naver.maps.MapTypeId.NORMAL); Examples: 지도 유형 설정하기 사용자 지도 유형 NAVER 지도 API v3은 지도 유형을 만들 때 구현해야 할 메서드와 속성을 정의한 MapType 추상 인터페이스를 제공합니다. 이 인터페이스를 구현한 MapType 객체는 좌표계를 어떻게 변환할 것인지를 결정하기 위해 지도 좌표와 세계 좌표 간의 변환 방식을 정의하는 Projection 객체를 포함하며, 투영 객체를 이용해 표시할 타일의 인덱스를 계산하고 해당 인덱스의 타일을 반환하는 역할을 합니다. 지도 좌표란 실세계의 고유한 지점을 가리키는 좌표로 일반적인 위/경도 좌표입니다. 세계 좌표란 API에서 지도 위의 고유한 한 점을 가리키는 좌표로 내부적으로 사용하는 좌표입니다. 좌표 체계에 관한 자세한 내용은 지도 투영과 좌표 체계를 참고합니다. 즉, 새로운 타일이 필요할 때마다 NAVER 지도 API v3은 MapType 객체의 인터페이스를 호출해 현재 좌표와 줌 레벨에 맞는 새로운 타일을 가져와 표시합니다. MapType 인터페이스를 구현하는 방법은 사용자 지도 유형 만들기를 참고합니다. 지도 유형 저장소 사용하기 앞서 일반, 위성 등의 다양한 지도 유형을 설명했습니다. NAVER 지도 API v3은 이와 같은 지도 유형을 관리하기 위해 지도 유형 저장소라고 불리는 MapTypeRegistry 객체를 이용합니다. 지도 유형 저장소는 MapType 객체를 컬렉션으로 관리하고 있으며, NAVER 지도 API v3에서 기본적으로 제공하는 지도 유형은 NaverStyleMapTypeOptions 객체에서 제공하는 팩토리 메서드를 이용해 접근할 수 있습니다. naver.maps.NaverStyleMapTypeOptions.getNormalMap(); 다음은 원하는 지도 유형(위성, 겹침보기)만 등록하는 예제입니다. 등록되지 않은 지도 유형을 사용하려고 하면 오류가 발생합니다. var registry = new naver.maps.MapTypeRegistry(); var map = new naver.maps.Map('map', { mapTypes: registry, mapTypeId: naver.maps.MapTypeId.SATELLITE }); map.mapTypes.set(naver.maps.MapTypeId.SATELLITE, naver.maps.NaverStyleMapTypeOptions.getSatelliteMap()); map.mapTypes.set(naver.maps.MapTypeId.HYBRID, naver.maps.NaverStyleMapTypeOptions.getHybridMap()); map.setMapTypeId(naver.maps.MapTypeId.NORMAL); // error thrown 사용자 지도 유형 만들기 사용자 지도 유형을 만들려면 앞서 설명한 MapType 인터페이스를 구현하고, 지도 유형 저장소에 추가해야 합니다. MapType 인터페이스를 구현하려면 다음 메서드와 속성을 정의해야 합니다. getTile (필수): 중심 세계 좌표와 투영법에 따라 표시할 x축과 y축 인덱스, 줌 레벨 z를 전달받아 화면에 표시할 타일 요소를 반환합니다. minZoom: 지도 유형이 타일을 표시할 수 있는 최소 줌 레벨을 지정합니다. maxZoom: 지도 유형이 타일을 표시할 수 있는 최대 줌 레벨을 지정합니다. tileSize: 타일의 크기를 지정합니다. 기본값은 256 x 256입니다. projection: 지도 유형이 사용할 투영법입니다. 지정하지 않으면 지도 좌표와 세계 좌표가 일치하는 기본 투영법을 사용합니다. name: 지도 유형의 이름입니다. 지도 유형의 이름은 지도 유형 컨트롤 등에서 사용합니다. 다음은 MapType 인터페이스를 구현한 사용자 지도 유형의 예제입니다. var MyMapType = { name: \"Alphabet\", minZoom: 0, maxZoom: 22, projection: naver.maps.EPSG3857, tileSize: new naver.maps.Size(50, 50), getTile: function(x, y, z) { var w = this.tileSize.width, h = this.tileSize.height; var ascii = parseInt(Math.abs(x + y) % 26, 10) + 65; alphabet = String.fromCharCode(ascii); var tile = document.createElement('div'); tile.style.width = w +'px'; tile.style.height = w +'px'; return tile; } }; var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10, mapTypeId: 'mine', mapTypes: new naver.maps.MapTypeRegistry({ 'mine': MyMapType }), mapTypeControl: true, mapTypeControlOptions: { style: naver.maps.MapTypeControlStyle.DROPDOWN } }); Examples: 사용자 지도 유형 만들기 이미지 지도 유형 만들기 NAVER 지도 API v3은 이미지 타일 방식의 지도 유형을 빠르고, 쉽게 만들 수 있는 ImageMapType 클래스를 제공합니다. 이 클래스를 활용하면 NAVER 지도 API v3에서 제공하는 기본 지도 유형과 유사한 이미지 지도 유형을 만들 수 있습니다. ImageMapType 클래스를 이용해 이미지 지도 유형을 만들 때는 ImageMapTypeOptions 객체를 전달해야 합니다. 이 객체는 다음과 같은 메서드와 속성을 정의하고 있습니다. getTile (필수): 중심 세계 좌표와 투영법에 따라 표시할 x축과 y축 인덱스, 줌 레벨 z를 전달받아 화면에 표시할 이미지 타일의 URL 또는 URL의 배열을 반환합니다. minZoom: 지도 유형이 타일을 표시할 수 있는 최소 줌 레벨을 지정합니다. maxZoom: 지도 유형이 타일을 표시할 수 있는 최대 줌 레벨을 지정합니다. tileSize: 타일의 크기를 지정합니다. 기본값은 256 x 256입니다. projection: 지도 유형이 사용할 투영법입니다. 지정하지 않으면 지도 좌표와 세계 좌표가 일치하는 기본 투영법을 사용합니다. name: 지도 유형의 이름입니다. 지도 유형의 이름은 지도 유형 컨트롤 등에서 사용합니다. repeatX: 현재 화면에서 지도 유형이 줌 레벨에 따라 표현할 수 있는 타일의 범위를 넘어섰을 때 타일의 반복 여부입니다. 이 옵션은 다음과 같이 세계 지도의 최소 레벨에서 지형을 연속적으로 표현하고자 할 때 주로 사용합니다. 이미지 지도 유형의 옵션을 동적으로 변경하기 앞의 예제와 같이 ImageMapTypeOptions 객체를 지정해 ImageMapType 인스턴스를 생성하면 getMapTypeOptions 메서드를 이용해 지정한 ImageMapTypeOptions 객체를 가져올 수 있습니다. 이 객체를 동적으로 수정한 다음, setMapTypeOptions 메서드를 이용해 설정하면 지도 유형을 변경할 수 있습니다. 이때 지도를 새로 고쳐야 변경된 지도 유형이 반영됩니다. 다음은 지도의 타일 크기를 동적으로 변경하는 예제입니다. map.setMapTypeId(naver.maps.MapTypeId.NORMAL); var normalType = map.getMapType(); var normalTypeOption = normalType.getMapTypeOptions(); normalTypeOption.tileSize = new naver.maps.Size(512, 512); normalType.setMapTypeOptions(normalTypeOption); map.refresh(); Examples: 투영법과 타일의 크기를 동적으로 변경하기 캔버스 지도 유형 만들기 NAVER 지도 API v3은 캔버스 타일 방식의 지도 유형을 빠르고, 쉽게 만들 수 있는 CanvasMapType 클래스를 제공합니다. CanvasMapType 클래스를 이용해 캔버스 지도 유형을 만들 때는 CanvasMapTypeOptions 객체를 전달해야 합니다. 이 객체는 다음과 같은 메서드와 속성을 정의하고 있습니다. getTile (필수): 중심 세계 좌표와 투영법에 따라 표시할 x축과 y축 인덱스, 줌 레벨 z를 전달받아 화면에 표시할 CanvasTile 객체를 반환합니다. minZoom: 지도 유형이 타일을 표시할 수 있는 최소 줌 레벨을 지정합니다. maxZoom: 지도 유형이 타일을 표시할 수 있는 최대 줌 레벨을 지정합니다. tileSize: 타일의 크기를 지정합니다. 기본값은 256 x 256입니다. projection: 지도 유형이 사용할 투영법입니다. 지정하지 않으면 지도 좌표와 세계 좌표가 일치하는 기본 투영법을 사용합니다. name: 지도 유형의 이름입니다. 지도 유형의 이름은 지도 유형 컨트롤 등에서 사용합니다. repeatX: 현재 화면에서 지도 유형이 줌 레벨에 따라 표현할 수 있는 타일의 범위를 넘어섰을 때 타일의 반복 여부입니다. 이 옵션은 다음과 같이 세계 지도의 최소 레벨에서 지형을 연속적으로 표현하고자 할 때 주로 사용합니다. 다음은 CanvasMapType 클래스를 이용해 알파벳 사용자 지도 유형을 만든 예제입니다. var MyMapType = { name: \"Alphabet\", minZoom: 0, maxZoom: 22, tileSize: new naver.maps.Size(50, 50), getTileData: function(x, y, z) { var w = this.tileSize.width, h = this.tileSize.height, canvas = document.createElement(\"canvas\"), ctx = canvas.getContext(\"2d\"); var ascii = parseInt(Math.abs(x + y) % 26, 10) + 65; alphabet = String.fromCharCode(ascii); canvas.width = w; canvas.height = h; ctx.globalAlpha = 1 - ((ascii - 65) * 0.04); ctx.rect(0, 0, w, h); ctx.fillStyle = \"#000\"; ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = \"#aaa\"; ctx.stroke(); ctx.font = \"bold \" + (Math.min(w, h) - 10) + \"px Arial\"; ctx.textBaseline = \"middle\"; ctx.textAlign = \"center\"; ctx.fillStyle = \"#fff\"; ctx.fillText(alphabet, w / 2, h / 2); return ctx.getImageData(0, 0, w, h); } }; var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(28.084179775000003, 25.216796875), zoom: 10, mapTypeId: 'Alphabet', mapTypes: new naver.maps.PaneTypeRegistry({ \"Alphabet\": new naver.maps.CanvasMapType(MyMapType) }) }); Examples: 캔버스 타일 지도 유형 기타 사용자 지도 유형 예제 위에서 설명한 사용자 지도 유형 외에도 다음과 같이 다양한 사용자 지도 유형 예제를 참고할 수 있습니다. Examples: 지도의 타일 인덱스 그리드 지도 유형 Examples: 이미지 타일 지도 유형 Examples: 두 가지의 지도 유형을 함께 사용하기 Examples: Starcraft The Hunters 지도 유형 Examples: NAVER 그린팩토리 지도 유형 × Search results Close "},"tutorial-Migrate-To-StyleMap.html":{"id":"tutorial-Migrate-To-StyleMap.html","title":"Tutorial: 기존 맵 타일에서 신규 맵 타일(StyleMap)으로 전환하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 기존 맵 타일에서 신규 맵 타일(StyleMap)으로 전환하기 기존 맵 타일에서 신규 맵 타일(StyleMap)으로 전환하기 이 문서는 NAVER 지도 API v3 기존 맵 타일에서 신규 맵 타일 (StyleMap)로 전환하는 사용자를 위해 NAVER 지도 API v3의 주요 인터페이스 중 신규 맵 타일에서 변경된 내용을 중심으로 설명합니다. 주의 현재 버전은 useStyleMap: true로 설정하지 않아도 신규 타일로 노출됩니다. 주요 변경 내용 기본 투영 변경 기존 맵 타일: NAVER 지도 API v3에서 기본적으로 제공하는 지도 유형(MapType)은 UTMK 투영법을 변조한 네이버 자체 투영법인 UTMK_NAVER를 사용합니다. 신규 맵 타일: StyleMap에서 기본적으로 제공하는 지도 유형은 웹 기반 지도 서비스에서 일반적으로 사용하는 EPSG:3857 을 기본 투영으로 사용합니다. 기본 줌 레벨 기존 맵 타일: 11. 신규 맵 타일: 16. 기존 줌 레벨과 +5 차이가 있습니다. 줌 레벨 지원 범위 기존 맵 타일: 1~14 레벨을 지원하고 있으며, 14 레벨이 최대 확대 레벨입니다. 신규 맵 타일: 0레벨이 세계지도 전도가 보이는 레벨이며, 21 레벨이 최대 확대 레벨입니다. minZoom 제한 기존 맵: minZoom 초기 지도 유형의 최저 줌 레벨. 신규 맵: minZoom 6. 지도를 국내로 제한하면서 6으로 제한합니다. 줌 레벨 범례 기존 맵 타일 레벨 범례 1 ~ 2 국가 3 ~ 5 시도 6 ~ 8 시군구 9 ~ 10 읍면동 11 ~ 12 거리 13 ~ 14 부동산 신규 맵 타일 레벨 범례 5 ~ 6 국가 7 ~ 9 시도 10 ~ 12 시군구 13 ~ 14 읍면동 15 ~ 16 거리 17 ~ 20 부동산 기본 줌 변경 기존 맵 타일: 11을 기본 줌 레벨로 사용 신규 맵 타일: 16을 기본 줌 레벨로 사용 신규 타일은 기존 타일 줌레벨 보다 5 레벨 높습니다. 기존 타일 11 레벨이 v5 타일에서는 16 레벨입니다. StyleMap 서브 모듈 제거 기존 맵 타일: stylemap 서브 모듈을 이용하여 신규 스타일 지도 표시 신규 맵 타일: 지도 생성 시 옵션으로 신규 스타일 지도 표시 전환 방법 지도 초기화하기 기존 맵 타일 var map = new naver.maps.Map('map', { size: new naver.maps.Size(300, 400) }); 신규 맵 타일 옵션에 useStyleMap: true 을 설정합니다. var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, size: new naver.maps.Size(300, 400) }); Examples: 1-map-stylemap.example 지도 옵션 설정 및 참조하기 기존 맵 타일 var map = new naver.maps.Map('map', { zoom: 11, center: new naver.maps.LatLng(37.5666103, 126.9783882) }); map.setOptions('minZoom', 10); console.log(map.getOptions('minZoom') === 10); 신규 맵 타일 init 이벤트 시점에 옵션 값을 참조합니다. var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, zoom: 16, center: new naver.maps.LatLng(37.5666103, 126.9783882) }); map.setOptions('minZoom', 10); console.log('잘못된 참조 시점', map.getOptions('minZoom') === 10); /* 변경점 */ naver.maps.Event.once(map, 'init', function () { console.log('올바른 참조 시점', map.getOptions('minZoom') === 10); }); Examples: 10-stylemap-options.example NaverStyleMapTypeOptions 사용 기존 맵 타일 var registry = new naver.maps.MapTypeRegistry(); var map = new naver.maps.Map('map', { mapTypes: registry, mapTypeId: naver.maps.MapTypeId.SATELLITE }); map.mapTypes.set(naver.maps.MapTypeId.SATELLITE, naver.maps.NaverMapTypeOptions.getSatelliteMap()); map.mapTypes.set(naver.maps.MapTypeId.HYBRID, naver.maps.NaverMapTypeOptions.getHybridMap()); 신규 맵 타일 NaverStyleMapTypeOptions 사용 var registry = new naver.maps.MapTypeRegistry(); var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, mapTypes: registry, mapTypeId: naver.maps.MapTypeId.SATELLITE }); /* 변경점 */ map.mapTypes.set(naver.maps.MapTypeId.SATELLITE, naver.maps.NaverStyleMapTypeOptions.getSatelliteMap()); map.mapTypes.set(naver.maps.MapTypeId.HYBRID, naver.maps.NaverStyleMapTypeOptions.getHybridMap()); 기본 레이어 표시하기 기존 맵 타일 var cadastralLayer = new naver.maps.CadastralLayer(); var streetLayer = new naver.maps.StreetLayer(); var bicycleLayer = new naver.maps.BicycleLayer(); var trafficLayer = new naver.maps.TrafficLayer(); cadastralLayer.setMap(map); streetLayer.setMap(map); bicycleLayer.setMap(map); trafficLayer.setMap(map); 신규 맵 타일 레이어 생성 시 useStyleMap: true 을 설정합니다. /* 변경점 */ var cadastralLayer = new naver.maps.CadastralLayer({ useStyleMap: true }); var streetLayer = new naver.maps.StreetLayer({ useStyleMap: true }); var bicycleLayer = new naver.maps.BicycleLayer({ useStyleMap: true }); var trafficLayer = new naver.maps.TrafficLayer({ useStyleMap: true }); cadastralLayer.setMap(map); streetLayer.setMap(map); bicycleLayer.setMap(map); trafficLayer.setMap(map); Examples: 2-stylemap-cadastral.example 사용자 정의 레이어 만들기 기존 맵 타일 var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverMapTypeOptions.getVectorMap() }) }); var labelMapType = new naver.maps.NaverMapTypeOptions.getNormalLabelLayer(); var labelMapTypeRegistry = new naver.maps.MapTypeRegistry({ 'label': labelMapType }); var labelLayer = new naver.maps.Layer('label', labelMapTypeRegistry); labelLayer.setMap(map); 신규 맵 타일 NaverStyleMapTypeOptions 사용, init 이벤트 시점에 layer 설정 var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, center: new naver.maps.LatLng(37.3595704, 127.105399), mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverStyleMapTypeOptions.getVectorMap() }) }); /* 변경점 */ naver.maps.Event.once(map, 'init', function () { var labelMapType = new naver.maps.NaverStyleMapTypeOptions.getNormalLabelLayer(); var labelMapTypeRegistry = new naver.maps.MapTypeRegistry({ 'label': labelMapType }); var labelLayer = new naver.maps.Layer('label', labelMapTypeRegistry); labelLayer.setMap(map); }); Examples: 3-stylemap-custom.example 그리기 도구 서브 모듈 사용하기 기존 맵 타일 var map = new naver.maps.Map('map'); var drawingManager = new naver.maps.drawing.DrawingManager({map: map}); 신규 맵 타일 onJSContentLoaded 이벤트 핸들러 시점에 생성 var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true }); naver.maps.onJSContentLoaded = function() { var drawingManager = new naver.maps.drawing.DrawingManager({map: map}); }; 데이터 시각화 서브 모듈 사용하기 기존 맵 타일 var data = [ new naver.maps.LatLng(37.75,125.4), new naver.maps.LatLng(35.42,128.56), new naver.maps.LatLng(35.57,128.34), // (생략) new naver.maps.LatLng(36.30,125.9), new naver.maps.LatLng(35.80,128.2), new naver.maps.LatLng(38.70,127.9) ]; var heatmap = new naver.maps.visualization.HeatMap({ map: map, data: data }); 신규 맵 타일 onJSContentLoaded 이벤트 핸들러 시점에 생성 var data = [ new naver.maps.LatLng(37.75,125.4), new naver.maps.LatLng(35.42,128.56), new naver.maps.LatLng(35.57,128.34), // (생략) new naver.maps.LatLng(36.30,125.9), new naver.maps.LatLng(35.80,128.2), new naver.maps.LatLng(38.70,127.9) ]; /* 변경점 */ naver.maps.onJSContentLoaded = function() { var heatmap = new naver.maps.visualization.HeatMap({ map: map, data: data }); }; Examples: 4-stylemap-submodule-heatmap.example 사용자 정의 컨트롤 기존 맵 타일 var locationBtnHtml = '&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;'; var map = new naver.maps.Map('map', {zoom: 8}); //customControl 객체 이용하기 var customControl = new naver.maps.CustomControl(locationBtnHtml, { position: naver.maps.Position.TOP_LEFT }); customControl.setMap(map); var domEventListener = 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); var domEventListener = naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() { map.setCenter(new naver.maps.LatLng(37.3595953, 127.1553971)); }); 신규 맵 타일 init 이벤트 시점에 생성 var locationBtnHtml = '&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;'; var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, zoom: 13 }); /* 변경점 */ naver.maps.Event.once(map, 'init', function () { //customControl 객체 이용하기 var customControl = new naver.maps.CustomControl(locationBtnHtml, { position: naver.maps.Position.TOP_LEFT }); customControl.setMap(map); var domEventListener = 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); var domEventListener = naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() { map.setCenter(new naver.maps.LatLng(37.3595953, 127.1553971)); }); }); Examples: 6-stylemap-custom-control.example × Search results Close "},"tutorial-Panorama.html":{"id":"tutorial-Panorama.html","title":"Tutorial: 파노라마 생성 및 기본 동작","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 생성 및 기본 동작 파노라마 생성 및 기본 동작 파노라마 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 지정한 DOM 요소에 파노라마 이미지를 표시할 수 있는 뷰어를 삽입하여 거리뷰, 항공뷰 등의 서비스(이하 파노라마)를 제공할 수 있도록 합니다. 파노라마에 대한 다양한 예제는 파노라마 예제를 참고합니다. 서브 모듈 로드하기 파노라마를 사용하려면 파노라마 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다. 파노라마 서브 모듈을 사용하려면 NAVER 지도 API v3이 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama\"&gt;&lt;/script&gt; 파노라마 DOM 요소 지정하기 웹 페이지에 지도를 삽입할 DOM 요소를 지정합니다. 일반적으로 &lt;div&gt;&lt;/div&gt; 요소를 사용합니다. &lt;div id=\"pano\" style=\"width:100%;height:400px;\"&gt;&lt;/div&gt; 지도를 초기화할 때 PanoramaOptions의 size를 지정하지 않으면 초기화 시점의 지도 DOM 컨테이너의 크기로 지도 크기를 설정합니다. 이후 setSize 메서드를 이용해 지도 크기를 변경하기 전까지 지도 크기는 고정됩니다. 파노라마 옵션 설정하기 파노라마 옵션은 파노라마를 생성할 때 파노라마의 속성을 초기화하는 데 사용되며, 객체 리터럴로 만듭니다. 파노라마 옵션에 대한 자세한 설명은 PanoramaOptions 명세를 참고합니다. var panoramaOptions = { position: new naver.maps.LatLng(37.3599605, 127.1058814), size: new naver.maps.Size(800, 600), pov: { pan: -135, tilt: 29, fov: 100 } }; 파노라마 생성하기 Panorama 클래스는 파노라마를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. 파노라마를 표시하려면 파노라마 뷰어가 삽입될 DOM 요소 또는 DOM 요소의 id를 명시해야 합니다. var pano = new naver.maps.Panorama(document.getElementById(\"pano\"), { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); 또는 var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); 새 인스턴스를 만들 때 두 가지 인수를 전달합니다. 파노라마를 표현할 컨테이너 요소. 반드시 전달해야 합니다. 앞서 파노라마를 표현하기 위해 지정한 DOM 요소의 id 문자열을 직접 전달하거나, document.getElementById 메서드를 이용해 해당 DOM 요소의 참조를 전달할 수 있습니다. 파노라마의 속성을 초기화하는 데 이용하는 파노라마 옵션. 반드시 전달해야 합니다. panoId와 position 속성 중 하나는 반드시 설정해야 합니다. 파노라마 위치와 시야(POV) 파노라마 위치 PanoramaLocation 객체는 파노라마의 위치 정보를 나타냅니다. var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); naver.maps.Event.addListener(pano, \"pano_changed\", function() { console.log(\"PanoramaLocation\", pano.getLocation()); // panoId, title, address, coord, photodate }); 파노라마 시야(Pov) PanoramaPov 객체는 파노라마의 시야(POV, Point of View) 정보를 나타냅니다. var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); naver.maps.Event.addListener(pano, \"pov_changed\", function() { console.log(\"PanoramaPov\", pano.getPov()); // pan, tilt, fov }); 파노라마 이벤트 Panorama 객체는 상태 변경에 대한 알림 및 이벤트를 제공합니다. 상태 변경 알림 pano_changed: 파노라마 id가 변경되면 발생하는 이벤트입니다. 이 이벤트는 시야가 변경되었을 때는 발생하지 않습니다. 파노라마 id 또는 파노라마 위치가 변경되어 새로운 파노라마를 조회한 다음 파노라마 id가 변경되었을 때 발생합니다. pov_changed: 파노라마 시야가 변경되면 발생하는 이벤트입니다. 이 이벤트는 파노라마 id와 파노라마 위치가 변경되었을 때는 발생하지 않습니다. 이벤트 init: 파노라마 초기화를 끝내면 발생하는 이벤트입니다. 따라서 파노라마 위에 마커 등의 오버레이를 올리려면 이 이벤트가 발생한 다음에 수행해야 정상적으로 동작합니다. pano_status: 파노라마 조회를 끝내면 발생하는 이벤트입니다. 파노라마 조회를 정상적으로 마치면 OK 상태이며, 파노라마 조회를 비정상적으로 마치거나 파노라마가 없으면 ERROR 상태입니다. var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814), pov: { pan: -135, tilt: 29, fov: 100 }, visible: false }); naver.maps.Event.addListener(pano, \"init\", function() { pano.setVisible(true); }); naver.maps.Event.addListener(pano, \"pano_status\", function(status) { $(\"#pano_status_cell\").text(status + \", \" + pano.getPanoId()); }); naver.maps.Event.addListener(pano, \"pano_changed\", function() { $(\"#id_cell\").text(pano.getPanoId()); $(\"#position_cell\").text(pano.getPosition()); $(\"#roadname_cell\").text(pano.getLocation().title); $(\"#address_cell\").text(pano.getLocation().address); $(\"#photodate_cell\").text(pano.getLocation().photodate); }); naver.maps.Event.addListener(pano, \"pov_changed\", function() { $(\"#pan_cell\").text(pano.getPov().pan); $(\"#tilt_cell\").text(pano.getPov().tilt); $(\"#fov_cell\").text(pano.getPov().fov); $(\"#zoom_cell\").text(pano.getZoom()); $(\"#min_zoom_cell\").text(pano.getMinZoom()); $(\"#max_zoom_cell\").text(pano.getMaxZoom()); }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 파노라마 이벤트 처리하기 × Search results Close "},"tutorial-Projection.html":{"id":"tutorial-Projection.html","title":"Tutorial: 지도 투영과 좌표 체계","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 투영과 좌표 체계 지도 투영과 좌표 체계 지도 투영(Projection)은 둥근 지구를 평면으로 전개하는 것을 말하며, 투영법은 위/경도 좌표를 투영된 지도의 좌표로 옮기는 방법을 정의하고 있습니다. NAVER 지도 API v3은 투영과 관련된 두 가지 객체를 제공합니다. Projection: 지도 좌표계를 평면 좌표계로 변환하는 방법을 정의 MapSystemProjection: Projection 객체를 이용해 지도의 타일 배치, 좌표 변환, 두 좌표의 거리 계산 방법을 정의 NAVER 지도 API v3에서 기본적으로 제공하는 지도 유형(MapType)은 UTMK 투영법을 변조한 네이버 자체 투영법인 UTMK_NAVER를 사용합니다. 좌표 체계 NAVER 지도 API v3은 다음 3가지 좌표계를 사용합니다. 지도 좌표 (coord) - 실세계의 고유한 지점을 가리키는 좌표입니다. 일반적으로 위도와 경도로 표시하는 WGS84 표준을 사용합니다. 세계 좌표 (point) - API에서 지도 위의 고유한 한 점을 가리키는 좌표입니다. 화면 좌표 (offset) - 현재 지도 화면에서의 특정 지점에 해당하는 CSS 픽셀 좌표입니다. 이 좌표는 지도의 DOM 컨테이너에서의 오프셋으로, 각종 오버레이를 지도 위에 배치하는 데 사용합니다. 지도 좌표 지도 좌표(Map Coordinate)는 실세계에서 특정 위치를 가리키는 데 사용하는 좌표입니다. 일반적으로 위도와 경도로 표시하는 WGS84 표준을 사용하며, UTMK와 같은 다른 좌표계를 사용할 수도 있습니다. 지도 좌표는 위도와 경도를 정의하는 LatLng 클래스를 사용하거나, 다른 좌표계를 위해 Point 클래스를 사용하여 정의할 수 있습니다. 예를 들어, 다음과 같이 정의한 지도 좌표는 위도 37.5666805, 경도 126.9784147인 지점이며, 지리적으로는 서울 시청의 위치를 가리킵니다. new naver.maps.LatLng(37.5666805, 126.9784147) UTMK 투영법과 좌표계를 이용할 때는 서울 시청 지도 좌표를 다음과 같이 정의할 수 있습니다. new naver.maps.Point(953937.9, 1952051.9) 세계 좌표 세계 좌표(World Coordinate)는 NAVER 지도 API v3에서 지도 위의 고유한 한 점을 가리키는 데 사용하는 좌표입니다. NAVER 지도 API v3은 지도 좌표를 일정한 범위 내의 세계 좌표로 변환합니다. 예를 들어, 위도와 경도를 사용하는 WGS84 지도 좌표는 구면 좌표계이며, UTMK와 같은 좌표계는 평면 좌표계입니다. 이런 다양한 지도 좌표를 NAVER 지도 API v3이 이해할 수 있는 세계 좌표로 변환하여 지도를 실제 화면에 표시합니다. NAVER 지도 API v3은 지도 유형이 표시할 수 있는 최소 레벨에서 타일의 개수는 항상 1개라고 가정합니다. 세계 좌표는 이 타일 1개의 수평축 x와 수직축 y의 좌표를 정의하며, 좌표의 범위는 타일의 수평/수직축 크기 사이의 값입니다. 즉, 다음 그림과 같이 기본적인 256 x 256 크기의 타일을 사용하는 지도 유형에서는 세계 좌표의 값이 x축, y축 모두 0~256입니다. 그러나 다음 그림과 같이 256 x 64와 같은 비대칭형 크기의 타일을 사용하는 지도 유형에서는 세계 좌표의 값이 x축은 0~256이지만, y축은 0~64입니다. NAVER 지도 API v3은 현재 선택된 지도 유형의 tileSize 속성을 참조해 세계 좌표 범위를 MapSystemProjection이 자동으로 계산하도록 설계되었습니다. MapSystemProjection은 지도 유형에 설정된 투영 객체를 내부적으로 참조하고 있습니다. 따라서, 지도 유형에 설정하는 투영 객체는 세계 좌표의 범위를 x축과 y축 모두 0~1의 값으로 계산되도록 구현되어야 합니다. MapSystemProjection 인스턴스는 Map 객체의 getProjection 메서드를 이용해 접근할 수 있습니다. 지도 유형에 설정한 본래의 투영 객체는 Map 객체의 getPrimitiveProjection 메서드를 이용해 접근할 수 있습니다. 다음은 MapSystemProjection 인스턴스와 지도 유형의 투영 객체의 세계 좌표 변환을 보여줍니다. 이 예제의 결과를 살펴보면 본래의 투영 객체로 변환한 세계 좌표에서 타일 크기를 곱한 결과가 실제 API에서 사용하는 세계 좌표라는 것을 알 수 있습니다. map.getProjection() === map.getMapType().projection; // false map.getPrimitiveProjection() === map.getMapType().projection; // true var cityHall = new naver.maps.LatLng(37.5666805, 126.9784147); var systemWorldPoint = map.getProjection().fromCoordToPoint(cityHall); // 105.44749755859375, 163.32960205078126 var worldPoint = map.getPrimitiveProjection().fromCoordToPoint(cityHall); // 0.41190428733825685, 0.6380062580108643 systemWorldPoint.equals( worldPoint.mul(256, 256) ); // true 화면 좌표 화면 좌표(Offset Coordinate)는 NAVER 지도 API v3이 삽입한 지도 화면의 DOM 컨테이너에서의 오프셋입니다. 이 좌표는 픽셀 단위의 값을 나타내므로 각종 오버레이를 지도 위에 위치시키는 데 주로 사용합니다. 화면 좌표는 지도의 이동, 줌 레벨 변경 등으로 인한 DOM 컨테이너의 위치에 따라 변동될 수 있는 좌표이므로 어느 한 지점을 고유하게 가리키는 절대 좌표로 사용할 수는 없습니다. 다음은 화면 좌표를 이용해 사용자 컨텍스트 메뉴를 표시하는 코드입니다. var myMenu = document.createElement('div'); myMenu.style.position = 'absolute'; myMenu.style.zIndex = 10000; map.getPanes().overlayLayer.appendChild(myMenu); naver.maps.Event.addListener(map, 'rightclick', function(e) { var offset = e.offset; myMenu.style.left = offset.x +'px'; myMenu.style.top = offset.y +'px'; }); × Search results Close "},"tutorial-StyleMap-Custom-OverlayType.html":{"id":"tutorial-StyleMap-Custom-OverlayType.html","title":"Tutorial: 사용자 정의 OverlayType 설정","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 OverlayType 설정 사용자 정의 OverlayType 설정 사용자 타일 세부 유형 설정 하기 마침표(.)을 구분자로 원하는 세부 지도 유형을 조합할 수 있습니다. 세부 지도 유형 세부 지도 유형 (overlayType) 설명 bg 해당하는 지도 유형의 배경 표시 ol 실폭 도로, 실선 도로, 행정 경계, 공원 상세, 도로시설물, 시설, 역과 같이 세밀한 요소 표현 ts 지하철 노선도(sw), 버스 정류장(bs)과 같이 대중교통 관련 요소 표현 sw 지하철 노선도만 별도 표시하고 싶을 때 bs 버스 정류장만 별도 표시하고 싶을 때 pr 거리뷰, 항공뷰, 수중뷰와 같이 파노라마 촬영 위치 관련 요소 표현 br 자전거 관련 요소 표현 ar 등산로 관련 요소 표현 lp 지적편집도 표현 ctt 혼잡 교통정보 표현 lko 한국어 라벨 표현 일반 지도 배경 요청 var map = new naver.maps.Map('map', { zoom: 11, mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverStyleMapTypeOptions.getNormalMap( { overlayType: 'bg' } ) }) }); 실행결과 Examples: 사용자 정의 OverlayType 설정 예제 위성 지도 배경에 자전거 도로 요청 var map = new naver.maps.Map('map', { zoom: 11, mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverStyleMapTypeOptions.getSatelliteMap( { overlayType: 'bg.br' } ) }) }); 실행결과 일반 지도 배경에 실시간 혼잡 교통 정보 요청 var map = new naver.maps.Map('map', { zoom: 11, mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverStyleMapTypeOptions.getNormalMap( { overlayType: 'bg.ol.ts.ctt.lko' } ) }) }); 실행결과 × Search results Close "},"tutorial-UI-Event.html":{"id":"tutorial-UI-Event.html","title":"Tutorial: UI 이벤트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UI 이벤트 UI 이벤트 지도 UI 이벤트는 지도와 사용자의 상호작용으로 발생하는 이벤트입니다. NAVER 지도 API v3의 일부 객체는 다음과 같은 지도 UI 이벤트에 응답하도록 설계되었습니다. mousedown, mouseup, click, dblclick, rightclick, mouseover, mouseout, mousemove dragstart, drag, dragend touchstart, touchmove, touchend, pinchstart, pinch, pinchend, tap, longtap, twofingertap, doubletap 이 이벤트는 표준 DOM(Document Object Model) 이벤트처럼 보이나 실제로는 NAVER 지도 API v3의 이벤트입니다. 따라서 브라우저 간 특성차를 사용자가 별도로 처리할 필요 없이 DOM 이벤트를 수신하거나 응답할 수 있습니다. 이벤트 리스너 등록하기 이벤트 리스너를 등록하면 지도 UI 이벤트를 수신할 수 있습니다. addListener 메서드를 이용해 특정 객체에서 발생한 이벤트를 받아 핸들러를 실행하는 리스너를 등록합니다. 다음은 지도를 클릭했을 때 해당 위치를 console.log 메서드로 출력하는 예제입니다. var 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); }); 리스너를 등록하면 다음과 같이 MapEventListener 객체를 받습니다. MapEventListener = { eventName: String, listener: Function, listenerId: String, target:Object } MapEventListener 객체는 등록된 리스너의 정보를 담고 있는 객체로 등록된 리스너를 제거할 때 이용합니다. 이벤트 리스너 제거하기 이벤트 리스너를 등록 해제하면 더 이상 지도 UI 이벤트를 수신하지 않습니다. removeListener 메서드를 이용해 등록한 리스너를 제거합니다. 다음 예제는 마커에 등록한 리스너를 제거하는 예제입니다. var mapOptions = { zoom: 4, center: new naver.maps.LatLng(37.3614483, 127.1114883) }; var map = new naver.maps.Map('map', mapOptions); var markerOptions = { position: map.getCenter(), map: map }; var marker = new naver.maps.Marker(markerOptions); var listener = naver.maps.Event.addListener(marker, 'click', function() { map.setZoom(8); map.setCenter(marker.getPosition()); naver.maps.Event.removeListener(listener); }); 이벤트 인수에 접근하기 지도 UI 이벤트가 발생되면 NAVER 지도 API v3은 일반적으로 이벤트 인수를 전달하며, 등록한 리스너를 이용해 이벤트 인수에 접근할 수 있습니다 예를 들어, Map 객체는 click 이벤트 등 몇 가지 이벤트에 대해 PointerEvent 객체의 인수를 전달합니다. 다음은 지도를 클릭했을 때 해당 위치에 마커를 올리는 예제입니다. var mapOptions = { zoom: 4, center: new naver.maps.LatLng(37.3614483, 127.1114883) }; var map = new naver.maps.Map('map', mapOptions); var listener = naver.maps.Event.addListener(map, 'click', function(e) { var marker = new naver.maps.Marker({ position: e.coord, map: map }); }); +Examples: 이벤트 기본 예제 +Examples: 오버레이의 이벤트 × Search results Close "},"tutorial-Visualization.html":{"id":"tutorial-Visualization.html","title":"Tutorial: 데이터 시각화","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 데이터 시각화 데이터 시각화 시각화 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 지리 정보를 포함한 데이터를 쉽게 이해할 수 있도록 시각적으로 표현하는 클래스를 제공합니다. 클라이언트에서 데이터를 렌더링하므로 데이터가 많으면 성능이 저하될 수 있습니다. 다음은 지원하는 웹 브라우저 및 플랫폼 범위입니다. PC: Internet Explorer 9 이상, Chrome, Safari 5 이상, Firefox Mobile: Android 5 이상, iOS 9 이상 현재 제공하는 시각화 클래스는 다음과 같습니다. 열지도 점지도 시각화에 대한 다양한 예제는 시각화 예제를 참고합니다. 서브 모듈 로드하기 지리 정보를 포함한 데이터를 시각적으로 표현하려면 시각화 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다. 시각화 서브 모듈을 사용하려면 NAVER 지도 API v3이 이미 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=visualization\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=visualization\"&gt;&lt;/script&gt; 열지도 사용하기 열지도는 지리 정보를 포함한 데이터의 강도를 색상으로 표현하는 시각화 방식입니다. 기본적으로는 강도가 높은 영역은 붉은색으로, 강도가 낮은 영역은 파란색으로 표현됩니다. HeatMap 클래스는 열지도를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. 이때 열지도 속성을 초기화하는 데 열지도 옵션을 사용합니다. 객체 리터럴로 만들며 열지도 옵션에 대한 자세한 설명은 HeatMapOptions 명세를 참고합니다. var data = [ new naver.maps.LatLng(37.75,125.4), new naver.maps.LatLng(35.42,128.56), new naver.maps.LatLng(35.57,128.34), // (생략) new naver.maps.LatLng(36.30,125.9), new naver.maps.LatLng(35.80,128.2), new naver.maps.LatLng(38.70,127.9) ]; naver.maps.onJSContentLoaded = function() { var heatmap = new naver.maps.visualization.HeatMap({ map: map, data: data }); }; Examples: 열지도 시각화하기 점지도 사용하기 점지도는 지리 정보를 포함한 데이터의 위치를 하나의 점으로 표현하는 시각화 방식입니다. DotMap 클래스는 점지도를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. 이때 점지도 속성을 초기화하는 데 점지도 옵션을 사용합니다. 객체 리터럴로 만들며 점지도 옵션에 대한 자세한 설명은 DotMapOptions 명세를 참고합니다. var data = [ new naver.maps.LatLng(37.75,125.4), new naver.maps.LatLng(35.42,128.56), new naver.maps.LatLng(35.57,128.34), // (생략) new naver.maps.LatLng(36.30,125.9), new naver.maps.LatLng(35.80,128.2), new naver.maps.LatLng(38.70,127.9) ]; naver.maps.onJSContentLoaded = function() { var dotmap = new naver.maps.visualization.DotMap({ map: map, data: data }); }; Examples: 점지도 시각화하기 가중치 사용하기 WeightedLocation 클래스는 지리 정보뿐만 아니라 가중치가 있는 데이터를 시각적으로 표현하는 데 사용하는 클래스입니다. 데이터의 가중치는 최댓값과 최솟값을 기준으로 0~1로 정규화해 사용합니다. 시각화 서브 모듈은 내부적으로 모든 데이터를 WeightedLocation 인스턴스로 관리합니다. 데이터에 가중치가 없으면 기본값인 1을 사용합니다. 정규화된 가중치는 시각화 서브 모듈에서 제공하는 시각화 유형에 따라 아래와 같이 사용됩니다. HeatMap: 열지도에서 가중치는 점의 영향력 강도(세기)로 사용됩니다. 강도의 범위는 0.1~1입니다. 가중치가 없을 때 강도는 1입니다. DotMap: 점지도에서 가중치는 점의 반지름으로 사용됩니다. 반지름의 범위는 1~{사용자가 설정한 반지름}입니다. 가중치가 없을 때 반지름은 사용자가 설정한 반지름입니다. 지리 정보에 가중치가 있는 데이터를 생성하는 방법은 여러 가지가 있습니다. 아래와 같이 직접 new 연산자를 이용하여 새 인스턴스를 생성할 수 있습니다. var data = [ new naver.maps.visualization.WeightedLocation(36.95, 129.92, 3.1), // (생략) new naver.maps.visualization.WeightedLocation(33.36, 127.12, 2.1) ]; 또는 아래와 같이 리터럴 형태의 데이터를 이용할 수 있습니다. 이때에는 시각화 서브 모듈 내부적으로 WeightedLocation으로 변환합니다. var data = [ {\"weight\":2.0, \"location\": [126.58,36.90]}, // (생략) {\"weight\":2.9, \"location\": [127.12,33.36]} ]; // (또는) var data = [ {\"weight\":2.0, \"location\": new naver.maps.LatLng(36.90,126.58)}, // (생략) {\"weight\":2.9, \"location\": new naver.maps.LatLng(33.36,127.12)} ]; // (또는) var data = [ {\"weight\":2.0, \"location\": {\"lat\": 33.36, \"lng\": 127.12}}, // (생략) {\"weight\":2.9, \"location\": {\"lat\": 33.36, \"lng\": 127.12}} ]; Examples: 열지도 가중치 사용하기 Examples: 점지도 가중치 사용하기 × Search results Close "},"tutorial-1-control-simple.example.html":{"id":"tutorial-1-control-simple.example.html","title":"Example: 지도 컨트롤 추가/제거하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 컨트롤 추가/제거하기 지도 컨트롤 추가/제거하기 지도 줌 컨트롤 지도의 줌 컨트롤을 생성하는 예제입니다. × Search results Close "},"tutorial-2-control-options.example.html":{"id":"tutorial-2-control-options.example.html","title":"Example: 지도 컨트롤 스타일 설정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 컨트롤 스타일 설정하기 지도 컨트롤 스타일 설정하기 지도 줌 컨트롤 스타일 설정 지도의 줌 컨트롤 옵션을 이용하는 예제입니다. × Search results Close "},"tutorial-3-control-positioning.example.html":{"id":"tutorial-3-control-positioning.example.html","title":"Example: 지도 컨트롤 위치 설정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 컨트롤 위치 설정하기 지도 컨트롤 위치 설정하기 컨트롤 위치 설정하기 Position과 스타일(MapTypeControlStyle, ZoomControlStyle)을 이용하여 컨트롤의 위치와 스타일을 설정하는 예제입니다. × Search results Close "},"tutorial-4-control-custom-p1.example.html":{"id":"tutorial-4-control-custom-p1.example.html","title":"Example: 사용자 정의 컨트롤 만들기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 컨트롤 만들기 사용자 정의 컨트롤 만들기 사용자 정의 컨트롤 사용자 정의 컨트롤을 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-1-datalayer.example.html":{"id":"tutorial-1-datalayer.example.html","title":"Example: GeoJSON 데이터 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API GeoJSON 데이터 레이어 표시하기 GeoJSON 데이터 레이어 표시하기 GeoJSON 데이터 레이어 표시하기 GeoJSON 데이터를 지도에 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-2-datalayer-region.example.html":{"id":"tutorial-2-datalayer-region.example.html","title":"Example: 행정구역 GeoJSON 데이터 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 행정구역 GeoJSON 데이터 레이어 표시하기 행정구역 GeoJSON 데이터 레이어 표시하기 행정구역 GeoJSON 데이터 레이어 표시하기 행정구역 GeoJSON 데이터를 지도에 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-datalayer-kml.example.html":{"id":"tutorial-3-datalayer-kml.example.html","title":"Example: KML 데이터 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KML 데이터 레이어 표시하기 KML 데이터 레이어 표시하기 KML 데이터 레이어 표시하기 KML 데이터를 지도에 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-4-datalayer-gpx.example.html":{"id":"tutorial-4-datalayer-gpx.example.html","title":"Example: GPX 데이터 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API GPX 데이터 레이어 표시하기 GPX 데이터 레이어 표시하기 GPX 데이터 레이어 표시하기 GPX 데이터를 지도에 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-5-mantle-properties.example.html":{"id":"tutorial-5-mantle-properties.example.html","title":"Example: 데이터 레이어 autoStyle 활용","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 데이터 레이어 autoStyle 활용 데이터 레이어 autoStyle 활용 데이터 레이어 autoStyle 활용 예제입니다. autoStyle과 mantle-properties를 적용하여 스타일 적용하는 예제입니다. × Search results Close "},"tutorial-digest.example.html":{"id":"tutorial-digest.example.html","title":"Example: 예제 모아보기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 예제 모아보기 예제 모아보기 네이버 지도 API v3의 다양한 예제를 살펴보세요. #지도 지도 기본 예제 지도 옵션 조정하기 지도 유형 설정하기 지도 좌표 경계 확인하기 지도 이동하기 HTML5 Geolocation API 활용하기 전체 화면 지도와 미니 맵 지도 영역 제한하기 #지도 유형 지도의 타일 인덱스 그리드 지도 유형 이미지 타일 지도 유형 사용자 지도 유형 만들기 투영법과 타일의 크기를 동적으로 변경하기 두 가지의 지도 유형을 함께 사용하기 Starcraft The Hunters 지도 유형 NAVER 그린팩토리 지도 유형 캔버스 타일 지도 유형 #프로젝션 좌표를 픽셀로 변환하기 타일 INDEX 확인하기 #이벤트 이벤트 기본 예제 KVO 이벤트 오버레이의 이벤트 이벤트 테스트 #컨트롤 지도 컨트롤 추가/제거하기 지도 컨트롤 스타일 설정하기 지도 컨트롤 위치 설정하기 사용자 정의 컨트롤 만들기 #레이어 네이버 자전거 레이어 표시하기 사용자 정의 OverlayType 설정 예제 네이버 지적도 레이어 표시하기 네이버 실시간 교통상황 레이어 표시하기 네이버 거리뷰 레이어 표시하기 사용자 정의 레이어 만들기 #데이터 레이어 GeoJSON 데이터 레이어 표시하기 행정구역 GeoJSON 데이터 레이어 표시하기 KML 데이터 레이어 표시하기 GPX 데이터 레이어 표시하기 데이터 레이어 autoStyle 활용 #시각화 열지도 시각화하기 점지도 시각화하기 열지도 스펙트럼 변경하기 열지도 가중치 사용하기 점지도 가중치 사용하기 #오버레이 사용자 정의 오버레이 표시하기 #마커 마커 표시하기 이미지 아이콘 사용하기 스프라이트 이미지 아이콘 사용하기 HTML 아이콘 사용하기 심벌 아이콘 사용하기 이미지 아이콘 레티나 대응하기 스프라이트 이미지 아이콘 레티나 대응하기 클릭한 지점으로 마커 옮기기 애니메이션 마커 표시하기 마커 클러스터화하기 겹침 마커 처리하기 마커 인터랙션 영역 설정하기 보이는 지도 영역의 마커만 표시하기 다수의 마커에 이벤트 핸들러 사용하기 #정보 창 정보 창 표시하기 정보 창 옵션 사용하기 #도형 사각형, 원, 타원 그리기 폴리곤, 폴리라인 그리기 구멍 난 폴리곤 그리기 폴리곤 옵션 사용하기 폴리라인 옵션 사용하기 폴리라인에 화살표 표시하기 클릭한 지점 폴리곤 연결하기 클릭한 지점 폴리라인 연결하기 멀티 폴리라인 성능 테스트 폴리라인, 폴리곤의 거리/면적 재기 #지상 오버레이 지상 오버레이 표시하기 #파노라마 파노라마 기본 예제 파노라마 크기 변경하기 파노라마 이벤트 처리하기 파노라마 마커 표시하기 파노라마 요약 정보 레이어 표시하기 파노라마 줌 컨트롤 표시하기 거리/항공뷰 전환하기 지도에 항공뷰 아이콘 표시하기 지도와 파노라마 연동하기 #좌표-주소-변환 좌표계 변환하기 주소와 좌표 검색 API 사용하기 #그리기 도구 그리기 도구 기본 예제 그리기 도구 옵션 활용하기 오버레이 데이터 추출 및 복원하기 × Search results Close "},"tutorial-1-drawing-simple.example.html":{"id":"tutorial-1-drawing-simple.example.html","title":"Example: 그리기 도구 기본 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 그리기 도구 기본 예제 그리기 도구 기본 예제 그리기 도구 기본 예제 기본 옵션을 적용한 그리기 도구를 생성하는 예제입니다. 도형을 생성, 선택, 삭제 시 발생하는 이벤트가 왼쪽 아래에 표시됩니다. 그리기 아이콘이 선택된 상태에서 지도 위에 클릭합니다. - shift를 누르고 있는 경우 정방형/직교좌표로 스냅이 제공됩니다. - polygon, polyline: 마우스 오른쪽 버튼 클릭/Esc로 그리기 종료. 이동 그려진 도형을 클릭하여 편집 모드로 변경합니다. 그려진 도형을 드래그하여 이동합니다. 수정 그려진 도형을 클릭하여 편집 모드로 변경합니다. 그려진 도형의 제어점을 드래그하여 수정합니다. - polygon, polyline: 중간 제어점을 클릭하면 점을 추가합니다. 삭제 그려진 도형을 마우스 오른쪽 버튼으로 클릭해 삭제합니다. Occurred Events × Search results Close "},"tutorial-2-drawing-options.example.html":{"id":"tutorial-2-drawing-options.example.html","title":"Example: 그리기 도구 옵션 활용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 그리기 도구 옵션 활용하기 그리기 도구 옵션 활용하기 그리기 도구 모듈 옵션 활용하기 그리기 도구 모듈의 다양한 옵션을 활용하는 예제입니다. 위치 LEFT_TOP LEFT_CENTER LEFT_BOTTOM RIGHT_TOP RIGHT_CENTER RIGHT_BOTTOM TOP_LEFT TOP_CENTER TOP_RIGHT BOTTOM_LEFT BOTTOM_CENTER BOTTOM_RIGHT 스타일 horizontal vertical horizontal_2 vertical_2 아이콘 HAND RECTANGLE ELLIPSE POLYLINE ARROWLINE POLYGON MARKER 모두제거 모두추가 × Search results Close "},"tutorial-3-drawing-restore.example.html":{"id":"tutorial-3-drawing-restore.example.html","title":"Example: 오버레이 데이터 추출 및 복원하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 오버레이 데이터 추출 및 복원하기 오버레이 데이터 추출 및 복원하기 지리 형상 정보 추출 및 복원 예제 그리기 도구를 이용해 지도 위에 올린 오버레이의 지리 형상 정보를 추출하고, 추출한 GeoJSON 데이터를 데이터 레이어를 이용해 복원합니다. 그리기 도구를 이용해 지도 위에 오버레이를 그린 후, 추출 및 복원 버튼을 눌러 보세요. × Search results Close "},"tutorial-1-event-simple.example.html":{"id":"tutorial-1-event-simple.example.html","title":"Example: 이벤트 기본 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이벤트 기본 예제 이벤트 기본 예제 지도 이벤트 지도의 클릭 이벤트를 이용하는 예제입니다. 클릭 위치에 마커를 표시하고, 마우스 오른쪽 버튼을 클릭하면 정보 레이어를 표시합니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-2-event-kvo.example.html":{"id":"tutorial-2-event-kvo.example.html","title":"Example: KVO 이벤트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVO 이벤트 KVO 이벤트 KVO 이벤트 지도 객체의 KVO 이벤트를 이용하는 예제입니다. 지도의 줌 레벨을 변경하면 변경된 줌 레벨을 정보 창에 표시합니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-event-overlay.example.html":{"id":"tutorial-3-event-overlay.example.html","title":"Example: 오버레이의 이벤트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 오버레이의 이벤트 오버레이의 이벤트 오버레이 이벤트 오버레이 객체의 이벤트를 이용하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-4-event-test.example.html":{"id":"tutorial-4-event-test.example.html","title":"Example: 이벤트 테스트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이벤트 테스트 이벤트 테스트 이벤트 테스트 isTouchStarted true 이면 mousemove 시 drag (mouse) 가 발생하지 않습니다. draggable false 또는 pinching true 라면 swipe (touch) 가 발생하지 않습니다. pinchZoom false 또는 tilting true 라면 pinch 가 발생하지 않습니다. × Search results Close "},"tutorial-1-geocoder-transcoord.example.html":{"id":"tutorial-1-geocoder-transcoord.example.html","title":"Example: 좌표계 변환하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 좌표계 변환하기 좌표계 변환하기 좌표계 변환하기 Geocoder 서브 모듈의 TransCoord 객체를 사용한 좌표계 변환 예제입니다. × Search results Close "},"tutorial-3-geocoder-geocoding.example.html":{"id":"tutorial-3-geocoder-geocoding.example.html","title":"Example: 주소와 좌표 검색 API 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 주소와 좌표 검색 API 사용하기 주소와 좌표 검색 API 사용하기 주소와 좌표 검색 API 사용하기 Geocoder 서브 모듈의 Service 객체를 사용하여 주소로 좌표를 검색하거나(Geocode) 좌표로 주소를 검색하는(Reversegeocode) 예제입니다. 입력 창에 주소를 입력하여 검색하면 해당 주소의 좌표로 이동하며, 지도를 클릭하면 해당 지점의 경위도 좌표로 주소를 검색합니다. Geocode API의 자세한 응답값은 Geocode API를 참고하세요. Reversegeocode API의 자세한 응답값은 ReverseGeocode API를 참고하세요. × Search results Close "},"tutorial-1-bicycle.example.html":{"id":"tutorial-1-bicycle.example.html","title":"Example: 네이버 자전거 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 네이버 자전거 레이어 표시하기 네이버 자전거 레이어 표시하기 네이버 자전거 레이어 표시하기 네이버 자전거 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-14-stylemap-overlaytype.example.html":{"id":"tutorial-14-stylemap-overlaytype.example.html","title":"Example: 사용자 정의 OverlayType 설정 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 OverlayType 설정 예제 사용자 정의 OverlayType 설정 예제 사용자 정의 OverlayType 설정 예제 일반 지도 배경에 실시간 혼잡 교통 정보 요청 예제입니다. overlayType은 사용자 타일 세부 유형 설정 하기를 참고하세요. × Search results Close "},"tutorial-2-cadastral.example.html":{"id":"tutorial-2-cadastral.example.html","title":"Example: 네이버 지적도 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 네이버 지적도 레이어 표시하기 네이버 지적도 레이어 표시하기 네이버 지적도 레이어 표시하기 네이버 지적도 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-traffic.example.html":{"id":"tutorial-3-traffic.example.html","title":"Example: 네이버 실시간 교통상황 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 네이버 실시간 교통상황 레이어 표시하기 네이버 실시간 교통상황 레이어 표시하기 네이버 실시간 교통상황 레이어 표시하기 네이버 실시간 교통상황 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 자동 새로고침 × Search results Close "},"tutorial-4-street.example.html":{"id":"tutorial-4-street.example.html","title":"Example: 네이버 거리뷰 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 네이버 거리뷰 레이어 표시하기 네이버 거리뷰 레이어 표시하기 네이버 거리뷰 레이어 표시하기 네이버 거리뷰 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-5-custom.example.html":{"id":"tutorial-5-custom.example.html","title":"Example: 사용자 정의 레이어 만들기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 레이어 만들기 사용자 정의 레이어 만들기 사용자 정의 레이어 만들기 사용자 정의 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-1-map-simple.example.html":{"id":"tutorial-1-map-simple.example.html","title":"Example: 지도 기본 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 기본 예제 지도 기본 예제 간단한 지도 표시하기 지도를 생성하는 가장 기본적인 예제입니다. 지도 옵션을 설정하지 않으면 다음과 같이 서울 시청을 중심으로 하는 지도가 생성됩니다. × Search results Close "},"tutorial-2-map-options.example.html":{"id":"tutorial-2-map-options.example.html","title":"Example: 지도 옵션 조정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 옵션 조정하기 지도 옵션 조정하기 지도 옵션 조정하기 지도의 옵션(지도 인터랙션, 관성 드래깅, 타일 fadeIn 효과, 지도 컨트롤, 최소/최대 줌 레벨)을 설정, 해제하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 지도 초기화 시 지도의 인터랙션과 타일 fadeIn 효과는 기본적으로 활성화되어 있습니다. 지도 옵션에 대한 자세한 내용은 MapOptions를 참고하세요. × Search results Close "},"tutorial-3-map-types.example.html":{"id":"tutorial-3-map-types.example.html","title":"Example: 지도 유형 설정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 유형 설정하기 지도 유형 설정하기 지도 유형 설정하기 지도의 유형을 설정하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-4-map-bounds.example.html":{"id":"tutorial-4-map-bounds.example.html","title":"Example: 지도 좌표 경계 확인하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 좌표 경계 확인하기 지도 좌표 경계 확인하기 지도의 좌표 경계 확인하기 지도의 bounds 객체를 이용하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-5-map-moves.example.html":{"id":"tutorial-5-map-moves.example.html","title":"Example: 지도 이동하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 이동하기 지도 이동하기 지도 이동하기 지도를 이동하는 여러 가지 방법에 대한 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 지도 이동 메서드에 대한 자세한 내용은 Map을 참고하세요. × Search results Close "},"tutorial-6-map-geolocation.example.html":{"id":"tutorial-6-map-geolocation.example.html","title":"Example: HTML5 Geolocation API 활용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API HTML5 Geolocation API 활용하기 HTML5 Geolocation API 활용하기 Geolocation HTML5 API 활용하기 Geolocation HTML5 API를 통해 얻은 좌표로 지도를 이동하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. navigator.geolocation 은 Chrome 50 버젼 이후로 HTTP 환경에서 사용이 Deprecate 되어 HTTPS 환경에서만 사용 가능 합니다. http://localhost 에서는 사용이 가능하며, 테스트 목적으로, Chrome 의 바로가기를 만들어서 아래와 같이 설정하면 접속은 가능합니다. chrome.exe --unsafely-treat-insecure-origin-as-secure=\"http://example.com\" × Search results Close "},"tutorial-7-map-fullsize-minimap.example.html":{"id":"tutorial-7-map-fullsize-minimap.example.html","title":"Example: 전체 화면 지도와 미니 맵","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 전체 화면 지도와 미니 맵 전체 화면 지도와 미니 맵 전체 화면 지도와 미니 맵을 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 지도 초기화 시 `MapOptions`의 `size` 속성을 생략하면 지도의 크기가 DOM 요소의 HTML 렌더링 크기대로 자동으로 조정됩니다. 전체 화면으로 지도를 표시하는 예제이므로 새창으로 열기를 눌러서 확인할 수 있습니다. // size 옵션이 생략되면 map DOM 요소의 HTML 렌더링 크기로 자동으로 조정됩니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.5666805, 126.9784147), zoom: 13, minZoom: 6, mapTypeId: naver.maps.MapTypeId.HYBRID, zoomControl: true, zoomControlOptions: { position: naver.maps.Position.TOP_RIGHT }, mapDataControl: false, logoControlOptions: { position: naver.maps.Position.LEFT_BOTTOM }, disableKineticPan: false }); var semaphore = false; naver.maps.Event.once(map, 'init', function() { map.setOptions({ mapTypeControl: true, scaleControl: false, logoControl: false }); // 미니 맵이 들어갈 HTML 요소를 controls 객체에 추가합니다. 가장 오른쪽 아래에 위치하도록 다른 옵션들을 잠시 끕니다. map.controls[naver.maps.Position.BOTTOM_RIGHT].push($(\"#minimap\")[0]); map.setOptions({ scaleControl: true, logoControl: true, }); var minimap = new naver.maps.Map('minimap', { //미니 맵 지도를 생성합니다. bounds: map.getBounds(), scrollWheel: false, scaleControl: false, mapDataControl: false, logoControl: false }); naver.maps.Event.addListener(map, 'bounds_changed', function(bounds) { if (semaphore) return; minimap.fitBounds(bounds); }); naver.maps.Event.addListener(map, 'mapTypeId_changed', function(mapTypeId) { var toTypes = { \"normal\": \"hybrid\", \"terrain\": \"satellite\", \"satellite\": \"terrain\", \"hybrid\": \"normal\" }; minimap.setMapTypeId(toTypes[mapTypeId]); }); naver.maps.Event.addListener(minimap, 'drag', function() { semaphore = true; map.panTo(minimap.getCenter()); naver.maps.Event.once(map, 'idle', function() { semaphore = false; }); }); }); × Search results Close "},"tutorial-8-map-maxbounds.example.html":{"id":"tutorial-8-map-maxbounds.example.html","title":"Example: 지도 영역 제한하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 영역 제한하기 지도 영역 제한하기 minZoom, maxBounds 설정하기 minZoom과 maxBounds를 이용하여 지도 영역을 독도로 설정하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-1-maptypes-tilecheck.example.html":{"id":"tutorial-1-maptypes-tilecheck.example.html","title":"Example: 지도의 타일 인덱스 그리드 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도의 타일 인덱스 그리드 지도 유형 지도의 타일 인덱스 그리드 지도 유형 지도의 타일 인덱스 그리드 지도 유형 네이버 지도의 타일 그리드를 살펴볼 수 있는 예제입니다.(타일 그리드를 표시하기 위해 레이어를 사용합니다) 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-2-maptypes-imagemaptype.example.html":{"id":"tutorial-2-maptypes-imagemaptype.example.html","title":"Example: 이미지 타일 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이미지 타일 지도 유형 이미지 타일 지도 유형 이미지 타일 지도 유형 만들기 OSM의 이미지 타일을 이용해 지도를 생성하는 예제입니다. × Search results Close "},"tutorial-3-maptypes-basic.example.html":{"id":"tutorial-3-maptypes-basic.example.html","title":"Example: 사용자 지도 유형 만들기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 지도 유형 만들기 사용자 지도 유형 만들기 사용자 DOM 요소를 활용하는 지도 유형 만들기 사용자의 DOM 요소를 활용한 지도 유형 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-4-maptypes-dynamic.example.html":{"id":"tutorial-4-maptypes-dynamic.example.html","title":"Example: 투영법과 타일의 크기를 동적으로 변경하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 투영법과 타일의 크기를 동적으로 변경하기 투영법과 타일의 크기를 동적으로 변경하기 투영법과 타일 크기를 동적으로 변경하기 투영법과 타일 크기를 동적으로 변경하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 투영법 변경 (오른쪽 위 버튼 메뉴) 타일 크기 변경 64 x 64 128 x 128 256 x 256 512 x 512 256 x 128 256 x 64 × Search results Close "},"tutorial-5-maptypes-naver_osm.example.html":{"id":"tutorial-5-maptypes-naver_osm.example.html","title":"Example: 두 가지의 지도 유형을 함께 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 두 가지의 지도 유형을 함께 사용하기 두 가지의 지도 유형을 함께 사용하기 네이버 / OpenStreetMap 매시업 지도 다른 지도 유형을 함께 사용하는 예제입니다. 지도 화면이 한국 경계를 넘어 표시되는 경우 OSM 지도 유형이 표시됩니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-7-maptypes-the-hunters.example.html":{"id":"tutorial-7-maptypes-the-hunters.example.html","title":"Example: Starcraft The Hunters 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Starcraft The Hunters 지도 유형 Starcraft The Hunters 지도 유형 Starcraft The Hunters map MapType 인터페이스를 구현해 Starcraft The Hunters 지도 유형을 만드는 예제입니다. × Search results Close "},"tutorial-8-maptypes-greenfactory.example.html":{"id":"tutorial-8-maptypes-greenfactory.example.html","title":"Example: NAVER 그린팩토리 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API NAVER 그린팩토리 지도 유형 NAVER 그린팩토리 지도 유형 Naver Greenfactory map ImageMapType을 이용해 네이버 그린팩토리 실내 지도 유형을 만드는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-9-maptypes-canvasmaptype.example.html":{"id":"tutorial-9-maptypes-canvasmaptype.example.html","title":"Example: 캔버스 타일 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 캔버스 타일 지도 유형 캔버스 타일 지도 유형 캔버스 타일 지도 유형 만들기 캔버스 타일을 이용해 지도를 생성하는 예제입니다. × Search results Close "},"tutorial-1-infowindow-simple.example.html":{"id":"tutorial-1-infowindow-simple.example.html","title":"Example: 정보 창 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 정보 창 표시하기 정보 창 표시하기 정보 창 표시하기 마커에 정보 창을 표시하는 예제입니다. × Search results Close "},"tutorial-1-marker-simple.example.html":{"id":"tutorial-1-marker-simple.example.html","title":"Example: 마커 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 마커 표시하기 마커 표시하기 마커 표시하기 네이버 그린팩토리 위치에 기본 마커를 표시하는 예제입니다. × Search results Close "},"tutorial-1-shape-simple.example.html":{"id":"tutorial-1-shape-simple.example.html","title":"Example: 사각형, 원, 타원 그리기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사각형, 원, 타원 그리기 사각형, 원, 타원 그리기 사각형, 원, 타원 그리기 지도 위에 좌표를 기반으로 사각형, 원, 타원을 생성하는 예제입니다. × Search results Close "},"tutorial-3-marker-image-icon.example.html":{"id":"tutorial-3-marker-image-icon.example.html","title":"Example: 이미지 아이콘 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이미지 아이콘 사용하기 이미지 아이콘 사용하기 이미지 아이콘 사용하기 특정 이미지를 마커 아이콘으로 사용하는 예제입니다. × Search results Close "},"tutorial-3-polygon-simple.example.html":{"id":"tutorial-3-polygon-simple.example.html","title":"Example: 폴리곤, 폴리라인 그리기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리곤, 폴리라인 그리기 폴리곤, 폴리라인 그리기 폴리곤, 폴리라인 그리기 지도 위에 좌표를 기반으로 폴리곤과 폴리라인을 생성하는 예제입니다. × Search results Close "},"tutorial-4-marker-sprite-image-icon.example.html":{"id":"tutorial-4-marker-sprite-image-icon.example.html","title":"Example: 스프라이트 이미지 아이콘 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 스프라이트 이미지 아이콘 사용하기 스프라이트 이미지 아이콘 사용하기 스프라이트 이미지 아이콘 사용하기 하나의 이미지에 여러 모양의 아이콘을 합친 스프라이트 이미지를 마커 아이콘으로 사용하는 예제입니다. 마커에 마우스 포인터를 올리거나 마커 위에 있던 마우스 포인터를 다른 곳으로 이동하면 아이콘이 변경됩니다. × Search results Close "},"tutorial-4-polygon-hole.example.html":{"id":"tutorial-4-polygon-hole.example.html","title":"Example: 구멍 난 폴리곤 그리기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 구멍 난 폴리곤 그리기 구멍 난 폴리곤 그리기 구멍 난 폴리곤 그리기 구멍 난 폴리곤을 생성하는 예제입니다. × Search results Close "},"tutorial-5-marker-html-icon.example.html":{"id":"tutorial-5-marker-html-icon.example.html","title":"Example: HTML 아이콘 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API HTML 아이콘 사용하기 HTML 아이콘 사용하기 HTML 아이콘 사용하기 HTML 콘텐츠를 마커 아이콘으로 사용하는 예제입니다. × Search results Close "},"tutorial-5-polygon-options.example.html":{"id":"tutorial-5-polygon-options.example.html","title":"Example: 폴리곤 옵션 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리곤 옵션 사용하기 폴리곤 옵션 사용하기 폴리곤 옵션 사용하기 폴리곤에 마우스 포인터를 올리면 폴리곤의 선 스타일이 변경되는 예제입니다. × Search results Close "},"tutorial-6-marker-symbol-icon.example.html":{"id":"tutorial-6-marker-symbol-icon.example.html","title":"Example: 심벌 아이콘 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 심벌 아이콘 사용하기 심벌 아이콘 사용하기 심벌 아이콘 사용하기 폴리곤, 폴리라인을 마커 아이콘으로 사용하는 예제입니다. × Search results Close "},"tutorial-6-polyline-options.example.html":{"id":"tutorial-6-polyline-options.example.html","title":"Example: 폴리라인 옵션 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리라인 옵션 사용하기 폴리라인 옵션 사용하기 폴리라인 옵션 사용하기 폴리라인에 마우스 포인터를 올리면 폴리라인의 스타일이 변경되는 예제입니다. × Search results Close "},"tutorial-7-marker-retina.example.html":{"id":"tutorial-7-marker-retina.example.html","title":"Example: 이미지 아이콘 레티나 대응하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이미지 아이콘 레티나 대응하기 이미지 아이콘 레티나 대응하기 이미지 아이콘 레티나 대응하기 scaledSize 속성을 이용해 레티나 디스플레이에 대응하도록 마커의 이미지 아이콘 크기를 조절하는 예제입니다. × Search results Close "},"tutorial-8-marker-retina-sprite.example.html":{"id":"tutorial-8-marker-retina-sprite.example.html","title":"Example: 스프라이트 이미지 아이콘 레티나 대응하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 스프라이트 이미지 아이콘 레티나 대응하기 스프라이트 이미지 아이콘 레티나 대응하기 스프라이트 이미지 아이콘 레티나 대응하기 scaledSize 속성을 이용해 레티나 디스플레이에 대응하도록 마커의 스프라이트 이미지 아이콘 크기를 조절하는 예제입니다. × Search results Close "},"tutorial-9-marker-position.example.html":{"id":"tutorial-9-marker-position.example.html","title":"Example: 클릭한 지점으로 마커 옮기기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 클릭한 지점으로 마커 옮기기 클릭한 지점으로 마커 옮기기 클릭한 지점으로 마커 옮기기 마커의 setPosition 메서드를 이용해 마커의 위치를 설정하는 예제입니다. × Search results Close "},"tutorial-custom-overlay.example.html":{"id":"tutorial-custom-overlay.example.html","title":"Example: 사용자 정의 오버레이 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 오버레이 표시하기 사용자 정의 오버레이 표시하기 사용자 정의 오버레이 표시하기 사용자 정의 오버레이를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-ground-overlay.example.html":{"id":"tutorial-ground-overlay.example.html","title":"Example: 지상 오버레이 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지상 오버레이 표시하기 지상 오버레이 표시하기 지상 오버레이 표시하기 위도/경도 좌표에 연동된 이미지 오버레이를 생성하는 예제입니다. × Search results Close "},"tutorial-infowindow-options.example.html":{"id":"tutorial-infowindow-options.example.html","title":"Example: 정보 창 옵션 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 정보 창 옵션 사용하기 정보 창 옵션 사용하기 정보 창 옵션 사용하기 스타일 옵션을 지정해 정보 창의 모양을 설정하는 예제입니다. × Search results Close "},"tutorial-marker-animation.example.html":{"id":"tutorial-marker-animation.example.html","title":"Example: 애니메이션 마커 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 애니메이션 마커 표시하기 애니메이션 마커 표시하기 애니메이션 마커 표시하기 지도 위에서 움직이는 마커를 생성하는 예제입니다. × Search results Close "},"tutorial-marker-cluster.example.html":{"id":"tutorial-marker-cluster.example.html","title":"Example: 마커 클러스터화하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 마커 클러스터화하기 마커 클러스터화하기 마커 클러스터화하기 지도 위에 많은 마커가 표시될 때 마커를 그룹화하여 나타냅니다. 이 예제의 소스 코드는 GitHub 저장소에 공개되어 있습니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-marker-intersect.example.html":{"id":"tutorial-marker-intersect.example.html","title":"Example: 겹침 마커 처리하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 겹침 마커 처리하기 겹침 마커 처리하기 겹침 마커 처리하기 지도 위에 많은 마커가 표시될 때 겹쳐지는 마커를 판별하는 예제입니다. 이 예제의 소스 코드는 GitHub 저장소에 공개되어 있습니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-marker-shape.example.html":{"id":"tutorial-marker-shape.example.html","title":"Example: 마커 인터랙션 영역 설정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 마커 인터랙션 영역 설정하기 마커 인터랙션 영역 설정하기 마커 인터랙션 영역 설정하기 shape 속성을 이용해 마커의 사용자 인터랙션 영역(마우스, 터치 이벤트)을 정의하는 예제입니다. × Search results Close "},"tutorial-marker-viewport.example.html":{"id":"tutorial-marker-viewport.example.html","title":"Example: 보이는 지도 영역의 마커만 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 보이는 지도 영역의 마커만 표시하기 보이는 지도 영역의 마커만 표시하기 보이는 지도 영역의 마커만 표시하기 표시되지 않는 부분의 마커는 지도에서 제거하여 최적화하는 예제입니다. × Search results Close "},"tutorial-marker-viewportevents.example.html":{"id":"tutorial-marker-viewportevents.example.html","title":"Example: 다수의 마커에 이벤트 핸들러 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 다수의 마커에 이벤트 핸들러 사용하기 다수의 마커에 이벤트 핸들러 사용하기 다수의 마커에 이벤트 핸들러 사용하기 다수의 마커를 배열로 관리하고, 개별 마커에서 이벤트가 발생하면 적절한 데이터를 조회할 수 있도록 하는 예제입니다. 마커를 클릭하면 정보 창이 열립니다. × Search results Close "},"tutorial-pointing-icon.example.html":{"id":"tutorial-pointing-icon.example.html","title":"Example: 폴리라인에 화살표 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리라인에 화살표 표시하기 폴리라인에 화살표 표시하기 폴리라인의 시작/끝점에 아이콘을 표시하는 예제입니다 × Search results Close "},"tutorial-polygon-dynamic.example.html":{"id":"tutorial-polygon-dynamic.example.html","title":"Example: 클릭한 지점 폴리곤 연결하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 클릭한 지점 폴리곤 연결하기 클릭한 지점 폴리곤 연결하기 클릭한 지점 폴리곤으로 연결하기 지도에서 클릭한 지점을 폴리곤으로 연결하는 예제입니다. × Search results Close "},"tutorial-polyline-dynamic.example.html":{"id":"tutorial-polyline-dynamic.example.html","title":"Example: 클릭한 지점 폴리라인 연결하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 클릭한 지점 폴리라인 연결하기 클릭한 지점 폴리라인 연결하기 클릭한 지점 폴리라인으로 연결하기 지도에서 클릭한 지점을 폴리라인으로 연결하는 예제입니다. × Search results Close "},"tutorial-polyline-route.example.html":{"id":"tutorial-polyline-route.example.html","title":"Example: 멀티 폴리라인 성능 테스트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 멀티 폴리라인 성능 테스트 멀티 폴리라인 성능 테스트 폴리라인 성능 테스트 멀티 폴리라인 생성 테스트 단일 폴리라인으로 그리기 멀티 폴리라인으로 그리기 폴리라인 삭제 × Search results Close "},"tutorial-shape-measures.example.html":{"id":"tutorial-shape-measures.example.html","title":"Example: 폴리라인, 폴리곤의 거리/면적 재기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리라인, 폴리곤의 거리/면적 재기 폴리라인, 폴리곤의 거리/면적 재기 폴리라인, 폴리곤의 거리/면적 재기 폴리라인, 폴리곤의 거리와 면적을 재는 방법을 설명하기 위한 컴포넌트 개발 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-1-panorama-simple.example.html":{"id":"tutorial-1-panorama-simple.example.html","title":"Example: 파노라마 기본 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 기본 예제 파노라마 기본 예제 파노라마 기본 예제 기본 파노라마를 생성하는 예제입니다. × Search results Close "},"tutorial-2-panorama-resize.example.html":{"id":"tutorial-2-panorama-resize.example.html","title":"Example: 파노라마 크기 변경하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 크기 변경하기 파노라마 크기 변경하기 파노라마 크기 변경하기 파노라마의 크기를 동적으로 변경하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-panorama-event.example.html":{"id":"tutorial-3-panorama-event.example.html","title":"Example: 파노라마 이벤트 처리하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 이벤트 처리하기 파노라마 이벤트 처리하기 파노라마 이벤트 처리하기 파노라마의 이벤트를 이용하여 파노라마 객체의 속성을 살펴보는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. Pano ID Title Address Photodate POV Pan POV Tilt POV Fov Zoom Min Zoom Max Zoom Scale Min Scale Max Scale Pano Status × Search results Close "},"tutorial-4-panorama-image-marker.example.html":{"id":"tutorial-4-panorama-image-marker.example.html","title":"Example: 파노라마 마커 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 마커 표시하기 파노라마 마커 표시하기 파노라마 마커 표시하기 마커 위치로 파노라마 시야를 조정하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-5-panorama-html-infowindow.example.html":{"id":"tutorial-5-panorama-html-infowindow.example.html","title":"Example: 파노라마 요약 정보 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 요약 정보 레이어 표시하기 파노라마 요약 정보 레이어 표시하기 파노라마 요약 정보 레이어 표시하기 파노라마 위에 정보 창을 표시하는 예제입니다. × Search results Close "},"tutorial-6-panorama-zoomcontrol.example.html":{"id":"tutorial-6-panorama-zoomcontrol.example.html","title":"Example: 파노라마 줌 컨트롤 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 줌 컨트롤 표시하기 파노라마 줌 컨트롤 표시하기 파노라마 줌 컨트롤 표시하기 파노라마 위에 줌 컨트롤를 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-7-panorama-aroundcontrol.example.html":{"id":"tutorial-7-panorama-aroundcontrol.example.html","title":"Example: 거리/항공뷰 전환하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 거리/항공뷰 전환하기 거리/항공뷰 전환하기 거리/항공뷰 전환 컨트롤 옵션 거리뷰/항공뷰를 전환하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-8-panorama-flightspot.example.html":{"id":"tutorial-8-panorama-flightspot.example.html","title":"Example: 지도에 항공뷰 아이콘 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도에 항공뷰 아이콘 표시하기 지도에 항공뷰 아이콘 표시하기 지도에 항공뷰 아이콘 표시하기 네이버 지도에서 제공하는 항공뷰를 지도에 표시하는 예제입니다. 자세한 내용은 FlightSpot을 참고하세요. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-9-panorama-map.example.html":{"id":"tutorial-9-panorama-map.example.html","title":"Example: 지도와 파노라마 연동하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도와 파노라마 연동하기 지도와 파노라마 연동하기 파노라마 지도 연동 예제 파노라마와 지도를 연동하는 예제입니다. × Search results Close "},"tutorial-1-projection-coord-to-pixel.example.html":{"id":"tutorial-1-projection-coord-to-pixel.example.html","title":"Example: 좌표를 픽셀로 변환하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 좌표를 픽셀로 변환하기 좌표를 픽셀로 변환하기 좌표를 픽셀로 변환하여 Bounds를 설정하는 예제 프로젝션을 활용하여 좌표를 픽셀로 변환하여 Bounds 를 확대 / 축소하는 예제입니다. × Search results Close "},"tutorial-tile-index.example.html":{"id":"tutorial-tile-index.example.html","title":"Example: 타일 INDEX 확인하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 타일 INDEX 확인하기 타일 INDEX 확인하기 중심좌표의 타일 인덱스 확인하기 좌표를 타일 인덱스로 변환하는 예제입니다. × Search results Close "},"tutorial-1-visualization-heatmap.example.html":{"id":"tutorial-1-visualization-heatmap.example.html","title":"Example: 열지도 시각화하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 열지도 시각화하기 열지도 시각화하기 열지도 표시하기 열지도를 생성하는 가장 기본적인 예제입니다. 국내에서 지진이 발생한 지점을 나타냅니다. × Search results Close "},"tutorial-2-visualization-dotmap.example.html":{"id":"tutorial-2-visualization-dotmap.example.html","title":"Example: 점지도 시각화하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 점지도 시각화하기 점지도 시각화하기 점지도 표시하기 점지도를 생성하는 가장 기본적인 예제입니다. 국내에서 지진이 발생한 지점을 나타냅니다. × Search results Close "},"tutorial-3-visualization-spectrum.example.html":{"id":"tutorial-3-visualization-spectrum.example.html","title":"Example: 열지도 스펙트럼 변경하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 열지도 스펙트럼 변경하기 열지도 스펙트럼 변경하기 열지도 표시하기 열지도를 생성하는 가장 기본적인 예제입니다. × Search results Close "},"tutorial-4-visualization-heatmap-w.example.html":{"id":"tutorial-4-visualization-heatmap-w.example.html","title":"Example: 열지도 가중치 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 열지도 가중치 사용하기 열지도 가중치 사용하기 가중치 사용하기 가중치를 사용하는 예제입니다. 국내에서 지진이 발생한 지점을 나타내며, 지진의 규모를 가중치로 사용합니다. 열지도 예제와 비교해 보세요. × Search results Close "},"tutorial-5-visualization-dotmap-w.example.html":{"id":"tutorial-5-visualization-dotmap-w.example.html","title":"Example: 점지도 가중치 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 점지도 가중치 사용하기 점지도 가중치 사용하기 가중치 사용하기 가중치를 사용하는 예제입니다. 국내에서 지진이 발생한 지점을 나타내며, 지진의 규모를 가중치로 사용합니다. 점지도 예제와 비교해 보세요. × Search results Close "}}
+    {"global.html":{"id":"global.html","title":"Types","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Types Types Members OVERLAY_TYPE_ORDER_IN_HOUSE 정렬 순서는 Tile-Map-API 가이드에서 SubType (세부 지도 유형) 순서대로 정렬한다. https://oss.navercorp.com/Maps/tilemap/wiki/Tile-Map-API-%ED%98%B8%EC%B6%9C-%EA%B0%80%EC%9D%B4%EB%93%9C Methods isBuiltInMapType() StyleMap 에서 제공하는 기본 MapType 인지 여부 체크 기존 지도나 사내용은 별다른 제약없이 사용 하도록 처리 limitMaxBounds() 사외 버전은 지도 영역을 PC Web MaxBounds 로 제한하기 위한 코드 limitMinZoom() 사외 버전은 지도 영역을 PC Web MaxBounds 로 제한하기 위한 코드 Type Definitions any 모든 데이터 형식을 표현합니다. Type: any array 배열(Array) 객체를 표현합니다. Type: array ArrayOfBounds 지도 좌표 경계의 배열입니다. Type: Array.&lt;naver.maps.PointBounds&gt; | Array.&lt;naver.maps.LatLngBounds&gt; ArrayOfBoundsLiteral 지도 좌표 경계 리터럴의 배열입니다. Type: Array.&lt;PointBoundsLiteral&gt; | Array.&lt;LatLngBoundsLiteral&gt; ArrayOfCoords 지도 좌표의 배열입니다. Type: Array.&lt;naver.maps.Point&gt; | Array.&lt;naver.maps.LatLng&gt; ArrayOfCoordsLiteral 지도 좌표 리터럴의 배열입니다. Type: Array.&lt;PointLiteral&gt; | Array.&lt;LatLngLiteral&gt; boolean true 또는 false 값(Boolean)을 표현합니다. Bounds 지도 좌표 경계 객체입니다. Type: naver.maps.PointBounds | naver.maps.LatLngBounds BoundsLiteral 지도 좌표 경계 리터럴 객체입니다. new naver.maps.PointBounds나 new naver.maps.LatLngBounds를 대신하여 사용할 수 있습니다. Type: PointBoundsLiteral | LatLngBoundsLiteral Coord 지도 좌표 객체입니다. Type: naver.maps.Point | naver.maps.LatLng CoordLiteral 지도 좌표 리터럴 객체입니다. new naver.maps.Point나 new naver.maps.LatLng를 대신하여 사용할 수 있습니다. Type: PointLiteral | LatLngLiteral DOMEvent HTMLElement에서 발생하는 원시(native) 형태의 DOMEvent 객체입니다. Type: event DOMEventListener DOM에서 이벤트 알림을 받기 위해 리스너를 등록하면 반환되는 DOM 이벤트 리스너 객체입니다. Type: object Properties Name Type Description eventName string 등록된 이벤트의 이름입니다. listener function 등록된 이벤트의 핸들러입니다. target HTMLElement 이벤트가 등록된 대상 요소입니다. DrawingOverlay 그리기 도구 서브 모듈을 이용해 생성되는 오버레이 객체입니다. 그리기 도구 서브 모듈은 로드되는 경우 OverlayView를 확장하여 편집 가능한 오버레이 클래스를 구현합니다. 그리기 도구 서브 모듈을 로드하지 않은 경우 아래의 속성은 오버레이 객체 내에 존재하지 않습니다. Type: naver.maps.Rectangle | naver.maps.Ellipse | naver.maps.Polyline | naver.maps.Polygon | naver.maps.Marker Properties Name Type Description id string 헤당 오버레이의 id입니다. name string 해당 오버레이의 유형입니다. 'rectangle', 'ellipse' 등이 있습니다. setEditable function 오버레이의 editable 속성을 정의합니다. editable 속성이 참일 경우 편집 상태이고, 거짓일 경우 일반 상태입니다. setEditable 메서드의 인수로 editable 속성(boolean)과 controlPointOptions 속성(편집 제어점 속성)을 전달할 수 있습니다. 두 번째 인수인 controlPointOptions 속성을 생락한 경우 기본값으로 표시됩니다. Example // 그리기 도구 서브 모듈이 로드된 상태 var controlPointOptions = { anchorPointOptions: { radius: 6, fillColor: '#ff0000', strokeColor: '#0000ff', strokeWeight: 2 }, midPointOptions: { radius: 6, fillColor: '#ff0000', strokeColor: '#0000ff', strokeWeight: 2, fillOpacity: 0.5 } }; // 임의의 오버레이 overlay.setEditable(true, controlPointOptions); FitBoundsOptions CSS의 position을 나타내는 것과 같은 방식으로 특정 방향에 설정되는 안쪽 여백(margin)값을 나타냅니다. Type: object Properties Name Type Description top number 위 right number 오른쪽 bottom number 아래 left number 왼쪽 maxZoom number fitBounds 적용 시 허용되는 최대 줌 입니다. function() JavaScript 함수(Function)를 표현합니다. GeoJSON GeoJSON 객체는 지리 공간 데이터를 기반으로 지도 위에 점, 선, 도형 등을 표현하는 데이터 구조를 정의합니다. 이 타입의 객체는 Feature, FeatureCollection 또는 geometry로 표현할 수 있으며, 각 Feature에서 표현할 수 있는 geometry의 형태는 다음과 같습니다. Point LineString Polygon MultiPoint MultiLineString MultiPolygon GeometryCollection Feature는 geometry 객체와 부가적인 속성을 포함하며, FeatureCollection은 feature의 목록이라고 할 수 있습니다. Type: object Tutorials 데이터 레이어 See http://geojson.org/geojson-spec.html Example { \"type\": \"FeatureCollection\", \"features\": [ { \"type\": \"Feature\", \"geometry\": { \"type\": \"Point\", \"coordinates\": [102.0, 0.5] }, \"properties\": { \"prop0\": \"value0\" } }, { \"type\": \"Feature\", \"geometry\": { \"type\": \"LineString\", \"coordinates\": [ [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0] ] }, \"properties\": { \"prop0\": \"value0\", \"prop1\": 0.0 } }, { \"type\": \"Feature\", \"geometry\": { \"type\": \"Polygon\", \"coordinates\": [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] }, \"properties\": { \"prop0\": \"value0\", \"prop1\": {\"this\": \"that\"} } } ] } GPX GPX는 인터넷에서 GPS 데이터를 다양한 응용 프로그램과 웹 서비스 사이에서 교환하는 데 사용되는 파일 형식입니다. 현재 지원하는 요소는 다음과 같습니다. Line Paths (wpt, rte, trk) Line Styles (color, opacity, width, linecap, pattern) bounds, name, time, desc, cmt, type, sym Type: object Tutorials 데이터 레이어 See http://www.topografix.com/gpx.asp Example &lt;gpx creator=\"GPS Visualizer http://www.gpsvisualizer.com/\" version=\"1.0\"&gt; &lt;wpt lat=\"45.41000\" lon=\"-121.71349\"&gt; &lt;ele&gt;1777&lt;/ele&gt; &lt;name&gt;Wy'East Basin&lt;/name&gt; &lt;/wpt&gt; &lt;/gpx&gt; HTMLElement HTML DOM 노드를 표현합니다. Type: HTMLElement ImageData HTML Canvas 요소를 렌더링하는 데 사용될 이미지 데이터(ImageData)를 표현합니다. Type: ImageData KeyboardEvent 지도에서 키보드 이벤트 발생 시 전달되는 키보드 이벤트 객체입니다. Type: event Properties Name Type Description keyboardEvent DOMEvent 이벤트가 발생한 시점의 DOM 이벤트 객체입니다. KML KML(Keyhole Markup Language)은 Google 어스, Google 지도 및 Google 모바일 지도에서 지리 데이터를 표시하는 데 쓰이는 XML 기반의 마크업 언어 스키마입니다. 현재 지원하는 요소는 다음과 같습니다. Point, LineString, LinearRing, Polygon, MultiGeometry, gx:Track, gx:MultiTrack Style (LineStyle, PolyStyle) LatLonAltBox name, address, description, visibility Type: object Tutorials 데이터 레이어 See https://developers.google.com/kml/documentation/kml_tut?hl=ko Example &lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt; &lt;kml xmlns=\"http://www.opengis.net/kml/2.2\"&gt; &lt;Placemark&gt; &lt;name&gt;Simple placemark&lt;/name&gt; &lt;description&gt;Attached to the ground. Intelligently places itself at the height of the underlying terrain.&lt;/description&gt; &lt;Point&gt; &lt;coordinates&gt;-122.0822035425683,37.42228990140251,0&lt;/coordinates&gt; &lt;/Point&gt; &lt;/Placemark&gt; &lt;/kml&gt; KVOArrayOfCoords 지도 좌표의 KVO 배열입니다. Type: naver.maps.KVOArray.&lt;naver.maps.Point&gt; | naver.maps.KVOArray.&lt;naver.maps.LatLng&gt; LatLngBoundsLiteral 지도 좌표 경계 리터럴 객체입니다. new naver.maps.LatLngBounds를 대신하여 사용할 수 있습니다. Type: PointBoundsLiteral | LatLngBoundsObjectLiteral LatLngBoundsObjectLiteral north, east, south, west를 키로 사용하는 위경도 좌표 객체입니다. Type: object Properties Name Type Description north number 위도 최대 좌표입니다. east number 경도 최대 좌표입니다. south number 위도 최소 좌표입니다. west number 경도 최소 좌표입니다. Example var min = {x: 126.5322317, y: 33.3572421}, max = {x: 126.5364907, y: 33.3608829}; var bounds = {north: max.y, east: max.x, south: min.y, west: min.x}; LatLngLiteral 지도 좌표 리터럴 객체입니다. new naver.maps.LatLng를 대신하여 사용할 수 있습니다. Type: PointLiteral | LatLngObjectLiteral LatLngObjectLiteral lat, lng를 키로 사용하는 위경도 좌표 객체입니다. Type: object Properties Name Type Description lat number 위도 좌표입니다. lng number 경도 좌표입니다. Example var x = 126.5322317, y = 33.3572421; var coord = {lat: y, lng: x}; LayerRegistry 지도 레이어의 컬렉션을 포함하는 객체입니다. Type: naver.maps.KVO Properties Name Type Description getLayerNames function 등록된 모든 레이어의 이름을 배열로 반환합니다. MapEventListener NAVER 지도 API v3 내의 일부 객체에서 제공하는 마우스와 키보드, 터치, KVO(Key Value Observing) 상태 변경 등의 이벤트 알림을 받기 위해 리스너를 등록하면 반환되는 지도 이벤트 리스너 객체입니다. Type: object Properties Name Type Description eventName string 등록된 이벤트의 이름입니다. listener function 등록된 이벤트의 핸들러입니다. listenerId string 등록된 이벤트의 ID입니다. target object 이벤트가 등록된 대상 객체입니다. MapType 지도 유형 객체입니다. Type: naver.maps.ImageMapType | object margin CSS의 position을 나타내는 것과 같은 방식으로 특정 방향에 설정되는 안쪽 여백(margin)값을 나타냅니다. Type: object Properties Name Type Description top number 위 right number 오른쪽 bottom number 아래 left number 왼쪽 maxZoom number fitBounds 적용 시 허용되는 최대 줌 입니다. null null 값을 표현합니다. Type: null number 정수와 실수를 포함하는 숫자(Number)를 표현합니다. Type: number object JavaScript의 Object를 표현합니다. Type: object padding CSS의 position을 나타내는 것과 같은 방식으로 특정 방향에 설정되는 바깥쪽 여백(padding) 값을 나타냅니다. Type: object Properties Name Type Description top number 위 right number 오른쪽 bottom number 아래 left number 왼쪽 PointArrayLiteral x, y 순서대로 선언된 좌표 배열입니다. Type: array Examples var x = 126.5322317, y = 33.3572421; var coord = [x, y]; var coord = [10, 10]; PointBoundsArrayLiteral minX, minY, maxX, maxY 순서대로 선언된 좌표 경계의 배열입니다. Type: array Examples var min = [126.5322317, 33.3572421], max = [126.5364907, 33.3608829]; var bounds = [min[0], min[1], max[0], max[1]]; var min = [0, 0], max = [200, 200]; var bounds = [min[0], min[1], max[0], max[1]]; PointBoundsLiteral 지도 좌표 경계 리터럴 객체입니다. new naver.maps.PointBounds를 대신하여 사용할 수 있습니다. Type: PointBoundsArrayLiteral | PointBoundsObjectLiteral PointBoundsObjectLiteral minX, minY, maxX, maxY를 키로 사용하는 좌표 경계 객체입니다. Type: object Properties Name Type Description MinX number 최소 좌표의 x 좌표입니다. MinY number 최소 좌표의 y 좌표입니다. MaxX number 최대 좌표의 x 좌표입니다. MaxY number 최대 좌표의 y 좌표입니다. Example var min = [126.5322317, 33.3572421], max = [126.5364907, 33.3608829]; var bounds = {minX: min[0], minY: min[1], maxX: max[0], maxY:max[1]}; PointerEvent 지도와 오버레이에서 발생한 마우스 또는 터치 이벤트 발생 시 전달되는 포인터 이벤트 객체입니다. Type: event Properties Name Type Argument Description coord Coord 이벤트가 발생한 위치의 지도 좌표입니다. point naver.maps.Point 이벤트가 발생한 위치의 세계 좌표입니다. offset naver.maps.Point 이벤트가 발생한 위치의 픽셀 좌표입니다. pointerEvent DOMEvent 이벤트가 발생한 시점의 DOM 이벤트 객체입니다. overlay naver.maps.OverlayView &lt;optional&gt; 이벤트가 발생한 오버레이 객체입니다. PointLiteral 지도 좌표 리터럴 객체입니다. new naver.maps.Point를 대신하여 사용할 수 있습니다. Type: PointArrayLiteral | PointObjectLiteral PointObjectLiteral x, y를 키로 사용하는 좌표 객체입니다. Type: object Properties Name Type Description x number x 좌표입니다. y number y 좌표입니다. Examples var x = 126.5322317, y = 33.3572421; var coord = {x: x, y: y}; var coord = {x: 10, y: 10}; SizeArrayLiteral width, height 순서대로 선언된 크기 배열입니다. Type: array Example var width = 10, height = 5; var sizeArray = [width, height]; SizeLiteral 2차원 평면의 크기 리터럴입니다. new naver.maps.Size를 대신하여 사용할 수 있습니다. Type: SizeArrayLiteral | SizeObjectLiteral SizeObjectLiteral width, height를 키로 사용하는 크기 객체입니다. Type: object Properties Name Type Description width number 너비 height number 높이 Example var width = 10, height = 5; var SizeObjectLiteral = {width: width, height: height}; string 문자열(String)을 표현합니다. Type: string TransitionOptions 지도의 이동 효과에 사용할 옵션입니다. Type: object Properties Name Type Argument Default Description duration number &lt;optional&gt; 500 이동 효과가 실행되는 시간(ms)입니다. easing string &lt;optional&gt; \"easeOutCubic\" 이동 효과에 사용할 easing 방식입니다. linear, easeOutCubic, easeInCubic만 지원합니다. × Search results Close "},"modules.list.html":{"id":"modules.list.html","title":"Modules","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Modules Modules Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Classes Classes Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"namespaces.list.html":{"id":"namespaces.list.html","title":"Namespaces","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Namespaces Namespaces Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"mixins.list.html":{"id":"mixins.list.html","title":"Statics","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Statics Statics Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"interfaces.list.html":{"id":"interfaces.list.html","title":"Interfaces","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Interfaces Interfaces Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"tutorials.list.html":{"id":"tutorials.list.html","title":"Tutorials","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Tutorials Tutorials Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data DrawingManager Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer DotMap HeatMap WeightedLocation ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord SpectrumStyle Namespaces naver naver.maps naver.maps.drawing naver.maps.visualization Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"index.html":{"id":"index.html","title":"Index","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 기술문서 네이버 지도 API v3 NAVER 지도 API v3는 JavaScript 형태의 NAVER 지도 플랫폼으로써, 웹 서비스 또는 애플리케이션에 지도 기능을 구현할 수 있도록 다양한 클래스와 메서드를 제공합니다. NAVER 지도 API v3 NAVER 지도 API v3는 JavaScript 형태의 NAVER 지도 플랫폼으로써, 웹 서비스 또는 애플리케이션에 지도 기능을 구현할 수 있도록 다양한 클래스와 메서드를 제공합니다. 웹 브라우저 호환성 높은 성능을 위해 데스크톱과 모바일 환경에 최적화된 코드를 제공하고 있으며, 주요 웹 브라우저를 완벽하게 지원할 수 있도록 새롭게 만들었습니다. 코어 API 서브 모듈 API Visualization PC Internet Explorer 9 이상 Chrome Safari 5 이상 Firefox Mobile Android 5 이상 iOS 9 이상 시작하기 여러분의 지도를 만들어 보세요. 시작하기 &gt; 내 애플리케이션 등록하기 &gt; NAVER 지도 API v3 특징 알아보기 &gt; 예제 모아보기 &gt; 함께 사용할 수 있는 지도 API 다양한 데이터를 지도 서비스와 결합해 위치 기반 서비스를 만들어 보세요. 주소 -&gt; 좌표 변환 API 좌표 -&gt; 주소 변환 API StaticMap API 자세한 내용은 네이버 클라우드 플랫폼 가이드를 참고해 주세요. 문의하기 문의 사항이나 버그를 Question에 등록해 주세요. 빠르고 원활한 처리를 원하신다면 로그인 이후 문의 바랍니다. × Search results Close "},"module-drawing.html":{"id":"module-drawing.html","title":"Module: drawing","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API drawing Module: drawing 그리기 도구 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 아래와 같이 사용자가 지도에 폴리곤, 사각형, 폴리라인, 원, 마커를 그릴 수 있는 그래픽 인터페이스를 제공합니다. Tutorials 서브 모듈 시스템 그리기 도구 생성 및 기본 동작 Examples 그리기 도구 기본 예제 그리기 도구 옵션 활용하기 오버레이 데이터 추출 및 복원하기 Namespace naver.maps.drawing Classes naver.maps.drawing.DrawingManager Types DrawingOptions DrawingOverlay Enums naver.maps.drawing.DrawingMode naver.maps.drawing.DrawingStyle naver.maps.drawing.DrawingEvent × Search results Close "},"module-geocoder.html":{"id":"module-geocoder.html","title":"Module: geocoder","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API geocoder Module: geocoder Geocoder 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 좌표 체계 간 변환 메서드와 특정 좌표계를 지원하는 투영 객체들을 제공합니다. 요금 안내 Geocoding / Reverse Geocoding은 사용 편의를 위해 Web / Mobile SDK / REST API 등 다양한 형태로 제공되며, 제공 방식과 관계 없이 해당 기능을 이용할 경우 각 상품별 요금이 과금됩니다. 사전 준비 사항 Geocoding / Reverse Geocoding API를 사용하려면 클라이언트 아이디를 이용해서 인증해야 합니다. 클라이언트 아이디는 NAVER CLOUD PLATFORM Console에서 애플리케이션을 등록해 발급받습니다. 콘솔의 AI·Application Service &gt; AI·NAVER API &gt; Application에서 애플리케이션을 등록합니다. 자세한 방법 보기 AI·Application Service &gt; AI·NAVER API &gt; Application에서 등록한 애플리케이션을 선택해 Client ID와 Client Secret값을 확인합니다. AI·Application Service &gt; AI·NAVER API &gt; Application의 변경 화면에서 Geocoding이 선택되어 있는지 확인합니다. 선택되어 있지 않으면 429 오류(Quota Exceed)가 발생하니 주의하시기 바랍니다. AI·Application Service &gt; AI·NAVER API &gt; Application의 변경 화면에서 Reverse Geocoding이 선택되어 있는지 확인합니다. 선택되어 있지 않으면 429 오류(Quota Exceed)가 발생하니 주의하시기 바랍니다. Tutorials 서브 모듈 시스템 Geocoder를 활용한 좌표 변환 Geocoder를 활용한 주소와 좌표 검색 API 호출하기 Statics naver.maps.Service - 지도 API v3에서 서버 Open API를 호출하기 위한 속성 및 메서드를 제공합니다. naver.maps.TransCoord - 좌표 체계 간 변환 메서드를 제공합니다. naver.maps.EPSG3857Coord - EPSG3857 평면 좌표를 기본 좌표계로 사용하는 투영 객체입니다. naver.maps.UTMKCoord - UTMK 좌표를 기본 좌표계로 사용하는 투영 객체입니다. naver.maps.UTMK_NAVERCoord - NAVER 좌표를 기본 좌표계로 사용하는 투영 객체입니다. naver.maps.TM128 - 위/경도 좌표를 기본 좌표계로 사용하는 TM128 투영 객체입니다. naver.maps.TM128Coord - TM128 좌표를 기본 좌표계로 사용하는 투영 객체입니다. × Search results Close "},"module-panorama.html":{"id":"module-panorama.html","title":"Module: panorama","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API panorama Module: panorama 파노라마 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 지정한 DOM 요소에 파노라마 이미지를 표시할 수 있는 뷰어를 삽입하여 거리뷰, 항공뷰의 서비스(이하 파노라마)를 제공할 수 있도록 합니다. Tutorials 서브 모듈 시스템 파노라마 생성 및 기본 동작 Classes naver.maps.Panorama naver.maps.FlightSpot naver.maps.AroundControl Types PanoramaOptions PanoramaLocation PanoramaPov AroundControlOptions Interfaces PanoramaProjection × Search results Close "},"module-visualization.html":{"id":"module-visualization.html","title":"Module: visualization","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API visualization Module: visualization 시각화 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 위/경도 좌표가 있는 데이터를 시각화할 수 있도록 합니다. 클라이언트에서 데이터를 렌더링하므로 데이터가 많으면 성능이 저하될 수 있습니다. 다음은 지원하는 웹 브라우저 및 플랫폼 범위입니다. PC: Internet Explorer 9 이상, Chrome, Safari 5 이상, Firefox Mobile: Android 5 이상, iOS 9 이상 Tutorials 서브 모듈 시스템 데이터 시각화 Classes naver.maps.visualization.HeatMap naver.maps.visualization.DotMap naver.maps.visualization.WeightedLocation Types HeatMapOptions DotMapOptions SpectrumStyle × Search results Close "},"naver.html":{"id":"naver.html","title":"Namespace: naver","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API naver Namespace: naver naver 네이버 네임스페이스 Namespaces naver.maps × Search results Close "},"naver.maps.html":{"id":"naver.maps.html","title":"Namespace: naver.maps","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API maps Namespace: naver.maps naver. maps NAVER 지도 API v3의 모든 객체를 담는 네임스페이스입니다. Classes AroundControl BicycleLayer CadastralLayer CanvasMapType CanvasTile Circle CustomControl Data Ellipse Feature FlightSpot Geometry GroundOverlay ImageMapType ImageTile InfoWindow KVO KVOArray LabelLayer LatLng LatLngBounds Layer LogoControl Map MapDataControl MapTypeControl MapTypeRegistry Marker NaverMapTypeOptions NaverStyleMapTypeOptions OverlayView Panorama Point PointBounds Polygon Polyline Rectangle ScaleControl Size StreetLayer Tile TrafficLayer ZoomControl StaticObjects EPSG3857 EPSG3857Coord Event Service TM128 TM128Coord TransCoord UTMK UTMK_NAVER UTMK_NAVERCoord UTMKCoord Namespaces naver.maps.drawing naver.maps.visualization Members &lt;static, readonly&gt; Animation Animation 객체는 Marker의 애니메이션을 정의하는 속성을 나타냅니다. Type: number Properties Name Type Default Description BOUNCE number 1 마커를 튀깁니다. 이 애니메이션은 애니메이션을 중지할 때까지 지속됩니다. DROP number 2 마커를 지도 위쪽에서 떨어뜨립니다. 이 애니메이션은 한 번만 동작합니다. &lt;static, readonly&gt; jsContentLoaded NAVER 지도 API v3의 서브 모듈을 포함한 모든 JavaScript 콘텐츠의 로드 상태를 나타냅니다. 모든 콘텐츠를 로드하면 true로 설정됩니다. Type: boolean Default Value false &lt;static, readonly&gt; MapTypeId MapTypeId 객체는 NAVER 지도 유형의 id 컬렉션입니다. Type: object Properties Name Type Description NORMAL string 일반 지도 유형 id로 일반 이미지 지도를 보여주는 지도 유형입니다. TERRAIN string 지형도 유형 id로 지형의 높낮이를 함께 보여주는 지도 유형입니다. SATELLITE string 위성 지도 유형 id로 위성 이미지 지도를 보여주는 지도 유형입니다. HYBRID string 겹쳐보기 지도 유형 id로 위성 이미지 지도 위에 주요 도로와 주기를 함께 보여주는 지도 유형입니다. &lt;static&gt; onJSContentLoaded NAVER 지도 API v3의 서브 모듈을 포함한 모든 JavaScript 콘텐츠가 로드되었을 때 호출되는 이벤트 핸들러입니다. Type: function &lt;static, readonly&gt; PointingIcon PointingIcon 객체는 폴리라인의 끝 점의 강조 아이콘을 사전에 정의한 것입니다. Type: number Properties Name Type Default Description OPEN_ARROW number 1 한쪽이 열린 화살표입니다. BLOCK_ARROW number 2 모두 막힌 화살표입니다. CIRCLE number 3 원입니다. DIAMOND number 4 마름모입니다. &lt;static, readonly&gt; Position Position 객체는 요소의 위치 정보를 나타냅니다. 설정할 수 있는 위치는 아래와 같습니다. Type: number Properties Name Type Default Description CENTER number 0 요소를 중앙에 배치합니다. TOP_LEFT number 1 요소를 왼쪽 위에 배치합니다. 요소는 왼쪽 위에서 가운데를 향해 쌓입니다. TOP_CENTER number 2 요소를 위쪽 가운데에 배치합니다. TOP_RIGHT number 3 요소를 오른쪽 위에 배치합니다. 요소는 오른쪽 위에서 가운데를 향해 쌓입니다. LEFT_CENTER number 4 요소를 왼쪽 가운데에 배치합니다. LEFT_TOP number 5 요소를 왼쪽 위에 배치합니다. 요소는 왼쪽 위에서 아래를 향해 쌓입니다. LEFT_BOTTOM number 6 요소를 왼쪽 아래에 배치합니다. 요소는 왼쪽 아래에서 위를 향해 쌓입니다. RIGHT_TOP number 7 요소를 오른쪽 위에 배치합니다. 요소는 오른쪽 위에서 아래를 향해 쌓입니다. RIGHT_CENTER number 8 요소를 오른쪽 가운데에 배치합니다. RIGHT_BOTTOM number 9 요소를 오른쪽 아래에 배치합니다. 요소는 오른쪽 아래에서 위를 향해 쌓입니다. BOTTOM_LEFT number 10 요소를 왼쪽 아래에 배치합니다. 요소는 왼쪽 아래에서 가운데를 향해 쌓입니다. BOTTOM_CENTER number 11 요소를 아래쪽 가운데에 배치합니다. BOTTOM_RIGHT number 12 요소를 오른쪽 아래에 배치합니다. 요소는 오른쪽 아래에서 가운데를 향해 쌓입니다. &lt;static, readonly&gt; SymbolPath SymbolPath 객체는 SymbolIcon의 path를 사전에 정의한 것입니다. Type: number Properties Name Type Default Description BACKWARD_CLOSED_ARROW number 1 뒤쪽을 가리키며, 모두 막힌 화살표입니다. BACKWARD_OPEN_ARROW number 2 뒤쪽을 가리키며, 한쪽이 열린 화살표입니다. CIRCLE number 3 원입니다. FORWARD_CLOSED_ARROW number 4 앞쪽을 가리키며, 모두 막힌 화살표입니다. FORWARD_OPEN_ARROW number 5 앞쪽을 가리키며, 한쪽이 열린 화살표입니다. &lt;static, readonly&gt; SymbolStyle SymbolStyle객체는 SymbolIcon의 style을 사전에 정의한 것입니다. Type: string Properties Name Type Default Description CIRCLE string circle 원 아이콘을 생성하며, SymbolIcon의 radius 속성을 필수로 지정해야 합니다. PATH string path 폴리라인 아이콘을 생성하며, SymbolIcon의 path 속성을 필수로 지정해야 합니다. CLOSED_PATH string closedPath 폴리곤 아이콘을 생성하며, SymbolIcon의 path 속성을 필수로 지정해야 합니다. Type Definitions MapOptions MapOptions 객체는 지도를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description background string 지도 요소의 배경으로 사용할 이미지 URL 또는 CSS 색상값입니다. baseTileOpacity number 지도 기본 타일의 불투명도를 설정합니다. 값의 범위는 0~1이며, 기본값은 1입니다. bounds Bounds | BoundsLiteral null 지도의 초기 좌표 경계입니다. 이 값을 설정하면 지도 옵션 중 center와 zoom 옵션을 무시하고, 지정한 좌표 경계에 맞게 지도를 생성합니다. center Coord | CoordLiteral 서울시청 지도의 초기 중심 좌표입니다. 기본값은 서울 시청 좌표(37.5666103, 126.9783882)입니다. disableDoubleClickZoom boolean false 사용자가 지도 위에서 마우스 버튼을 더블 클릭해 지도를 확대하는 기능의 사용 여부입니다. disableDoubleTapZoom boolean false 사용자가 지도 위에서 한 손가락으로 더블 탭해 지도를 확대하는 기능의 사용 여부입니다. disableKineticPan boolean true 사용자가 지도를 드래그했을 때 관성 효과(사용자가 동작을 끝낸 후에도 계속되는 지도의 움직임)의 사용 여부입니다. disableTwoFingerTapZoom boolean false 사용자가 지도 위에서 두 손가락으로 두 번 탭해 지도를 축소하는 기능의 사용 여부입니다. draggable boolean true 마우스 또는 손가락을 이용한 지도 이동(패닝) 허용 여부입니다. keyboardShortcuts boolean true 키보드 방향 키를 이용한 지도 이동(패닝) 허용 여부입니다. logoControl boolean true NAVER 로고 컨트롤의 표시 여부입니다. (항상 노출로 변경) logoControlOptions LogoControlOptions NAVER 로고 컨트롤의 옵션입니다. mapDataControl boolean true 지도 데이터 저작권 컨트롤의 표시 여부입니다. mapDataControlOptions MapDataControlOptions 지도 데이터 저작권 컨트롤의 옵션입니다. mapTypeControl boolean false 지도 유형 컨트롤의 표시 여부입니다. mapTypeControlOptions MapTypeControlOptions 지도 유형 컨트롤의 옵션입니다. mapTypeId string NORMAL 지도의 초기 지도 유형 id입니다. mapTypes naver.maps.MapTypeRegistry 지도 유형의 컬렉션을 포함하는 객체입니다. 이 값을 설정하지 않으면 사전에 정의된 NAVER 지도의 기본 지도 유형으로 설정합니다. maxBounds Bounds | BoundsLiteral null 지도에서 보이는 최대 좌표 경계입니다. 지도의 중심 좌표는 지정한 최대 좌표 경계 내에서만 설정할 수 있습니다. maxZoom number 지도의 최대 줌 레벨입니다. 이 값을 설정하지 않으면 지정된 초기 지도 유형의 최고 줌 레벨로 설정합니다. minZoom number 지도의 최소 줌 레벨입니다. 이 값을 설정하지 않으면 지정된 초기 지도 유형의 최저 줌 레벨로 설정합니다. padding padding 지도 뷰포트의 안쪽 여백(패딩)입니다. 단위는 화면 픽셀이며, 기본값은 {top: 0, right: 0, bottom: 0, left: 0}입니다. pinchZoom boolean true 핀치 제스처를 이용한 지도 확대/축소 허용 여부입니다. resizeOrigin naver.maps.Position CENTER 지도 크기 조정 시 고정할 원점입니다. scaleControl boolean true 지도 축척 컨트롤의 표시 여부입니다. scaleControlOptions ScaleControlOptions 지도 축척 컨트롤의 옵션입니다. scrollWheel boolean true 마우스 스크롤 휠을 이용한 지도 확대/축소 허용 여부입니다. size naver.maps.Size | SizeLiteral 지도의 초기 크기입니다. 이 값을 설정하지 않으면, 지도 DOM 요소의 CSS 크기에 따라 지도 크기가 자동으로 조정됩니다. overlayZoomEffect null | string null 도형, 마커 등 오버레이의 줌 효과 적용 대상입니다. 적용할 대상의 창(pane) 이름을 문자열로 지정합니다. 이 값이 all이면 모든 오버레이에 줌 효과가 적용됩니다. 오버레이의 개수가 많을 때는 성능에 영향을 줄 수 있으므로 주의해서 사용해야 합니다. tileSpare number 0 지도의 크기보다 여유있게 로딩할 타일의 개수를 지정합니다. tileTransition boolean true 지도 타일을 전환할 때 페이드 인 효과(타일이 서서히 나타나는 것)의 사용 여부입니다. tileDuration number 지도 타일을 전환할 때 페이드 인 효과(타일이 서서히 나타나는 것)의 지속 시간 입니다. (밀리초), 기본값은 300~600ms입니다. zoom number 11 지도의 초기 줌 레벨입니다. zoomControl boolean false 줌 컨트롤의 표시 여부입니다. zoomControlOptions ZoomControlOptions 줌 컨트롤의 옵션입니다. zoomOrigin Coord | CoordLiteral null 줌 효과 시 고정하여 적용할 기준 좌표입니다. 해당 좌표가 현재 지도 화면 밖에 위치해 있으면 기본 기준 좌표를 적용합니다. blankTileImage null | string null 빈 타일 이미지 URL을 설정할 수 있는 옵션입니다. 기본값은 투명 gif 입니다. × Search results Close "},"naver.maps.AroundControl.html":{"id":"naver.maps.AroundControl.html","title":"Class: naver.maps.AroundControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API AroundControl Class: naver.maps.AroundControl naver.maps. AroundControl AroundControl 클래스는 거리뷰/항공뷰 전환 컨트롤을 정의하는 클래스입니다. 이 클래스는 panorama 서브 모듈을 로드해야 합니다. new naver.maps.AroundControl(AroundControlOptions) Parameters Name Type Description AroundControlOptions AroundControlOptions UI 컨트롤 옵션 Requires module:panorama Example var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814), aroundControl: true, aroundControlOptions: { position: naver.maps.Position.TOP_RIGHT } }); Extends naver.maps.CustomControl Requires module:panorama Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions AroundControlOptions AroundControlOptions 객체는 거리뷰/항공뷰 전환 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position TOP_RIGHT 거리뷰/항공뷰 전환 컨트롤을 배치할 위치입니다. Example var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814), size: new naver.maps.Size(800, 600), pov: { pan: -135, tilt: 29, fov: 100 }, aroundControl: true, aroundControlOptions: { position: naver.maps.Position.TOP_RIGHT } }); × Search results Close "},"naver.maps.BicycleLayer.html":{"id":"naver.maps.BicycleLayer.html","title":"Class: naver.maps.BicycleLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API BicycleLayer Class: naver.maps.BicycleLayer naver.maps. BicycleLayer BicycleLayer 클래스는 자전거 전용도로와 자전거 관련 오버레이를 하나의 지도 유형으로 나타내는 레이어를 정의합니다. new naver.maps.BicycleLayer(option) Parameters Name Type Argument Description option BicycleLayerOptions &lt;optional&gt; 레이어 옵션 (Deprecated) Properties Name Type Description name string 레이어 이름입니다. 이 레이어의 이름은 bicycle입니다. Tutorials 레이어 Extends naver.maps.LabelLayer Methods getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity Type Definitions BicycleLayerOptions BicycleLayerOptions 객체는 BicycleLayer를 정의하는 옵션을 나타냅니다. (Deprecated) Type: object Properties Name Type Default Description overlayMap boolean true 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. zIndex number 3 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. × Search results Close "},"naver.maps.CadastralLayer.html":{"id":"naver.maps.CadastralLayer.html","title":"Class: naver.maps.CadastralLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API CadastralLayer Class: naver.maps.CadastralLayer naver.maps. CadastralLayer CadastralLayer 클래스는 토지 경계와 지번, 지목 등의 오버레이를 하나의 지도 유형으로 나타내는 레이어를 정의합니다. new naver.maps.CadastralLayer(option) Parameters Name Type Argument Description option CadastralLayerOptions &lt;optional&gt; 레이어 옵션 (Deprecated) Properties Name Type Description name string 레이어 이름입니다. 이 레이어의 이름은 cadastral입니다. Tutorials 레이어 Extends naver.maps.LabelLayer Methods getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity Type Definitions CadastralLayerOptions CadastralLayerOptions 객체는 CadastralLayer를 정의하는 옵션을 나타냅니다. (Deprecated) Type: object Properties Name Type Default Description overlayMap boolean true 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. zIndex number 1 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. × Search results Close "},"naver.maps.CanvasMapType.html":{"id":"naver.maps.CanvasMapType.html","title":"Class: naver.maps.CanvasMapType","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API CanvasMapType Class: naver.maps.CanvasMapType naver.maps. CanvasMapType CanvasMapType 클래스는 캔버스 픽셀 데이터를 렌더링할 수 있는 캔버스 지도 유형을 정의하는 데 필요한 MapType 인터페이스를 정의합니다. new naver.maps.CanvasMapType(canvasMapTypeOptions) Parameters Name Type Description canvasMapTypeOptions CanvasMapTypeOptions 캔버스 타일 지도 유형 옵션 Implements naver.maps.MapType Tutorials 지도 유형 Methods getMapTypeOptions() 캔버스 타일 지도 유형의 옵션을 반환합니다. Returns Type Description CanvasMapTypeOptions 이미지 타일 지도 유형 옵션 getMaxZoom() 지도 유형의 최대 줌 레벨을 반환합니다. Returns Type Description number 최대 줌 레벨 getMinZoom() 지도 유형의 최소 줌 레벨을 반환합니다. Returns Type Description number 최소 줌 레벨 getName() 지도 유형의 이름을 반환합니다. Returns Type Description string 지도 유형의 이름 getTile(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 CanvasTile 객체를 반환합니다. 새로운 타일이 필요할 때마다 이 메서드를 호출합니다. 이때, 이 메서드는 getTileData 메서드를 호출합니다. Parameters Name Type Description x number x축의 인덱스 y number y축의 인덱스 z number 줌 레벨 Implements naver.maps.MapType#getTile Returns Type Description naver.maps.CanvasTile 캔버스 타일 객체 getTileData(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 캔버스의 픽셀 데이터를 반환합니다. 새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때, getTile 메서드를 이용해 이 메서드를 호출합니다. Parameters Name Type Description x number x축의 인덱스 y number y축의 인덱스 z number 줌 레벨 Returns Type Description ImageData 요소 영역의 픽셀 데이터 setMapTypeOptions(canvasMapTypeOptions) 캔버스 타일 지도 유형의 옵션을 설정합니다. Parameters Name Type Description canvasMapTypeOptions CanvasMapTypeOptions 캔버스 타일 지도 유형 옵션 Type Definitions CanvasMapTypeOptions CanvasMapTypeOptions 객체는 CanvasMapType을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description name string 지도 유형 컨트롤 등에서 표시할 지도 유형의 이름입니다. maxZoom number 지도 유형의 최대 줌 레벨입니다. minZoom number 지도 유형의 최소 줌 레벨입니다. projection naver.maps.Projection 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. tileSize naver.maps.Size | SizeLiteral &lt;optional&gt; (256,256) 지도 유형의 타일 크기입니다. tileDuration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간 (밀리초 단위) repeatX boolean &lt;optional&gt; false 현재 줌 레벨에서 표현할 수 있는 타일 인덱스의 영역을 벗어나면 수평축으로 타일을 반복할 것인지 여부입니다. 세계 지도 투영을 사용하는 이미지 타일 지도 유형에서 사용하기에 적합합니다. vendor string &lt;optional&gt; 지도 유형의 제작자 이름입니다. provider MapDataProvider &lt;optional&gt; 지도 유형의 데이터 제공자 정보입니다. uid string &lt;optional&gt; 지도 유형을 유일하게 구분할 수 있는 id를 지정할 수 있습니다. darktheme boolean &lt;optional&gt; false 지도 유형이 전체적으로 어두운 픽셀 데이터를 사용하는지를 지정합니다. 이 값이 true이면 지도 위 텍스트를 표시하는 기본 컨트롤의 텍스트 색상이 흰색으로 표시됩니다. getTileData function &lt;optional&gt; 전달된 타일의 인덱스와 줌 레벨에 해당하는 캔버스의 픽셀 데이터를 반환합니다. 새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때마다 이 메서드를 호출합니다. Example var CanvasMapTypeOptions = { minZoom: 0, maxZoom: 22, projection: naver.maps.EPSG3857, name: '세계 지도', tileSize: new naver.maps.Size(256, 256), repeatX: true, vendor: 'MyCorp.', provider: [{ title: \"내 지도 ver 1.0\" }, { title: \"OpenStreetMap\", link: \"http://www.openstreetmap.org/copyright\" }, { title: \"/인천광역시\", bounds: new naver.maps.LatLngBounds( new naver.maps.LatLng(36.915887, 125.690716), new naver.maps.LatLng(37.687529, 126.853252)) }], getTileData: function(x, y, z) { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); ... (생략) ... canvas.width = w; canvas.height = h; ... (생략) ... var imageData = ctx.getImageData(0, 0, w, h); return imageData.data; } }; var CanvasMapType = new naver.maps.CanvasMapType(canvasMapTypeOptions); MapDataProvider MapDataProvider 객체는 등록한 지도 유형의 데이터 제공자 정보를 나타냅니다. Type: object Properties Name Type Description title string 표시될 텍스트의 내용입니다. 빈 칸/Unicode 모두 허용하나, HTML Entity는 변환되지 않습니다. link string 표시될 텍스트를 클릭했을 때 이동할 주소입니다. 이 값이 없으면 클릭할 수 없는 요소로 생성됩니다. bounds Bounds | BoundsLiteral | ArrayOfBounds | ArrayOfBoundsLiteral 해당 텍스트를 표시할 좌표 경계입니다. 지도 화면에 해당 좌표 경계가 들어오면 텍스트를 표시합니다. 이 값이 없으면 항상 텍스트를 표시합니다. Example var mapTypeOptions = { //... provider: [{ title: \" 국토교통부\", }, { title: \",OpenStreetMap\", link: \"http://www.openstreetmap.org/copyright\" }, { title: \",Natural Earth\", link: \"http://www.naturalearthdata.com/\", bounds: NLatLngBounds( NLatLng(36.915887, 125.690716), NLatLng(37.687529, 126.853252)) }, { title: \" \\u2573 \\xa9 UNICODE ALSO OK\", bounds: [ NLatLngBounds( NLatLng(36.9604682, 126.7654746), NLatLng(38.1834428, 127.8062689)), // 서울,경기 NLatLngBounds( NLatLng(33.1940984, 126.1631646), NLatLng(33.5666617, 126.9448023)) // 제주 ] }] }; × Search results Close "},"naver.maps.CanvasTile.html":{"id":"naver.maps.CanvasTile.html","title":"Class: naver.maps.CanvasTile","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API CanvasTile Class: naver.maps.CanvasTile naver.maps. CanvasTile CanvasTile 클래스는 한 장의 HTML5 캔버스 타일을 정의합니다. new naver.maps.CanvasTile(canvasTileOptions) Parameters Name Type Argument Description canvasTileOptions CanvasTileOptions &lt;optional&gt; 캔버스 타일의 옵션 Extends naver.maps.Tile Methods appendTo(parentNode) 지정한 parentNode에 타일 HTML 요소를 추가합니다. Parameters Name Type Description parentNode HTMLElement 타일이 추가될 HTML 요소 Inherited From naver.maps.Tile#appendTo cancelFadeIn() 진행 중인 페이드 인(타일이 서서히 나타나는) 효과를 즉시 중지하고, 본래의 불투명도를 설정합니다. Inherited From naver.maps.Tile#cancelFadeIn destroy() 캔버스 타일 객체를 완전히 삭제합니다. Overrides naver.maps.Tile#destroy fadeIn(callback, startOpacity) 페이드 인(타일이 서서히 나타나는) 효과를 실행합니다. Parameters Name Type Argument Default Description callback function 페이드 인 효과가 완료되었을 때 실행할 콜백 함수입니다. startOpacity number &lt;optional&gt; 0 페이드 인 효과의 시작 불투명도입니다. Inherited From naver.maps.Tile#fadeIn getDuration() 타일의 fadeIn 효과 지속시간을 반환합니다. Inherited From naver.maps.Tile#getDuration Returns Type Description number 타일의 fadeIn animation duration getElement() 타일의 HTML 요소를 반환합니다. Inherited From naver.maps.Tile#getElement Returns Type Description HTMLElement 타일의 HTML 요소 getOffset() 타일의 오프셋(위치)을 반환합니다. Inherited From naver.maps.Tile#getOffset Returns Type Description naver.maps.Point 타일의 오프셋 getOpacity() 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Tile#getOpacity Returns Type Description number 0~1 사이의 실수. getSize() 타일의 크기를 반환합니다. Inherited From naver.maps.Tile#getSize Returns Type Description naver.maps.Size 타일의 크기 getTileIndex() 타일 인덱스를 반환합니다. Inherited From naver.maps.Tile#getTileIndex Returns Type Description TileIndex 타일 인덱스 getZIndex() 타일의 쌓임 순서를 반환합니다. Inherited From naver.maps.Tile#getZIndex Returns Type Description number 타일의 쌓임 순서 hide() 타일을 숨깁니다. Inherited From naver.maps.Tile#hide load(canvasTileOptions) 캔버스 타일을 불러옵니다. Parameters Name Type Argument Description canvasTileOptions CanvasTileOptions &lt;optional&gt; 캔버스 타일의 옵션 Overrides naver.maps.Tile#load remove() 캔버스 타일의 HTML Canvas 요소를 지도에서 삭제합니다. Overrides naver.maps.Tile#remove reset(mapType, zoom, canvasTileOptions) 지정한 mapType에 맞게 타일을 재설정합니다. Parameters Name Type Argument Description mapType naver.maps.CanvasMapType 재설정할 캔버스 지도 유형 zoom number 타일 재설정 시 적용할 지도의 줌 레벨 canvasTileOptions CanvasTileOptions &lt;optional&gt; 이미지 타일의 옵션 Overrides naver.maps.Tile#reset setBlank() 캔버스 타일의 이미지 데이터를 모두 지우고 투명한 공백 타일로 설정합니다. Overrides naver.maps.Tile#setBlank setDuration(duration) 타일의 fadeIn 효과 지속시간을 설정합니다. 단위는 밀리초 (millisecond), 기본값은 300~600ms 입니다. Parameters Name Type Description duration number 타일의 fadeIn animation duration Inherited From naver.maps.Tile#setDuration setOffset(offset) 타일이 표시될 오프셋(위치)을 지정합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#setOffset Overrides naver.maps.Tile#setOffset setOpacity(opacity) 타일의 불투명도를 지정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도 0~1 사이의 실수. Inherited From naver.maps.Tile#setOpacity setSize(size) 타일의 크기를 설정합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#setSize setTileIndex(tileIndex) 타일 인덱스를 설정합니다. Parameters Name Type Description tileIndex TileIndex 타일 인덱스 Inherited From naver.maps.Tile#setTileIndex setZIndex(zIndex) 타일의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#setZIndex show() 타일을 보이게 합니다. Inherited From naver.maps.Tile#show Type Definitions CanvasTileOptions CanvasTileOptions 객체는 naver.maps.CanvasTile을 정의하는 데 필요한 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description imageData ImageData &lt;optional&gt; 캔버스 타일에 렌더링할 이미지 데이터 opacity number &lt;optional&gt; 1 타일의 불투명도 transition boolean &lt;optional&gt; true 타일 로드 시 fadeIn 효과의 사용 여부입니다. duration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간입니다. (밀리초 단위) offset naver.maps.Point &lt;optional&gt; 타일의 오프셋입니다. zIndex number &lt;optional&gt; 0 타일의 쌓임 순서입니다. size naver.maps.Size &lt;optional&gt; 타일의 크기입니다. pane HTMLElement &lt;optional&gt; 타일이 추가될 HTML 요소입니다. Events imageData_changed 캔버스 타일의 이미지 데이터가 변경되면 이벤트가 발생합니다. Parameters Name Type Description imageData ImageData 캔버스 타일의 이미지 데이터 loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed × Search results Close "},"naver.maps.Circle.html":{"id":"naver.maps.Circle.html","title":"Class: naver.maps.Circle","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Circle Class: naver.maps.Circle naver.maps. Circle Circle 클래스는 원 모양의 폴리곤을 정의합니다. new naver.maps.Circle(options) Parameters Name Type Argument Description options CircleOptions &lt;optional&gt; 도형 옵션 Tutorials 도형 Extends naver.maps.OverlayView Methods getAreaSize() 도형의 전체 면적을 제곱미터 단위로 반환합니다. Returns Type Description number 면적 getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getCenter() 원의 중심점 좌표를 반환합니다. Returns Type Description Coord 중심점 좌표 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description CircleOptions | any 도형 옵션 getRadius() 원의 반경을 반환합니다. 단위는 미터입니다. Returns Type Description number 원의 반경 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description CircleOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setCenter(center) 원의 중심점 좌표를 설정합니다. Parameters Name Type Description center Coord | CoordLiteral 중심점 좌표 Fires center_changed setClickable(clickable) 도형의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부 Fires clickable_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options CircleOptions 도형 옵션 Fires center_changed visible_changed zIndex_changed radius_changed setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션 값 Fires center_changed visible_changed zIndex_changed radius_changed setRadius(radius) 원의 반경을 설정합니다. Parameters Name Type Description radius number 원의 반경. 단위는 미터입니다. Fires radius_changed setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일 값 setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options CircleOptions 도형 스타일 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions CircleOptions CircleOptions 객체는 Circle을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. center Coord | CoordLiteral 도형의 중심점 좌표입니다. radius number &lt;optional&gt; 0 도형의 반경입니다. 단위는 미터입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; none 도형 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. Events center_changed Parameters Name Type Description center Points 도형의 중심 위치가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. radius_changed Parameters Name Type Description radius number 도형의 반경이 변경되면 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.CustomControl.html":{"id":"naver.maps.CustomControl.html","title":"Class: naver.maps.CustomControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API CustomControl Class: naver.maps.CustomControl naver.maps. CustomControl CustomControl 클래스는 지도 위에 올리는 UI 컨트롤의 기본 클래스입니다. NAVER 지도 API v3에서 제공하는 모든 컨트롤은 이 클래스를 상속받아 구현했습니다. 사용자 정의 UI 컨트롤을 만들려면 이 클래스를 상속받아 구현해야 합니다. new naver.maps.CustomControl(html, ControlOptions) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하고, 지정한 옵션에 따라 UI 컨트롤 위치를 설정합니다. 첫 번째 인수를 생략하면 컨트롤 컨테이너만 생성합니다. Parameters Name Type Description html string UI 컨트롤 마크업 ControlOptions ControlOptions UI 컨트롤 옵션 Tutorials 사용자 정의 컨트롤 Example var map = new naver.maps.Map('map', {}), btnHtml = '&lt;a href=\"#\"&gt;&lt;span&gt;BUTTON&lt;/span&gt;&lt;/a&gt;', customControl = new naver.maps.CustomControl(btnHtml, { position: naver.maps.Position.TOP_LEFT }); customControl.setMap(map); Extends naver.maps.KVO Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Type Definitions ControlOptions ControlOptions 객체는 UI 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position TOP_RIGHT 컨트롤을 배치할 위치입니다. × Search results Close "},"naver.maps.Data.html":{"id":"naver.maps.Data.html","title":"Class: naver.maps.Data","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Data Class: naver.maps.Data naver.maps. Data Data 클래스는 GeoJSON, KML, GPX 지리 공간 데이터를 기반으로 지도 위에 점, 선, 도형 등을 표현하는 데이터 레이어를 정의합니다. Map 객체는 기본적으로 data라는 이름의 Data 인스턴스를 속성으로 포함하고 있습니다. 따라서, 일반적인 상황에서는 명시적으로 새로운 객체를 생성하지 않습니다. new naver.maps.Data() Tutorials 데이터 레이어 Extends naver.maps.KVO Methods addFeature(feature, autoStyle) Feature 객체를 데이터 레이어에 추가합니다. Parameters Name Type Description feature naver.maps.Feature 추가할 Feature 객체 autoStyle boolean 스타일 적용 유무. Geometry 객체의 Foreign Members mantle_properties 내에 지도 API에서 사용하는 스타일이 정의되어 있으면 자동으로 해당 스타일을 적용합니다. Fires addfeature Returns Type Description naver.maps.Feature Feature 객체 addGeoJson(geojson, autoStyle) GeoJSON 형식의 지리 공간 데이터를 추가합니다. 지정한 데이터의 모든 Feature를 추가합니다. Parameters Name Type Description geojson GeoJSON 추가할 GeoJSON 객체 autoStyle boolean 스타일 적용 유무. Geometry 객체의 Foreign Members mantle_properties 내에 지도 API에서 사용하는 스타일이 정의되어 있으면 자동으로 해당 스타일을 적용합니다. Returns Type Description Array.&lt;naver.maps.Feature&gt; Feature 객체의 배열 addGpx(xmlDoc, autoStyle) GPX 형식의 지리 공간 데이터를 추가합니다. 내부적으로 GeoJSON 형식의 데이터로 변환합니다. Parameters Name Type Description xmlDoc GPX 추가할 GPX 객체 autoStyle boolean 스타일 적용 유무. 이 값이 true이면, GPX 내에 정의된 GPX Style Schema의 Line 스타일을 자동으로 적용합니다. 그렇지 않으면 스타일을 적용하지 않습니다. Returns Type Description Array.&lt;naver.maps.Feature&gt; Feature 객체의 배열 addKml(xmlDoc, autoStyle) KML 형식의 지리 공간 데이터를 추가합니다. 내부적으로 GeoJSON 형식의 데이터로 변환합니다. Parameters Name Type Description xmlDoc KML 추가할 KML 객체 autoStyle boolean 스타일 적용 유무. 이 값이 true이면, KML 내에 정의된 도형 스타일을 자동으로 적용합니다. 그렇지 않으면 스타일을 적용하지 않습니다. Returns Type Description Array.&lt;naver.maps.Feature&gt; Feature 객체의 배열 forEach(callback) 데이터 레이어에 있는 모든 Feature 객체를 순서대로 돌며 콜백 함수를 수행합니다. Parameters Name Type Description callback function 데이터 레이어에 포함된 모든 Feature 객체를 순서대로 돌며 수행할 콜백 함수 Properties Name Type Description feature naver.maps.Feature Feature 객체 index number 해당 Feature 객체의 인덱스 getAllFeature() 데이터 레이어에 추가된 모든 Feature 객체의 배열을 반환합니다. Returns Type Description Array.&lt;naver.maps.Feature&gt; Feature 객체의 배열 getFeatureById(id) 지정된 id에 해당하는 Feature 객체를 반환합니다. Parameters Name Type Description id string | number Feature 객체의 고유한 id Returns Type Description naver.maps.Feature Feature 객체 getMap() 현재 데이터 레이어가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 getStyle() GeoJSON 지리 공간 데이터의 표현 스타일을 반환합니다. Returns Type Description StyleOptions | StylingFunction StyleOptions 객체 또는 StylingFunction overrideStyle(feature, style) 적용된 데이터 표현 스타일을 재정의합니다. 재정의된 스타일만 반영됩니다. Parameters Name Type Description feature naver.maps.Feature Feature 객체 style StyleOptions StyleOptions 객체 removeFeature(feature) Feature 객체를 데이터 레이어에서 삭제합니다. Parameters Name Type Description feature naver.maps.Feature 삭제할 Feature 객체 Fires removefeature Returns Type Description string | number removedFeatureId - 삭제된 Feature 객체의 id removeGeoJson(geojson) GeoJSON 형식의 지리 공간 데이터를 삭제합니다. 지정한 데이터의 모든 Feature를 삭제합니다. Parameters Name Type Description geojson GeoJSON 삭제할 GeoJSON 객체 revertStyle(feature) 재정의된 데이터 표현 스타일을 기존에 setStyle 메서드를 이용해 지정한 스타일로 복원합니다. 인수로 Feature 객체를 전달하면, 해당 Feature 객체의 스타일만 복원합니다. Parameters Name Type Argument Description feature naver.maps.Feature &lt;optional&gt; 복원할 Feature 객체 setMap(map) 데이터 레이어를 지도에 추가합니다. 인수로 null을 전달하면 데이터 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 데이터 레이어를 추가할 Map 객체 setStyle(style) GeoJSON 지리 공간 데이터의 표현 스타일을 설정합니다. 데이터를 표현하는 스타일은 StyleOptions 객체 리터럴 또는 스타일을 처리하는 StylingFunction 함수를 이용해 설정할 수 있습니다. Parameters Name Type Description style StyleOptions | StylingFunction 데이터 표현 스타일 Example map.data.setStyle(function(feature) { var color = 'red'; if (feature.getProperty('isColorful')) { color = feature.getProperty('color'); } return { fillColor: color, strokeColor: color, strokeWeight: 2, icon: null }; }); toGeoJson() 데이터 레이어에 있는 모든 Feature 객체를 컬렉션으로 포함하는, 완전한 GeoJSON 지리 공간 데이터 객체를 반환합니다. 이때, 반환된 GeoJSON의 모든 Feature는 추가될 당시에 id가 존재하지 않았다면 임의의 고유한 id가 부여됩니다. Returns Type Description GeoJSON GeoJSON 객체 Type Definitions FeatureEvent 데이터 레이어에 있는 Feature 객체가 변경되었을 때 전달되는 이벤트 객체입니다. Type: event Properties Name Type Description feature naver.maps.Feature 이벤트가 발생한 Feature 객체입니다. PointerEvent GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 마우스 또는 터치 이벤트가 발생하면 전달되는 포인터 이벤트 객체입니다. Type: event Properties Name Type Description coord Coord 이벤트가 발생한 위치의 지도 좌표입니다. point naver.maps.Point 이벤트가 발생한 위치의 세계 좌표입니다. offset naver.maps.Point 이벤트가 발생한 위치의 픽셀 좌표입니다. pointerEvent DOMEvent 이벤트가 발생한 시점의 DOM 이벤트 객체입니다. feature naver.maps.Feature 이벤트가 발생한 위치의 Feature 객체입니다. PropertyEvent 데이터 레이어에 있는 Feature 객체의 부가 정보(properties)가 변경되었을 때 전달되는 이벤트 객체입니다. Type: event Properties Name Type Description feature naver.maps.Feature 이벤트가 발생한 Feature 객체입니다. name string 변경된 부가 정보의 이름(키)입니다. oldValue any 해당 부가 정보의 변경 전 값입니다. newValue any 해당 부가 정보의 변경 후 값입니다. StyleOptions StyleOptions 객체는 데이터 레이어에서 기하 구조의 스타일을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description strokeColor string &lt;optional&gt; #000 기하 구조의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeOpacity number &lt;optional&gt; 0.8 기하 구조의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeWeight number &lt;optional&gt; 3 기하 구조의 선 두께입니다. fillColor string &lt;optional&gt; #000 기하 구조 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 0.3 기하 구조 영역의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; true 기하 구조의 클릭 허용 여부입니다. icon string | ImageIcon | SymbolIcon | HtmlIcon &lt;optional&gt; 마커의 모양입니다. shape MarkerShape &lt;optional&gt; 마커의 인터랙션 영역입니다. title string &lt;optional&gt; null 마커에 마우스 포인터를 올리면 나타나는 툴팁 문자열입니다. 이 속성을 설정하지 않거나 빈 문자열로 설정하면 툴팁을 노출하지 않습니다. visible boolean &lt;optional&gt; true 기하 구조의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 기하 구조의 쌓임 순서입니다. StylingFunction(feature) 데이터 레이어에 있는 Feature 객체의 스타일을 처리할 수 있도록 Feature 객체를 순서대로 돌며 수행되는 함수입니다. 이때 반환값은 반드시 StyleOptions 객체 리터럴이어야 합니다. Parameters Name Type Description feature naver.maps.Feature Feature 객체 Returns Type Description StyleOptions StyleOptions 객체 Events addfeature Feature 객체가 추가되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. removefeature Feature 객체가 삭제되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.FeatureEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. × Search results Close "},"naver.maps.drawing.html":{"id":"naver.maps.drawing.html","title":"Namespace: naver.maps.drawing","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API drawing Namespace: naver.maps.drawing naver.maps. drawing 그리기 도구 서브 모듈의 네임스페이스입니다. Classes DrawingManager Type Definitions DrawingEvent DrawingEvent는 DrawingManager 인스턴스에서 발생하는 이벤트를 정의합니다. Type: object Properties Name Type Default Description ADD string 'drawing_added' 그리기 도구를 사용해 오버레이를 생성하면 발생합니다. REMOVE string 'drawing_removed' 그려진 오버레이를 마우스 오른쪽 버튼으로 클릭해 삭제하면 발생합니다. SELECT string 'drawing_selected' 그려진 오버레이를 선택하면 발생합니다. {overlay}Added string 'circleAdded' 등, 오버레이의 유형에 따라 오버레이를 생성하면 발생합니다. {overlay}Removed string 'circleRemoved' 등, 오버레이의 유형에 따라 오버레이를 삭제하면 발생합니다. {overlay}Selected string 'circleSelected' 등, 오버레이의 유형에 따라 오버레이를 선택하면 발생합니다. DrawingMode DrawingMode는 그리기 모드를 정의합니다. Type: object Properties Name Type Default Description HAND number 0 선택 모드입니다. RECTANGLE number 1 사각형 그리기 모드입니다. ELLIPSE number 2 원 그리기 모드입니다. POLYLINE number 3 폴리라인 그리기 모드입니다. ARROWLINE number 4 화살표가 있는 폴리라인 그리기 모드입니다. POLYGON number 5 폴리곤 그리기 모드입니다. MARKER number 6 마커 그리기 모드입니다. DrawingStyle DrawingStyle은 컨트롤 집합의 스타일을 정의합니다. Type: object Properties Name Type Default Description HORIZONTAL number 0 그리기 컨트롤이 가로 한 줄로 나타납니다. VERTICAL number 1 그리기 컨트롤이 세로 한 줄로 나타납니다. HORIZONTAL_2 number 2 그리기 컨트롤이 가로 두 줄로 나타납니다. 홀수 개의 그리기 모드를 정의한 경우, 마지막 그리기 모드는 아이콘으로 표시되지 않습니다. VERTICAL_2 number 3 그리기 컨트롤이 세로 한 줄로 나타납니다. 홀수 개의 그리기 모드를 정의한 경우, 마지막 그리기 모드는 아이콘으로 표시되지 않습니다. × Search results Close "},"naver.maps.drawing.DrawingManager.html":{"id":"naver.maps.drawing.DrawingManager.html","title":"Class: naver.maps.drawing.DrawingManager","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API DrawingManager Class: naver.maps.drawing.DrawingManager naver.maps.drawing. DrawingManager DrawingManager 클래스는 사용자가 지도에 사각형, 타원, 폴리라인, 화살표가 있는 폴리라인, 폴리곤, 마커를 그릴 수 있는 그래픽 인터페이스를 제공합니다. 원은 타원으로 대체합니다. new naver.maps.drawing.DrawingManager(options) Parameters Name Type Argument Description options DrawingOptions &lt;optional&gt; 옵션 Tutorials 그리기 도구 생성 및 기본 동작 See 그리기 도구 기본 예제 Example var map = new naver.maps.Map('map'); var drawingManager = new naver.maps.drawing.DrawingManager(); drawingManager.setMap(map); Extends naver.maps.KVO Methods addDrawing(overlay, drawingMode, id) 오버레이 객체를 DrawingManager에 추가합니다. 추가된 객체는 마우스 왼쪽 버튼을 클릭해 편집하거나 오른쪽 버튼을 클릭해 삭제할 수 있습니다. Parameters Name Type Argument Description overlay DrawingOverlay 오버레이 객체, {naver.maps.Circle}은 지원하지 않습니다. drawingMode naver.maps.drawing.DrawingMode 추가할 오버레이 객체의 그리기 모드. id string &lt;optional&gt; 추가할 오버레이 객체에 지정할 id. 정의하지 않는 경우 임의로 정의됩니다. addListener(eventName, listener) 현재 객체의 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. Parameters Name Type Description eventName naver.maps.drawing.DrawingEvent 이벤트 이름 listener function 이벤트 리스너 Properties Name Type Description overlay DrawingOverlay 대상 오버레이 객체 Overrides naver.maps.KVO#addListener Returns Type Description MapEventListener 지도 이벤트 리스너 객체 Example var dm = new naver.maps.drawing.DrawingManager({ map: map }); dm.addListener(naver.maps.drawing.DrawingEvent.SELECT, function(overlay) { console.log(overlay.id, overlay.name); }); destroy() DrawingManager의 모든 이벤트 및 그려진 도형, 기타 DOM 요소를 모두 제거합니다. getDrawing(id) 그려진 도형 중 해당 id에 해당하는 오버레이 객체를 반환합니다. Parameters Name Type Description id string 오버레이 객체의 id Returns Type Description DrawingOverlay 오버레이 객체 getDrawings() 그려진 도형/마커들을 id: 오버레이 객체의 쌍으로 반환합니다. Returns Type Description Object.&lt;String, DrawingOverlay&gt; 그려진 오버레이의 객체 쌍 getMap() 현재 DrawingManager가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 removeDrawing(overlayOrId) 오버레이 객체를 DrawingManager에서 삭제합니다. Parameters Name Type Description overlayOrId DrawingOverlay | string 오버레이 혹은 오버레이의 id removeListener() 리스너를 제거합니다. Overrides naver.maps.KVO#removeListener Example var dm = new naver.maps.drawing.DrawingManager({ map: map, drawingControls: [naver.maps.drawing.DrawingMode.RECTANGLE] }); var listener = dm.addListener('rectangle_added', function(overlay) { console.log(overlay.id, overlay.name); }); naver.maps.Event.removeListener(listener); setMap(map) DrawingManager를 지도에 추가합니다. 인수로 null을 전달하면 그리기 도구 컨트롤을 지도에서 제거하고 인터랙션을 정지합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 toGeoJson() 그려진 도형들을 geojson 형식 객체로 반환합니다. See 오버레이 데이터 추출 및 복원하기 Returns Type Description Object geojson 객체 Type Definitions controlPointOptions 도형 편집 시 꼭지점이나 선분의 중간점에 표시되는 제어점의 스타일입니다. Type: object Properties Name Type Description anchorPointOptions CircleOptions 도형의 꼭지점에 표시될 제어점의 옵션입니다. 위치 또는 지도의 값을 전달하면 무시됩니다. midPointOptions CircleOptions Polyline|Arrowline|Polygon 도형의 중간점에 표시될 제어점의 옵션입니다. 위치 또는 지도의 값을 전달하면 무시됩니다. drawingControlOptions 그리기 도구 컨트롤의 위치와 정렬 방식을 정의합니다. Type: object Properties Name Type Argument Default Description position naver.maps.Position &lt;optional&gt; TOP_CENTER 그리기 도구를 배치할 위치입니다. style naver.maps.drawing.DrawingStyle &lt;optional&gt; HORIZONTAL 그리기 도구의 정렬 방식입니다. DrawingOptions DrawingOptions 객체는 그리기 모듈의 세부 설정을 정의합니다. 표시할 그리기 도구 컨트롤 집합, 위치 및 최초 그리기 상태 도형의 옵션 편집 제어점 옵션 Type: object Properties Name Type Argument Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. drawingControl Array.&lt;naver.maps.drawing.DrawingMode&gt; &lt;optional&gt; 지도에 표시할 그리기 도구 목록입니다. 그리기 도구의 순서는 배열에서 선언된 순서와 일치합니다. null로 정의할 경우 그리기 도구가 표시되지 않습니다. 이 옵션을 정의하지 않은 경우 기본적으로 다음과 같이 표시됩니다. drawingControlOptions drawingControlOptions &lt;optional&gt; 그리기 도구를 표시할 옵션입니다. drawingMode naver.maps.drawing.DrawingMode &lt;optional&gt; 초기 그리기 상태를 정의합니다. 정의되지 않은 경우 HAND 모드로 선택됩니다. controlPointOptions controlPointOptions &lt;optional&gt; 그려진 도형을 선택/편집 시 나타나는 제어점의 옵션입니다. rectangleOptions RectangleOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Rectangle을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. ellipseOptions EllipseOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Ellipse을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. polylineOptions PolylineOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Polyline을 정의하는 옵션을 나타냅니다. startIcon, endIcon, 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. arrowlineOptions PolylineOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 화살표가 있는 Polyline을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. startIcon이나 endIcon을 정의하지 않은 경우, 기본적으로 endIcon이 표시됩니다. polygonOptions PolygonOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Polygon을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. markerOptions MarkerOptions &lt;optional&gt; 그리기 도구를 이용해 생성될 Marker을 정의하는 옵션을 나타냅니다. 임의의 크기, 위치 또는 지도의 값을 전달하면 무시됩니다. See 그리기 도구 옵션 활용하기 Example var map = new naver.maps.Map('map'); var drawingManager = new naver.maps.drawing.DrawingManager({ map: map, // 표시할 컨트롤 집합. drawingControl: [ naver.maps.drawing.DrawingMode.RECTANGLE, naver.maps.drawing.DrawingMode.ELLIPSE, naver.maps.drawing.DrawingMode.POLYLINE, naver.maps.drawing.DrawingMode.ARROWLINE, naver.maps.drawing.DrawingMode.POLYGON ], // 표시할 컨트롤의 위치 및 정렬 drawingControlOptions: { position: naver.maps.Position.LEFT_CENTER, style: naver.maps.drawing.DrawingStyle.HORIZONTAL_2 }, // 편집 제어점 옵션 controlPointOptions: { anchorPointOptions: { radius: 10, fillColor: '#ff0000', strokeColor: '#0000ff', strokeWeight: 2 }, midPointOptions: { radius: 10, fillColor: '#ff0000', strokeColor: '#0000ff', strokeWeight: 2, fillOpacity: 0.5 } }, // 오버레이의 스타일, 정의가 없는 경우 각 오버레이의 기본값을 사용 rectangleOptions: { fillColor: '#ff0000', fillOpacity: 0.5, strokeWeight: 3, strokeColor: '#ff0000' }, ellipseOptions: {}, polylineOptions: { // 화살표 아이콘 계열 옵션(startIcon, endIcon)은 무시됨 strokeColor: '#222', strokeWeight: 3 }, arrowlineOptions: { // startIcon || endIcon 옵션이 없으면 endIcon 을 BLOCK_OPEN 으로 설정합니다. strokeWeight: 3 }, polygonOptions: { strokeColor: '#ffd100', fillColor: '#ffff00', fillOpacity: 0.5, strokeWeight: 3 } }); × Search results Close "},"naver.maps.Ellipse.html":{"id":"naver.maps.Ellipse.html","title":"Class: naver.maps.Ellipse","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Ellipse Class: naver.maps.Ellipse naver.maps. Ellipse Ellipse 클래스는 타원 모양의 폴리곤을 정의합니다. new naver.maps.Ellipse() Tutorials 도형 Extends naver.maps.OverlayView Methods getAreaSize() 도형의 전체 면적을 제곱미터 단위로 반환합니다. 타원의 특성상 근사치입니다. Returns Type Description number 면적 getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description EllipseOptions | any 도형 옵션 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description EllipseOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setBounds(bounds) 도형의 좌표 경계를 설정합니다. Parameters Name Type Description bounds Bounds | BoundsLiteral 좌표 경계 Fires bounds_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션 값 Fires bounds_changed clickable_changed visible_changed zIndex_changed setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options EllipseOptions 도형 옵션 Fires bounds_changed clickable_changed visible_changed zIndex_changed setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일 값 setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options EllipseOptions 도형 스타일 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions EllipseOptions EllipseOptions 객체는 Ellipse를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. bounds Bounds | BoundsLiteral 도형의 좌표 경계입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; none 도형 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. Events bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.EPSG3857.html":{"id":"naver.maps.EPSG3857.html","title":"StaticObjects: EPSG3857","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API EPSG3857 StaticObjects: EPSG3857 naver.maps. EPSG3857 EPSG3857 객체는 EPSG:3857 좌표계를 나타내는 것으로 EPSG3857 좌표계와 관련된 좌표 변환 메서드를 제공합니다. EPSG:3857은 웹 기반 지도 서비스에서 일반적으로 사용하는 좌표계이며, 네이버 세계 지도 유형에서도 사용합니다. 원본 Projection 객체의 세계 좌표는 0~1 사이의 값입니다. Tutorials 지도 투영과 좌표 체계 Extends naver.maps.Projection Methods fromCoordToPoint(coord) 지정한 지도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord Coord 지도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToPoint(latlng) 지정한 위/경도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromPointToLatLng(point) 지정한 세계 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 getDestinationCoord(fromLatLng, angle, meter) 지정한 좌표에서 북쪽을 기준으로 지정한 각도(시계 방향)와 거리만큼 떨어진 위치의 지도 좌표를 반환합니다. Parameters Name Type Description fromLatLng naver.maps.LatLng 기준이 되는 위/경도 좌표 angle number 지정한 좌표에서 북쪽을 기준으로 한 시계 방향의 각도(0-북, 90-동, 180-남, 270-서). 이 값이 0이면 현재의 좌표에서 북쪽을 가리키며, 90이면 동쪽을 가리킵니다. meter number 지정한 좌표에서 구하려는 좌표까지의 거리(미터) Returns Type Description naver.maps.LatLng 새로운 위/경도 좌표 getDistance(latlng1, latlng2) 지정한 두 위/경도 좌표 간의 거리를 반환합니다. 단위는 미터입니다. Parameters Name Type Description latlng1 naver.maps.LatLng 위/경도 좌표 latlng2 naver.maps.LatLng 위/경도 좌표 Returns Type Description number 거리 × Search results Close "},"naver.maps.EPSG3857Coord.html":{"id":"naver.maps.EPSG3857Coord.html","title":"StaticObjects: EPSG3857Coord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API EPSG3857Coord StaticObjects: EPSG3857Coord naver.maps. EPSG3857Coord EPSG3857Coord 객체는 EPSG:3857 평면 좌표계를 기본 좌표계로 사용하는 투영 객체입니다. 기존의 EPSG3857 투영 객체와 유사하지만, 실제 사용 좌표계는 위/경도 좌표계가 아닌 EPSG:3857 평면 좌표계입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.EPSG3857 Methods fromCoordToLatLng(coord) 지정한 EPSG3857 평면 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromCoordToPoint(coord) 지정한 EPSG3857 평면 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromEPSG3857ToLatLng(coord) 지정한 EPSG3857 평면 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromEPSG3857ToPoint(coord) 지정한 EPSG3857 평면 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToCoord(coord) 지정한 위/경도 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description coord Coord 위/경도 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromLatLngToEPSG3857(coord) 지정한 위/경도 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description coord Coord 위/경도 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromPointToEPSG3857(point) 지정한 세계 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 × Search results Close "},"naver.maps.Event.html":{"id":"naver.maps.Event.html","title":"StaticObjects: Event","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Event StaticObjects: Event naver.maps. Event NAVER 지도 API의 이벤트 시스템을 구현합니다. Tutorials UI 이벤트 Methods &lt;static&gt; addDOMListener(element, eventName, listener) 대상 HTMLElement에서 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 등록된 리스너는 clearListener 메서드를 이용해 제거할 수 없습니다. Parameters Name Type Description element HTMLElement 이벤트 대상 HTMLElement eventName string 이벤트 이름 listener function 이벤트 리스너 Tutorials DOM 이벤트 Returns Type Description DOMEventListener DOM 이벤트 리스닝 객체 &lt;static&gt; addListener(target, eventName, listener) 대상 객체에서 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. Parameters Name Type Description target object 이벤트 대상 객체 eventName string 이벤트 이름 listener function 이벤트 리스너 Returns Type Description MapEventListener 이벤트 리스닝 객체 &lt;static&gt; clearInstanceListeners(target) 대상 객체에 등록된 리스너를 모두 제거합니다. Parameters Name Type Description target object 이벤트 대상 객체 &lt;static&gt; clearListeners(target, fromEventName) 대상 객체에서 특정 이벤트 알림의 리스너를 제거합니다. Parameters Name Type Description target object 이벤트의 대상 객체 fromEventName string 이벤트 이름 &lt;static&gt; forward(source, fromEventName, target, toEventName) 원본 객체 source에서 이벤트 알림을 받아, 대상 객체 target으로 동일한 이벤트 알림을 보냅니다. Parameters Name Type Argument Description source object 이벤트의 원본 객체 fromEventName string 이벤트 이름 target object 이벤트 대상 객체 toEventName string &lt;optional&gt; 송신할 이벤트 이름. toEventName을 지정하면 fromEventName으로 발생한 이벤트를 toEventName에서 지정한 이름으로 전파합니다. Returns Type Description MapEventListener 이벤트 리스닝 객체 &lt;static&gt; hasListener(target, eventName) 대상 객체에 이벤트 알림이 등록되었는지 여부를 확인합니다. Parameters Name Type Description target object 확인할 대상 객체 eventName string 이벤트 이름 Returns Type boolean &lt;static&gt; once(target, eventName, listener) 대상 객체에서 한 번만 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. Parameters Name Type Description target object 이벤트 대상 객체 eventName string 이벤트 이름 listener function 이벤트 리스너 Returns Type Description MapEventListener 이벤트 리스닝 객체 &lt;static&gt; removeDOMListener(element, eventName, listener) 대상 HTMLElement에서 특정 이벤트 알림의 리스너를 제거합니다. Parameters Name Type Description element HTMLElement 이벤트 대상 HTMLElement eventName string 이벤트 이름 listener function 이벤트 리스너 Tutorials DOM 이벤트 &lt;static&gt; removeDOMListener(listeners) 대상 HTMLElement에서 특정 이벤트 알림의 리스너를 제거합니다. Parameters Name Type Description listeners DOMEventListener | Array.&lt;DOMEventListener&gt; DOM 이벤트 리스닝 객체 또는 DOM 이벤트 리스닝 객체의 배열 &lt;static&gt; removeListener(listeners) 특정 이벤트 알림의 리스너를 제거합니다. Parameters Name Type Description listeners MapEventListener | Array.&lt;MapEventListener&gt; 이벤트 리스닝 객체 또는 이벤트 리스닝 객체의 배열 &lt;static&gt; resumeDispatch(target, eventName) 대상 객체의 정지된 특정 이벤트 알림을 재개합니다. Parameters Name Type Description target object 이벤트 대상 객체 eventName string 이벤트 이름 &lt;static&gt; stopDispatch(target, eventName) 대상 객체의 특정 이벤트 알림을 정지시킵니다. resumeDispatch를 이용해 이벤트 알림을 재개하기 전까지는 해당 이벤트 발생 시 이벤트 핸들러를 호출하지 않습니다. Parameters Name Type Description target object 이벤트 대상 객체 eventName string 이벤트 이름 &lt;static&gt; trigger(target, eventName, eventObject) 대상 객체에 이벤트 알림을 발생시킵니다. 세 번째 인수를 생략하면 target에서 발생할 수 있는 기본 이벤트 객체를 전달합니다. 기본 이벤트 객체는 target의 _getDefaultEventParameters 메서드를 참조합니다. Parameters Name Type Argument Description target object 이벤트 대상 객체 eventName string 이벤트 이름 eventObject any &lt;optional&gt; &lt;repeatable&gt; 이벤트 리스너에 전달할 이벤트 객체 × Search results Close "},"naver.maps.Feature.html":{"id":"naver.maps.Feature.html","title":"Class: naver.maps.Feature","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Feature Class: naver.maps.Feature naver.maps. Feature Feature 클래스는 FeatureCollection 타입의 형상 정보 모음에서 Feature 타입의 개별 GeoJSON 객체를 추상화합니다. new naver.maps.Feature(rawFeature) Parameters Name Type Description rawFeature object Feature 타입의 GeoJSON 객체 Tutorials 데이터 레이어 Extends naver.maps.KVO Methods forEachOverlay(callback) Feature 객체의 오버레이를 순서대로 돌며 콜백 함수를 수행합니다. Parameters Name Type Description callback forEachOverlayCallback 모든 오버레이를 순서대로 돌며 수행할 콜백 함수 getBounds() Feature 객체의 좌표 경계를 반환합니다. Returns Type Description bounds 형상 정보의 좌표 경계 getGeometries() Feature 객체의 Geometry 객체를 배열 형태로 반환합니다. Returns Type Description Array.&lt;naver.maps.Geometry&gt; Geometry 객체 배열 getId() Feature 객체의 고유한 id를 반환합니다. Returns Type Description string 고유한 id getOverlays() 형상 정보를 표현하는 데 사용한 모든 오버레이를 반환합니다. Returns Type Description Array.&lt;naver.maps.Marker&gt; | Array.&lt;naver.maps.Polyline&gt; | Array.&lt;naver.maps.Polygon&gt; 모든 오버레이 객체 배열 getProperty(name) 지정한 이름의 부가 정보(properties) 값을 반환합니다. Parameters Name Type Description name string 부가 정보의 이름 Returns Type Description any 지정한 부가 정보의 값 getRaw() 원시 데이터인 Feature 타입의 GeoJSON 객체를 반환합니다. Returns Type Description GeoJSON Feature 타입의 GeoJSON 객체 setProperty(name, value) 지정한 이름의 부가 정보(properties)를 설정합니다. Parameters Name Type Description name string 설정할 부가 정보의 이름 value any 설정할 부가 정보의 값 Fires property_changed setStyle(styleOptions) Feature 객체의 오버레이의 표현 스타일을 설정합니다. 모든 오버레이에 동일한 스타일이 적용됩니다. Parameters Name Type Description styleOptions naver.maps.Data.StyleOptions 데이터 표현 스타일 Type Definitions forEachOverlayCallback(overlay, index) Feature 객체의 오버레이를 순서대로 돌며 수행되는 콜백 함수입니다. Parameters Name Type Description overlay naver.maps.Marker | naver.maps.Polyline | naver.maps.Polygon 오버레이 객체 index number 해당 오버레이 인덱스 Events click GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. dblclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mousedown GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 누를 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseout GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계를 벗어날 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseover GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자의 마우스 포인터가 경계에 들어올 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. mouseup GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 버튼을 놓을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. property_changed Feature 객체의 부가 정보(properties)가 변경되었을 때 이벤트가 발생합니다. Parameters Name Type Description event naver.maps.Data.PropertyEvent 이벤트 객체입니다. rightclick GeoJSON 지리 공간 데이터의 점, 선, 면 등의 기하 구조에서 사용자가 마우스 오른쪽 버튼을 클릭했을 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent naver.maps.Data.PointerEvent 이벤트 객체입니다. × Search results Close "},"naver.maps.FlightSpot.html":{"id":"naver.maps.FlightSpot.html","title":"Class: naver.maps.FlightSpot","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API FlightSpot Class: naver.maps.FlightSpot naver.maps. FlightSpot FlightSpot 클래스는 지도 위에 주변 항공뷰 마커를 표시하는 레이어를 정의합니다. 기본적으로 마커 클러스터링을 지원합니다. 이 클래스는 panorama 서브 모듈을 로드해야 합니다. new naver.maps.FlightSpot() Requires module:panorama Example 지도 위에 항공뷰를 표시하고 항공뷰 선택 시 파노라마 `id` 출력 후 항공뷰를 제거하는 예제 var map = new naver.maps.Map(\"map\", { center: new naver.maps.LatLng(37.3599605, 127.1058814) }); var flightSpot = new naver.maps.FlightSpot(); flightSpot.setMap(map); naver.maps.Event.addListener(flightSpot, \"poi_clicked\", function(panoId) { alert(panoId); flightSpot.setMap(null); }); Extends naver.maps.KVO Requires module:panorama Methods getMap() 현재 주변 항공뷰 마커가 추가된 지도 객체를 반환합니다. Returns Type Description naver.maps.Map | null 지도 객체 setMap(map) 주변 항공뷰 마커를 지도에 추가합니다. 인수로 null을 전달하면 주변 항공뷰 마커를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Events poi_clicked 주변 항공뷰 마커를 클릭하면 이벤트가 발생합니다. 단, 그룹 항공뷰 마커(+)를 클릭할 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description panoId string 파노라마 id × Search results Close "},"naver.maps.Geometry.html":{"id":"naver.maps.Geometry.html","title":"Class: naver.maps.Geometry","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Geometry Class: naver.maps.Geometry naver.maps. Geometry Geometry 클래스는 Feature 타입의 GeoJSON 객체의 geometry 속성을 추상화합니다. 일반적으로 Feature 객체를 통해 초기화하므로 별도의 인스턴스를 생성하지 않습니다. new naver.maps.Geometry(rawGeometry) Parameters Name Type Description rawGeometry object Feature 타입의 GeoJSON 객체의 geometry 속성 Tutorials 데이터 레이어 Extends naver.maps.KVO Methods getCoords() Geometry 객체의 좌표 배열을 반환합니다. 이 값은 Feature 타입의 GeoJSON 객체의 geometry 속성에서 coordinates 속성을 파싱한 것입니다. Feature에서 다음과 같은 오버레이를 생성할 때 사용합니다. Marker Polyline Polygon Returns Type Description ArrayOfCoords 점, 선, 면 등의 기하 구조의 좌표 getType() Geometry 객체의 타입을 반환합니다. Point MultiPoint LineString MultiLineString Polygon MultiPolygon Feature에서 다음과 같은 오버레이를 생성할 때 사용합니다. Marker Polyline Polygon Returns Type Description string Geometry 객체의 타입 × Search results Close "},"naver.maps.GroundOverlay.html":{"id":"naver.maps.GroundOverlay.html","title":"Class: naver.maps.GroundOverlay","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API GroundOverlay Class: naver.maps.GroundOverlay naver.maps. GroundOverlay GroundOverlay 클래스는 지도 위에 올리는 사각형 이미지 오버레이를 정의합니다. new naver.maps.GroundOverlay(url, bounds, options) Parameters Name Type Argument Description url string 이미지 URL bounds Bounds | BoundsLiteral 좌표 경계 options GroundOverlayOptions &lt;optional&gt; 지상 오버레이 옵션 Tutorials 지상 오버레이 Extends naver.maps.OverlayView Methods getBounds() 지상 오버레이의 좌표 경계를 반환합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOpacity() 지상 오버레이의 불투명도를 반환합니다. Returns Type Description number 불투명도 getUrl() 지상 오버레이의 이미지 URL을 반환합니다. Returns Type Description string 이미지 URL setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOpacity(opacity) 지상 오버레이의 불투명도를 설정합니다. Parameters Name Type Description opacity number 불투명도 Type Definitions GroundOverlayOptions GroundOverlayOptions 객체는 GroundOverlay를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description clickable boolean &lt;optional&gt; true 지상 오버레이의 클릭 허용 여부입니다. 이 값이 false이면 지상 오버레이는 사용자 인터랙션을 받지 않습니다. map naver.maps.Map | null &lt;optional&gt; 지상 오버레이를 표시할 지도 객체입니다. opacity number &lt;optional&gt; 1 지상 오버레이의 불투명도입니다. 0과 1 사이의 값을 사용합니다. Events click Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 지상 오버레이에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. × Search results Close "},"naver.maps.ImageMapType.html":{"id":"naver.maps.ImageMapType.html","title":"Class: naver.maps.ImageMapType","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API ImageMapType Class: naver.maps.ImageMapType naver.maps. ImageMapType ImageMapType 클래스는 이미지 타일을 렌더링할 수 있는 이미지 지도 유형을 정의하는 데 필요한 MapType 인터페이스를 정의합니다. new naver.maps.ImageMapType(imageMapTypeOptions) Parameters Name Type Description imageMapTypeOptions ImageMapTypeOptions 이미지 타일 지도 유형 옵션 Implements naver.maps.MapType Tutorials 지도 유형 Methods getMapTypeOptions() 이미지 타일 지도 유형의 옵션을 반환합니다. Returns Type Description ImageMapTypeOptions 이미지 타일 지도 유형 옵션 getMaxZoom() 지도 유형의 최대 줌 레벨을 반환합니다. Returns Type Description number 최대 줌 레벨 getMinZoom() 지도 유형의 최소 줌 레벨을 반환합니다. Returns Type Description number 최소 줌 레벨 getName() 지도 유형의 이름을 반환합니다. Returns Type Description string 지도 유형의 이름 getTile(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 ImageTile 객체를 반환합니다. 새로운 타일이 필요할 때마다 이 메서드를 호출합니다. 이때, 이 메서드는 getTileUrls 메서드를 호출합니다. Parameters Name Type Description x number x 축의 인덱스 y number y 축의 인덱스 z number 줌 레벨 Implements naver.maps.MapType#getTile Returns Type Description naver.maps.ImageTile 이미지 타일 객체 getTileUrls(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 타일 URL을 반환합니다. 새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때, getTile의 tileSet 속성을 사용하거나 getTileUrl 메서드를 호출합니다. Parameters Name Type Description x number x 축의 인덱스 y number y 축의 인덱스 z number 줌 레벨 Returns Type Description Array.&lt;string&gt; 타일 URL 목록 setMapTypeOptions(imageMapTypeOptions) 이미지 타일 지도 유형의 옵션을 설정합니다. Parameters Name Type Description imageMapTypeOptions ImageMapTypeOptions 이미지 타일 지도 유형 옵션 Type Definitions ImageMapTypeOptions ImageMapTypeOptions 객체는 ImageMapType을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description name string 지도 유형 컨트롤 등에서 표시할 지도 유형의 이름입니다. maxZoom number 지도 유형의 최대 줌 레벨입니다. minZoom number 지도 유형의 최소 줌 레벨입니다. projection naver.maps.Projection 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. tileSize naver.maps.Size | SizeLiteral &lt;optional&gt; (256,256) 지도 유형의 타일 크기입니다. tileDuration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간 (밀리초 단위) repeatX boolean &lt;optional&gt; false 현재 줌 레벨에서 표현할 수 있는 타일 인덱스의 영역을 벗어나면 수평축으로 타일을 반복할 것인지 여부입니다. 세계 지도 투영을 사용하는 이미지 타일 지도 유형에서 사용하기에 적합합니다. vendor string &lt;optional&gt; 지도 유형의 제작자 이름입니다. provider MapDataProvider &lt;optional&gt; 지도 유형의 데이터 제공자 정보입니다. uid string &lt;optional&gt; 지도 유형을 유일하게 구분할 수 있는 id를 지정할 수 있습니다. darktheme boolean &lt;optional&gt; false 지도 유형이 전체적으로 어두운 이미지를 사용하는지를 지정합니다. 이 값이 true이면 지도 위 텍스트를 표시하는 기본 컨트롤의 텍스트 색상이 흰색으로 표시됩니다. getTileUrl function &lt;optional&gt; 전달된 타일의 인덱스와 줌 레벨에 해당하는 타일 URL을 반환합니다. 새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때마다 이 메서드를 호출합니다. tileSet string | Array.&lt;string&gt; &lt;optional&gt; 지도의 타일 이미지 URL 또는 URL의 목록을 지정할 수 있습니다. URL 문자열 내 {x},{y},{z}는 타일 인덱스와 줌 레벨로 치환됩니다. 타일 인덱스는 왼쪽 위 기준이며, 타일 인덱스를 반대로 적용하려면 {-x},{-y}와 같이 -를 함께 사용합니다. getTileUrl 메서드가 설정되면 이 속성은 무시됩니다. Example var imageMapTypeOptions = { minZoom: 0, maxZoom: 22, projection: naver.maps.EPSG3857, name: '세계 지도', tileSize: new naver.maps.Size(256, 256), repeatX: true, vendor: 'MyCorp.', provider: [{ title: \"내 지도 ver 1.0\" }, { title: \"OpenStreetMap\", link: \"http://www.openstreetmap.org/copyright\" }, { title: \"/인천광역시\", bounds: new naver.maps.LatLngBounds( new naver.maps.LatLng(36.915887, 125.690716), new naver.maps.LatLng(37.687529, 126.853252)) }], tileSet: [ \"http://mymap1.com/tiles/world/{z}/{x}/{y}.png\", \"http://mymap2.com/tiles/world/{z}/{x}/{y}.png\", \"http://mymap3.com/tiles/world/{z}/{x}/{y}.png\", \"http://mymap4.com/tiles/world/{z}/{x}/{y}.png\" ] }; var imageMapType = new naver.maps.ImageMapType(imageMapTypeOptions); MapDataProvider MapDataProvider 객체는 등록한 지도 유형의 데이터 제공자 정보를 나타냅니다. Type: object Properties Name Type Description title string 표시될 텍스트의 내용입니다. 빈 칸/Unicode 모두 허용하나, HTML Entity는 변환되지 않습니다. link string 표시될 텍스트를 클릭했을 때 이동할 주소입니다. 이 값이 없으면 클릭할 수 없는 요소로 생성됩니다. bounds Bounds | BoundsLiteral | ArrayOfBounds | ArrayOfBoundsLiteral 해당 텍스트를 표시할 좌표 경계입니다. 지도 화면에 해당 좌표 경계가 들어오면 텍스트를 표시합니다. 이 값이 없으면 항상 텍스트를 표시합니다. Example var mapTypeOptions = { //... provider: [{ title: \" 국토교통부\", }, { title: \",OpenStreetMap\", link: \"http://www.openstreetmap.org/copyright\" }, { title: \",Natural Earth\", link: \"http://www.naturalearthdata.com/\", bounds: NLatLngBounds( NLatLng(36.915887, 125.690716), NLatLng(37.687529, 126.853252)) }, { title: \" \\u2573 \\xa9 UNICODE ALSO OK\", bounds: [ NLatLngBounds( NLatLng(36.9604682, 126.7654746), NLatLng(38.1834428, 127.8062689)), // 서울,경기 NLatLngBounds( NLatLng(33.1940984, 126.1631646), NLatLng(33.5666617, 126.9448023)) // 제주 ] }] }; × Search results Close "},"naver.maps.ImageTile.html":{"id":"naver.maps.ImageTile.html","title":"Class: naver.maps.ImageTile","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API ImageTile Class: naver.maps.ImageTile naver.maps. ImageTile ImageTile 클래스는 한 장의 이미지 타일을 정의합니다. new naver.maps.ImageTile(imageTileOptions) Parameters Name Type Argument Description imageTileOptions ImageTileOptions &lt;optional&gt; 이미지 타일의 옵션 Extends naver.maps.Tile Methods appendTo(parentNode) 지정한 parentNode에 타일 HTML 요소를 추가합니다. Parameters Name Type Description parentNode HTMLElement 타일이 추가될 HTML 요소 Inherited From naver.maps.Tile#appendTo cancelFadeIn() 진행 중인 페이드 인(타일이 서서히 나타나는) 효과를 즉시 중지하고, 본래의 불투명도를 설정합니다. Inherited From naver.maps.Tile#cancelFadeIn destroy() 이미지 타일 객체를 완전히 삭제합니다. Overrides naver.maps.Tile#destroy fadeIn(callback, startOpacity) 페이드 인(타일이 서서히 나타나는) 효과를 실행합니다. Parameters Name Type Argument Default Description callback function 페이드 인 효과가 완료되었을 때 실행할 콜백 함수입니다. startOpacity number &lt;optional&gt; 0 페이드 인 효과의 시작 불투명도입니다. Inherited From naver.maps.Tile#fadeIn getDuration() 타일의 fadeIn 효과 지속시간을 반환합니다. Inherited From naver.maps.Tile#getDuration Returns Type Description number 타일의 fadeIn animation duration getElement() 타일의 HTML 요소를 반환합니다. Inherited From naver.maps.Tile#getElement Returns Type Description HTMLElement 타일의 HTML 요소 getImageElements() 타일의 모든 HTML 이미지 요소의 배열을 반환합니다. Returns Type Description Array.&lt;HTMLElement&gt; HTML 이미지 요소의 배열 getOffset() 타일의 오프셋(위치)을 반환합니다. Inherited From naver.maps.Tile#getOffset Returns Type Description naver.maps.Point 타일의 오프셋 getOpacity() 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Tile#getOpacity Returns Type Description number 0~1 사이의 실수. getSize() 타일의 크기를 반환합니다. Inherited From naver.maps.Tile#getSize Returns Type Description naver.maps.Size 타일의 크기 getTileIndex() 타일 인덱스를 반환합니다. Inherited From naver.maps.Tile#getTileIndex Returns Type Description TileIndex 타일 인덱스 getUrls() 타일에 포함된 이미지 URL의 목록을 반환합니다. Returns Type Description Array.&lt;string&gt; 이미지 URL의 배열 getZIndex() 타일의 쌓임 순서를 반환합니다. Inherited From naver.maps.Tile#getZIndex Returns Type Description number 타일의 쌓임 순서 hide() 타일을 숨깁니다. Inherited From naver.maps.Tile#hide load(imageTileOptions) 이미지 타일을 불러옵니다. Parameters Name Type Argument Description imageTileOptions ImageTileOptions &lt;optional&gt; 이미지 타일의 옵션 Overrides naver.maps.Tile#load remove() 이미지 타일의 HTML 요소를 지도상에서 삭제합니다. Overrides naver.maps.Tile#remove reset(mapType, zoom, imageTileOptions) 지정한 mapType에 맞게 타일을 재설정합니다. Parameters Name Type Argument Description mapType naver.maps.ImageMapType 재설정할 이미지 지도 유형 zoom number 타일 재설정 시 적용할 지도의 줌 레벨 imageTileOptions ImageTileOptions &lt;optional&gt; 이미지 타일의 옵션 Overrides naver.maps.Tile#reset setBlank() 이미지 타일을 투명한 공백 타일로 설정합니다. Overrides naver.maps.Tile#setBlank setDuration(duration) 타일의 fadeIn 효과 지속시간을 설정합니다. 단위는 밀리초 (millisecond), 기본값은 300~600ms 입니다. Parameters Name Type Description duration number 타일의 fadeIn animation duration Inherited From naver.maps.Tile#setDuration setOffset(offset) 타일이 표시될 오프셋(위치)을 지정합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#setOffset Overrides naver.maps.Tile#setOffset setOpacity(opacity) 타일의 불투명도를 지정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도 0~1 사이의 실수. Inherited From naver.maps.Tile#setOpacity setSize(size) 타일의 크기를 설정합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#setSize setTileIndex(tileIndex) 타일 인덱스를 설정합니다. Parameters Name Type Description tileIndex TileIndex 타일 인덱스 Inherited From naver.maps.Tile#setTileIndex setUrls(urls) 타일에 포함될 이미지 URL의 목록을 설정합니다. Parameters Name Type Description urls Array.&lt;string&gt; 이미지 URL의 배열 setZIndex(zIndex) 타일의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#setZIndex show() 타일을 보이게 합니다. Inherited From naver.maps.Tile#show Type Definitions ImageTileOptions ImageTileOptions 객체는 naver.maps.ImageTile을 정의하는 데 필요한 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description urls Array.&lt;string&gt; 한 장의 타일에 포함될 이미지 URL의 목록입니다. imgonload function &lt;optional&gt; 각 이미지가 로드되면 호출할 이벤트 핸들러입니다. imgonerror function &lt;optional&gt; 각 이미지의 로드가 실패하면 호출할 이벤트 핸들러입니다. opacity number &lt;optional&gt; 1 타일의 불투명도 transition boolean &lt;optional&gt; true 타일 로드 시 fadeIn 효과의 사용 여부입니다. duration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간입니다. (밀리초 단위) offset naver.maps.Point &lt;optional&gt; 타일의 오프셋입니다. zIndex number &lt;optional&gt; 0 타일의 쌓임 순서입니다. size naver.maps.Size &lt;optional&gt; 타일의 크기입니다. pane HTMLElement &lt;optional&gt; 타일이 추가될 HTML 요소입니다. Events loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 Inherited From naver.maps.Tile#event:loaded offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 Inherited From naver.maps.Tile#event:offset_changed opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 Inherited From naver.maps.Tile#event:opacity_changed pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 Inherited From naver.maps.Tile#event:pane_changed size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 Inherited From naver.maps.Tile#event:size_changed tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 Inherited From naver.maps.Tile#event:tileIndex_changed urls_changed 타일에 포함된 이미지 URL의 목록이 변경되면 이벤트가 발생합니다. Parameters Name Type Description urls Array.&lt;string&gt; 타일에 포함된 이미지 URL의 배열 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 Inherited From naver.maps.Tile#event:zIndex_changed × Search results Close "},"naver.maps.InfoWindow.html":{"id":"naver.maps.InfoWindow.html","title":"Class: naver.maps.InfoWindow","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API InfoWindow Class: naver.maps.InfoWindow naver.maps. InfoWindow InfoWindow 클래스는 지도 위에 올리는 정보 창을 정의합니다. new naver.maps.InfoWindow(options) Parameters Name Type Description options InfoWindowOptions 정보 창 옵션. Tutorials 정보 창 Extends naver.maps.OverlayView Methods close() 정보 창을 닫습니다. getContent() 정보 창 내부의 콘텐츠를 반환합니다. Returns Type Description HTMLElement 정보 창 콘텐츠 getOptions(key) 정보 창 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 반환받을 옵션 이름 Returns Type Description InfoWindowOptions 정보 창 옵션 getPosition() 정보 창의 위치를 반환합니다. Returns Type Description Coord 정보 창 위치 getZIndex() 정보 창의 쌓임 순서를 반환합니다. Returns Type Description number 정보 창의 쌓임 순서 open(map, anchor) 정보 창을 엽니다. 앵커를 전달하면 앵커 위에 정보 창을 엽니다. Parameters Name Type Argument Description map naver.maps.Map Map 객체 anchor Coord | CoordLiteral | naver.maps.Marker &lt;optional&gt; 정보 창이 표시될 위치. 직접 좌표를 정의하거나 naver.maps.Marker 인스턴스를 참조하도록 할 수 있습니다. 단, 마커를 참조하는 경우 마커 아이콘의 size와 anchor 옵션이 마커 생성 시에 정의되어야 올바른 위치로 표현됩니다. setContent(content) 정보 창 내부에 표시할 콘텐츠(텍스트 또는 DOM 노드 문자열)를 설정합니다. Parameters Name Type Description content string | HTMLElement 정보 창 콘텐츠 Fires content_changed setOptions(options) 정보 창 옵션을 설정합니다. 설정한 옵션만 반영됩니다. Parameters Name Type Description options InfoWindowOptions 정보 창 옵션 Fires content_changed position_changed zIndex_changed setPosition(position) 정보 창의 위치를 설정합니다. Parameters Name Type Description position Coord | CoordLiteral 정보 창 위치 Fires position_changed setZIndex(zIndex) 정보 창의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 Fires zIndex_changed Type Definitions InfoWindowOptions InfoWindowOptions 객체는 InfoWindow를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description position Coord | CoordLiteral 정보 창의 위치입니다. content string | HTMLElement 정보 창의 콘텐츠입니다. zIndex number &lt;optional&gt; 0 정보 창의 쌓임 순서입니다. maxWidth number &lt;optional&gt; 0 정보 창의 최대 너비입니다. 단위는 픽셀(px)입니다. 기본값은 0으로 최대 너비를 제한하지 않습니다. pixelOffset naver.maps.Point | PointLiteral &lt;optional&gt; 정보 창의 꼬리에서 정보 창이 위치한 지점까지의 오프셋입니다. backgroundColor string &lt;optional&gt; #fff 정보 창의 배경색입니다. CSS 색상 표현법으로 설정합니다. borderColor string &lt;optional&gt; #333 정보 창의 테두리 색상입니다. CSS 색상 표현법으로 설정합니다. borderWidth number &lt;optional&gt; 1 정보 창의 테두리 두께입니다. disableAutoPan boolean &lt;optional&gt; false 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부입니다. disableAnchor boolean &lt;optional&gt; false 기본 말풍선 꼬리의 사용 여부입니다. anchorSkew boolean &lt;optional&gt; false 기본 말풍선 꼬리의 기울임(skew) 효과 사용 여부입니다. anchorSize naver.maps.Size | SizeLiteral &lt;optional&gt; (width: 20, height: 24) 기본 말풍선 꼬리의 크기입니다. anchorColor string &lt;optional&gt; #fff 기본 말풍선 꼬리의 색상입니다. CSS 색상 표현법으로 설정합니다. Events anchorColor_changed Parameters Name Type Description anchorColor string 정보 창 말풍선 꼬리의 색상 옵션이 변경되면 이벤트가 발생합니다. anchorSize_changed Parameters Name Type Description anchorSize naver.maps.Size 정보 창 말풍선 꼬리 크기 옵션이 변경되면 이벤트가 발생합니다. anchorSkew_changed Parameters Name Type Description anchorSkew boolean 정보 창 말풍선 꼬리의 기울임(skew) 효과 사용 여부 옵션이 변경되면 이벤트가 발생합니다. backgroundColor_changed Parameters Name Type Description backgroundColor string 정보 창의 배경색 옵션이 변경되면 이벤트가 발생합니다. borderColor_changed Parameters Name Type Description borderColor string 정보 창의 테두리 색상 옵션이 변경되면 이벤트가 발생합니다. borderWidth_changed Parameters Name Type Description borderWidth number 정보 창의 테두리 너비 옵션이 변경되면 이벤트가 발생합니다. close 정보 창이 닫히면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 content_changed Parameters Name Type Description content HTMLElement 정보 창의 콘텐츠 옵션이 변경되면 이벤트가 발생합니다. disableAnchor_changed Parameters Name Type Description disableAnchor boolean 정보 창의 말풍선 꼬리의 사용 여부 옵션이 변경되면 이벤트가 발생합니다. disableAutoPan_changed Parameters Name Type Description disableAutoPan boolean 정보 창을 열 때 정보 창 전체를 보여줄 수 있는 자동 이동(패닝) 사용 여부 옵션이 변경되면 이벤트가 발생합니다. maxWidth_changed Parameters Name Type Description maxWidth number 정보 창의 최대 너비 옵션이 변경되면 이벤트가 발생합니다. open 정보 창이 열리면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pixelOffset_changed Parameters Name Type Description pixelOffset naver.maps.Point 정보 창의 말풍선 꼬리에서 정보 창이 위치한 지점까지의 오프셋 옵션이 변경되면 이벤트가 발생합니다. position_changed Parameters Name Type Description position Coord 정보 창의 위치 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 정보 창의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.KVO.html":{"id":"naver.maps.KVO.html","title":"Class: naver.maps.KVO","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVO Class: naver.maps.KVO naver.maps. KVO KVO 클래스는 KVO(Key-Value Observing) 패턴을 정의하는 클래스입니다. 이 클래스는 Event의 구현 일부를 상속받으며, NAVER 지도 API v3의 주요 클래스는 이 클래스를 상속받아 구현되었습니다. NAVER 지도 API v3 사용자는 이 클래스를 이용해 KVO 패턴을 동일하게 사용할 수 있습니다. new naver.maps.KVO() Tutorials KVO 상태 변경 알림 Methods addListener(eventName, listener) 현재 객체의 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 이 메서드는 Event의 addListener 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 listener function 이벤트 리스너 Returns Type Description MapEventListener 지도 이벤트 리스너 객체 addListenerOnce(eventName, listener) 현재 객체에서 한 번만 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 이 메서드는 Event의 once 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 listener function 이벤트 리스너 Returns Type Description MapEventListener 지도 이벤트 리스너 객체 bindTo(key, target, targetKey) 대상 객체(target)의 대상 키(targetKey)에 자신의 키(key)를 바인딩합니다. 따라서 대상 객체의 대상 키의 값이 변경되면 자신의 키의 값 역시 갱신됩니다. 즉, 대상 객체에서 사용하는 대상 키에 바인딩하면서 자신만의 키 이름을 설정할 때 사용할 수 있습니다. 대상 키가 없으면 동일한 키 이름을 사용합니다. Parameters Name Type Argument Description key string 키 target naver.maps.KVO 대상 객체 targetKey string &lt;optional&gt; 대상 객체에 존재하는 키 Fires {key}_changed clearListeners(eventName) 현재 객체에서 특정 이벤트 알림의 리스너를 모두 제거합니다. 이 메서드는 Event의 clearListeners 메서드를 상속받습니다. Parameters Name Type Description eventName string 모두 제거할 이벤트의 이름 get(key) 키에 해당하는 값을 반환합니다. Parameters Name Type Description key string 키 Returns Type Description any 키에 할당되어 있는 값 hasListener(eventName) 현재 객체에 이벤트 알림이 등록되었는지 여부를 확인합니다. 이 메서드는 Event의 hasListener 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 Returns Type Description boolean 등록 여부 removeListener(listeners) 특정 이벤트 알림의 리스너를 제거합니다. 이 메서드는 Event의 removeListener 메서드를 상속받습니다. Parameters Name Type Description listeners MapEventListener | Array.&lt;MapEventListener&gt; 제거할 리스너 객체 또는 리스너 객체의 배열 set(key, value, silently) 키(key)에 해당하는 값을 객체에 설정합니다. 값이 설정되면 해당 객체의 키를 바인딩하고 있는 모든 KVO 객체에 동일한 값이 적용됩니다. 또한, {key}_changed 형태의 이벤트를 이용해 값의 변경을 감지할 수 있습니다. Parameters Name Type Argument Description key string 키 value any 키에 저장할 값 silently boolean &lt;optional&gt; 묵시적으로 값을 설정할지 여부. 이 값이 true이면 이벤트를 발생시키지 않습니다. Fires {key}_changed setValues(properties) 키-값 쌍 형태로 동시에 여러 개의 값을 설정합니다. Parameters Name Type Description properties object 설정할 키-값 쌍의 객체 Fires {key}_changed trigger(eventName, eventObject) 현재 객체에 이벤트 알림을 발생시킵니다. 이 메서드는 Event의 trigger 메서드를 상속받습니다. Parameters Name Type Argument Description eventName string 이벤트 이름 eventObject any &lt;optional&gt; &lt;repeatable&gt; 이벤트 리스너에 전달할 이벤트 객체 unbind(key) 해당 키의 바인딩을 제거합니다. Parameters Name Type Description key string 제거할 키 unbindAll() 모든 바인딩을 제거합니다. Events {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 × Search results Close "},"naver.maps.KVOArray.html":{"id":"naver.maps.KVOArray.html","title":"Class: naver.maps.KVOArray","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVOArray Class: naver.maps.KVOArray naver.maps. KVOArray KVOArray 클래스는 배열 형태의 KVO를 정의합니다. 따라서 배열 요소의 값이 변경되면 알려줍니다. new naver.maps.KVOArray(array) Parameters Name Type Description array array KVOArray로 사용할 배열 Tutorials KVO 상태 변경 알림 Extends naver.maps.KVO Methods addListener(eventName, listener) 현재 객체의 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 이 메서드는 Event의 addListener 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 listener function 이벤트 리스너 Inherited From naver.maps.KVO#addListener Returns Type Description MapEventListener 지도 이벤트 리스너 객체 addListenerOnce(eventName, listener) 현재 객체에서 한 번만 이벤트 알림을 받아 핸들러를 호출하는 리스너를 등록합니다. 이 메서드는 Event의 once 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 listener function 이벤트 리스너 Inherited From naver.maps.KVO#addListenerOnce Returns Type Description MapEventListener 지도 이벤트 리스너 객체 bindTo(key, target, targetKey) 대상 객체(target)의 대상 키(targetKey)에 자신의 키(key)를 바인딩합니다. 따라서 대상 객체의 대상 키의 값이 변경되면 자신의 키의 값 역시 갱신됩니다. 즉, 대상 객체에서 사용하는 대상 키에 바인딩하면서 자신만의 키 이름을 설정할 때 사용할 수 있습니다. 대상 키가 없으면 동일한 키 이름을 사용합니다. Parameters Name Type Argument Description key string 키 target naver.maps.KVO 대상 객체 targetKey string &lt;optional&gt; 대상 객체에 존재하는 키 Inherited From naver.maps.KVO#bindTo Fires {key}_changed clear() 모든 요소를 삭제합니다. 이 메서드는 remove_at 이벤트를 발생시킵니다. clearListeners(eventName) 현재 객체에서 특정 이벤트 알림의 리스너를 모두 제거합니다. 이 메서드는 Event의 clearListeners 메서드를 상속받습니다. Parameters Name Type Description eventName string 모두 제거할 이벤트의 이름 Inherited From naver.maps.KVO#clearListeners forEach(callback) 배열의 전체 요소를 순회하며 콜백 함수를 실행합니다. Parameters Name Type Description callback function 순회 시 실행할 콜백 함수 Properties Name Type Description element any 요소 index number 요소의 인덱스 get(key) 키에 해당하는 값을 반환합니다. Parameters Name Type Description key string 키 Inherited From naver.maps.KVO#get Returns Type Description any 키에 할당되어 있는 값 getArray() 원본 배열 객체를 반환합니다. Returns Type Description array 원본 배열 getAt(index) 특정 인덱스의 요소를 반환합니다. Parameters Name Type Description index number 인덱스 Returns Type Description any 해당 인덱스의 요소 getIndexOfElement(element) 특정 요소의 인덱스를 반환합니다. Parameters Name Type Description element any 인덱스를 검색할 요소 Returns Type Description number 해당 요소의 인덱스 getLength() 배열의 전체 길이를 반환합니다. Returns Type Description number 배열의 전체 길이 hasListener(eventName) 현재 객체에 이벤트 알림이 등록되었는지 여부를 확인합니다. 이 메서드는 Event의 hasListener 메서드를 상속받습니다. Parameters Name Type Description eventName string 이벤트 이름 Inherited From naver.maps.KVO#hasListener Returns Type Description boolean 등록 여부 insertAt(index, element) 특정 인덱스에 요소를 삽입합니다. 이 메서드는 insert_at 이벤트를 발생시킵니다. Parameters Name Type Description index number 배열의 인덱스. 이 값이 음수이면 \"index number should be positive\" 오류가 발생합니다. element any 삽입할 요소의 값 pop() 배열의 마지막 요소를 삭제하고, 삭제된 요소를 반환합니다. 이 메서드는 remove_at 이벤트를 발생시킵니다. 이 메서드는 JavaScript 배열의 pop 메서드를 구현합니다. Returns Type Description any 삭제된 요소 push(element) 배열의 마지막에 요소를 추가합니다. 이 메서드는 insert_at 이벤트를 발생시킵니다. 이 메서드는 JavaScript 배열의 push 메서드를 구현합니다. Parameters Name Type Description element any 추가할 요소 Returns Type Description number 배열의 전체 길이 removeAt(index) 특정 인덱스의 요소를 삭제하고, 삭제된 요소를 반환합니다. 이 메서드는 remove_at 이벤트를 발생시킵니다. Parameters Name Type Description index number 배열의 인덱스. 이 값이 음수이면, \"index number should be positive\" 오류가 발생합니다. Returns Type Description any 삭제된 요소의 값 removeElement(element) 특정 요소를 삭제합니다. Parameters Name Type Description element any 삭제할 요소 removeListener(listeners) 특정 이벤트 알림의 리스너를 제거합니다. 이 메서드는 Event의 removeListener 메서드를 상속받습니다. Parameters Name Type Description listeners MapEventListener | Array.&lt;MapEventListener&gt; 제거할 리스너 객체 또는 리스너 객체의 배열 Inherited From naver.maps.KVO#removeListener set(key, value, silently) 키(key)에 해당하는 값을 객체에 설정합니다. 값이 설정되면 해당 객체의 키를 바인딩하고 있는 모든 KVO 객체에 동일한 값이 적용됩니다. 또한, {key}_changed 형태의 이벤트를 이용해 값의 변경을 감지할 수 있습니다. Parameters Name Type Argument Description key string 키 value any 키에 저장할 값 silently boolean &lt;optional&gt; 묵시적으로 값을 설정할지 여부. 이 값이 true이면 이벤트를 발생시키지 않습니다. Inherited From naver.maps.KVO#set Fires {key}_changed setAt(index, element) 특정 인덱스에 요소를 설정합니다. Parameters Name Type Description index number 배열의 인덱스. 이 값이 현재 배열 length-1보다 크면 insertAt을 호출합니다. element any 설정할 요소의 값 Fires set_at insert_at setValues(properties) 키-값 쌍 형태로 동시에 여러 개의 값을 설정합니다. Parameters Name Type Description properties object 설정할 키-값 쌍의 객체 Inherited From naver.maps.KVO#setValues Fires {key}_changed splice(startIndex, deleteCount, element) startIndex로부터 deleteCount만큼의 요소를 삭제하고, 신규 요소를 삽입합니다. 삭제한 요소가 존재한다면 삭제된 요소들의 배열을 반환합니다. 이 메서드는 JavaScript 배열의 splice 메서드를 구현합니다. Parameters Name Type Argument Default Description startIndex number 시작 인덱스 deleteCount number 0 시작 인덱스로부터 삭제할 요소의 개수 element any &lt;optional&gt; &lt;repeatable&gt; 시작 인덱스에 삽입할 새로운 요소 Returns Type Description Array.&lt;any&gt; 삭제된 요소의 배열 trigger(eventName, eventObject) 현재 객체에 이벤트 알림을 발생시킵니다. 이 메서드는 Event의 trigger 메서드를 상속받습니다. Parameters Name Type Argument Description eventName string 이벤트 이름 eventObject any &lt;optional&gt; &lt;repeatable&gt; 이벤트 리스너에 전달할 이벤트 객체 Inherited From naver.maps.KVO#trigger unbind(key) 해당 키의 바인딩을 제거합니다. Parameters Name Type Description key string 제거할 키 Inherited From naver.maps.KVO#unbind unbindAll() 모든 바인딩을 제거합니다. Inherited From naver.maps.KVO#unbindAll Events insert_at 새로운 요소가 추가되면 이벤트가 발생합니다. 추가된 요소의 인덱스와 요소가 인수로 전달됩니다. Parameters Name Type Description index number 삽입된 요소의 인덱스 element any 삽입된 요소 remove_at 기존의 요소가 삭제되면 이벤트가 발생합니다. 삭제된 요소와 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 삭제된 요소의 인덱스 element any 삭제된 요소 set_at 기존의 요소가 변경되면 이벤트가 발생합니다. 기존 요소(변경되어 삭제된)와 변경된 인덱스가 인수로 전달됩니다. Parameters Name Type Description index number 인덱스 element any 삭제된 요소 {key}_changed 특정 key의 값이 변경되면 {key}_changed 이벤트가 발생합니다. Parameters Name Type Description value any 해당 키의 변경된 값 Inherited From naver.maps.KVO#event:{key}_changed × Search results Close "},"naver.maps.LabelLayer.html":{"id":"naver.maps.LabelLayer.html","title":"Class: naver.maps.LabelLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API LabelLayer Class: naver.maps.LabelLayer naver.maps. LabelLayer LabelLayer 클래스는 주기를 나타내는 레이어를 정의합니다. NAVER 지도 API v3에서 제공하는 여러 레이어의 타일 이미지를 요청할 때, 주기가 있는 타일을 요청하도록 합니다. new naver.maps.LabelLayer(name, registry, option) Parameters Name Type Description name string 레이어의 이름 registry naver.maps.ImageMapType 이미지 지도 유형 option object 레이어의 옵션 (Deprecated) Tutorials 레이어 See naver.maps.BicycleLayer naver.maps.CadastralLayer naver.maps.StreetLayer naver.maps.TrafficLayer Extends naver.maps.Layer Methods getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity × Search results Close "},"naver.maps.LatLng.html":{"id":"naver.maps.LatLng.html","title":"Class: naver.maps.LatLng","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API LatLng Class: naver.maps.LatLng naver.maps. LatLng LatLng 클래스는 위/경도 좌표를 정의합니다. add, sub, mul, div, round, floor 메서드는 LatLng 클래스에서는 사용할 수 없습니다. new naver.maps.LatLng(lat, lng) Parameters Name Type Default Description lat number 0 위도 lng number 0 경도 Extends naver.maps.Point Methods clone() 객체의 복제본을 반환합니다. Overrides naver.maps.Point#clone Returns Type Description naver.maps.LatLng 복제된 객체 destinationPoint(angle, meter) 현재 좌표에서 북쪽을 기준으로 지정한 각도(시계 방향)와 거리만큼 떨어진 위치의 지도 좌표를 반환합니다. Parameters Name Type Description angle number 현재의 좌표에서 북쪽을 기준으로 한 시계 방향의 각도(0-북, 90-동, 180-남, 270-서). 이 값이 0이면 현재의 좌표에서 북쪽을 가리키며, 90이면 동쪽을 가리킵니다. meter number 현재의 좌표에서 구하려는 좌표까지의 거리(미터) Returns Type Description naver.maps.LatLng 새로운 지도 좌표 equals(point) 객체의 좌표와 지정한 좌표가 같은지 여부를 확인합니다. Parameters Name Type Description point Coord | LatLngLiteral 비교할 좌표 객체 Overrides naver.maps.Point#equals Returns Type Description boolean 동일 여부 lat() -90~90도의 위도를 반환합니다. Returns Type Description number 위도 lng() -180~180의 경도를 반환합니다. Returns Type Description number 경도 toPoint() 현재 객체를 naver.maps.Point로 변환한 객체를 반환합니다. Returns Type Description naver.maps.Point 변환된 객체 toString() 객체의 좌표를 문자열로 반환합니다. Overrides naver.maps.Point#toString Returns Type Description string 위/경도 좌표를 나타내는 문자열로 형식은 (lat:{위도},lng:{경도})입니다. Example var latlng = new naver.map.LatLng(37.5666103, 126.9783882); latlng.toString(); // '(lat:37.5666103,lng:126.9783882)' × Search results Close "},"naver.maps.LatLngBounds.html":{"id":"naver.maps.LatLngBounds.html","title":"Class: naver.maps.LatLngBounds","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API LatLngBounds Class: naver.maps.LatLngBounds naver.maps. LatLngBounds LatLngBounds 클래스는 남서쪽과 북동쪽의 위/경도 좌표가 설정돼 있는 직사각형의 지리적 영역(이하 좌표 경계)을 정의합니다. new naver.maps.LatLngBounds(sw, ne) Parameters Name Type Description sw naver.maps.LatLng 남서쪽의 위/경도 좌표 ne naver.maps.LatLng 북동쪽의 위/경도 좌표 Extends naver.maps.PointBounds Methods &lt;static&gt; bounds(latlng, latlngN) 두 개 이상의 위/경도 좌표 중 남서/북동쪽의 좌표를 선정하여 새로운 LatLngBounds 객체를 반환하는 팩토리 메서드입니다. Parameters Name Type Argument Description latlng Coord | LatLngLiteral 좌표 객체 latlngN Coord | LatLngLiteral &lt;repeatable&gt; 위/경도 좌표 객체 Returns Type Description naver.maps.LatLngBounds 위/경도 좌표 경계 clone() 객체의 복제본을 반환합니다. Overrides naver.maps.PointBounds#clone Returns Type Description naver.maps.LatLngBounds 복제된 객체 east() 동쪽의 경도를 반환합니다. Returns Type Description number 동쪽의 경도 equals(bounds) 객체의 좌표 경계와 지정한 좌표 경계가 같은지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | LatLngBoundsLiteral 비교할 좌표 경계 객체 Overrides naver.maps.PointBounds#equals Returns Type Description boolean 동일 여부 extend(latlng) 객체의 좌표 경계에 지정한 좌표가 들어가도록 좌표 경계를 확장합니다. Parameters Name Type Description latlng Coord | LatLngLiteral 확장할 위/경도 좌표 Overrides naver.maps.PointBounds#extend Returns Type Description naver.maps.LatLngBounds this getCenter() 좌표 경계의 중심 좌표를 반환합니다. Overrides naver.maps.PointBounds#getCenter Returns Type Description naver.maps.LatLng 좌표 경계의 중심 좌표 getMax() 좌표 경계의 최대 좌표를 반환합니다. Inherited From naver.maps.PointBounds#getMax Returns Type Description naver.maps.Point 최대 좌표 getMin() 좌표 경계의 최소 좌표를 반환합니다. Inherited From naver.maps.PointBounds#getMin Returns Type Description naver.maps.Point 최소 좌표 getNE() 좌표 경계의 최대 좌표인 북동쪽의 위/경도 좌표를 반환합니다. Returns Type Description naver.maps.LatLng 북동쪽의 위/경도 좌표 getSW() 좌표 경계의 최소 좌표인 남서쪽의 위/경도 좌표를 반환합니다. Returns Type Description naver.maps.LatLng 남서쪽의 위/경도 좌표 hasBounds(bounds) 객체의 좌표 경계가 지정한 좌표 경계를 포함하는지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 확인할 좌표 경계 객체 Inherited From naver.maps.PointBounds#hasBounds Returns Type Description boolean 포함 여부 hasLatLng(latlng) 객체의 좌표 경계 내에 지정한 좌표가 있는지 여부를 확인합니다. Parameters Name Type Description latlng Coord | LatLngLiteral 확인할 좌표 객체 Returns Type Description Boolean 포함 여부 intersects(bounds) 객체의 좌표 경계가 지정한 좌표 경계와 겹치는 부분이 있는지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | LatLngBoundsLiteral 확인할 좌표 경계 객체 Overrides naver.maps.PointBounds#intersects Returns Type Description boolean 겹침 여부 maxX() 최대 좌표의 x 좌표를 반환합니다. Inherited From naver.maps.PointBounds#maxX Overrides naver.maps.PointBounds#maxX Returns Type Description number x 좌표 maxY() 최대 좌표의 y 좌표를 반환합니다. Inherited From naver.maps.PointBounds#maxY Overrides naver.maps.PointBounds#maxY Returns Type Description number y 좌표 minX() 최소 좌표의 x 좌표를 반환합니다. Inherited From naver.maps.PointBounds#minX Overrides naver.maps.PointBounds#minX Returns Type Description number x 좌표 minY() 최소 좌표의 y 좌표를 반환합니다. Inherited From naver.maps.PointBounds#minY Overrides naver.maps.PointBounds#minY Returns Type Description number y 좌표 north() 북쪽의 위도를 반환합니다. Returns Type Description number 북쪽의 위도 south() 남쪽의 위도를 반환합니다. Returns Type Description number 남쪽의 위도 toPointBounds() 현재 객체를 naver.maps.PointBounds 로 변환한 객체를 반환합니다. Returns Type Description naver.maps.PointBounds 변환된 객체 toString() 객체의 좌표 경계를 문자열로 반환합니다. Inherited From naver.maps.PointBounds#toString Returns Type Description string 좌표 경계를 나타내는 문자열로 형식은 (({minX},{minY}),({maxX},{maxY}))입니다. Example var bounds = new naver.map.PointBounds( new naver.maps.Point(0, 0), new naver.maps.Point(256, 256)); bounds.toString(); // '((0,0),(256,256))' union(bounds) 객체의 좌표 경계와 지정한 좌표 경계를 모두 포함하는 새로운 좌표 경계 객체를 반환합니다. Parameters Name Type Description bounds Bounds | LatLngBoundsLiteral 확장할 위/경도 좌표 경계 Overrides naver.maps.PointBounds#union Returns Type Description naver.maps.LatLngBounds 확장된 새로운 위/경도 좌표 경계 객체 west() 서쪽의 경도를 반환합니다. Returns Type Description number 서쪽의 경도 × Search results Close "},"naver.maps.Layer.html":{"id":"naver.maps.Layer.html","title":"Class: naver.maps.Layer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Layer Class: naver.maps.Layer naver.maps. Layer Layer 클래스는 지도 위에 올리는 레이어의 기본 클래스입니다. NAVER 지도 API v3에서 제공하는 모든 레이어(자전거, 교통 상황 지도 등)는 이 클래스를 상속받아 구현했습니다. API에서 기본적으로 제공하는 레이어 외에 지도 유형과 마찬가지로 사용자 정의 레이어를 만들 수 있습니다. 자세한 설명은 레이어 튜토리얼을 참고합니다. new naver.maps.Layer(name, MapTypeRegistry, options) 지정한 이름과 지도 유형 컬렉션을 사용하는 레이어 객체를 생성합니다. Parameters Name Type Description name string 레이어 이름 MapTypeRegistry naver.maps.MapTypeRegistry 지도 유형의 컬렉션 options LayerOptions 레이어 옵션 Tutorials 레이어 Extends naver.maps.KVO Methods getLayerType() 레이어의 지도 유형을 반환합니다. Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Type Definitions LayerOptions LayerOptions 객체는 Layer를 정의하는 옵션을 나타냅니다. (기본 지도 타일과 합쳐서 표현하는 방법으로 변경되어 옵션을 지원하지 않습니다. 곧 문서에서 제거될 예정입니다.) Type: object Properties Name Type Default Description hd boolean false 고해상도 이미지 타일의 사용 여부입니다. overlayMap boolean false 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex 값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. zIndex number 0 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. × Search results Close "},"naver.maps.LogoControl.html":{"id":"naver.maps.LogoControl.html","title":"Class: naver.maps.LogoControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API LogoControl Class: naver.maps.LogoControl naver.maps. LogoControl LogoControl 클래스는 NAVER 로고 컨트롤을 정의합니다. new naver.maps.LogoControl(LogoControlOptions) Parameters Name Type Description LogoControlOptions LogoControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { logoControl: true }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions LogoControlOptions LogoControlOptions 객체는 NAVER 로고 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position BOTTOM_RIGHT NAVER 로고 컨트롤을 배치할 위치입니다. × Search results Close "},"naver.maps.Map.html":{"id":"naver.maps.Map.html","title":"Class: naver.maps.Map","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Map Class: naver.maps.Map naver.maps. Map Map 클래스는 애플리케이션에서 지도 인스턴스를 정의합니다. 이 객체를 생성함으로써 개발자는 지정한 DOM 요소에 지도를 삽입할 수 있습니다. new naver.maps.Map(mapDiv, mapOptions) Parameters Name Type Description mapDiv string | HTMLElement 지도를 삽입할 HTML 요소 또는 HTML 요소의 id mapOptions naver.maps.MapOptions 지도의 옵션 객체 Properties Name Type Description controls naver.maps.KVOArray 사전에 정의된 지도 내의 위치별로 지도 컨트롤의 인스턴스를 포함하는 객체입니다. 사용자 정의 컨트롤을 이 속성 내 특정 위치에 추가함으로써 사용자 정의 컨트롤을 지도에 추가할 수 있습니다. data naver.maps.Data 데이터 레이어를 정의하는 Data 객체입니다. layers LayerRegistry 지도 레이어의 컬렉션을 포함하는 객체입니다. mapTypes naver.maps.MapTypeRegistry 지도 유형의 컬렉션을 포함하는 객체입니다. mapSystemProjection naver.maps.MapSystemProjection 프로젝션 객체입니다. 지도 좌표와 세계 좌표, 화면 픽셀 좌표 간 좌표를 변환할 수 있는 메서드를 제공합니다. Tutorials 지도 생성 및 기본 동작 Extends naver.maps.KVO Methods addPane(name, elementOrZIndex) 사용자 정의 창(pane)을 추가합니다. Parameters Name Type Description name string 창의 이름 elementOrZIndex HTMLElement | number 창 HTML 요소 또는 zIndex값 autoResize() 지도 화면의 크기를 자동으로 재설정합니다. 단, 지도 DOM 요소의 CSS 크기에 따라 지도 크기가 자동으로 조정될 때만 동작합니다. Fires size_changed bounds_changed destroy() 모든 이벤트 및 DOM 요소를 포함한 지도를 안전하게 제거합니다. fitBounds(bounds, FitBoundsOptions) 지정한 좌표 경계를 포함하는 위치로 지도를 이동합니다. 지도 좌표의 배열을 지정하면 좌표 경계를 판단하여 지도를 이동합니다. Parameters Name Type Argument Description bounds Bounds | BoundsLiteral | ArrayOfCoords | ArrayOfCoordsLiteral 좌표 경계 또는 좌표의 배열 FitBoundsOptions FitBoundsOptions &lt;optional&gt; 좌표 경계를 확장하기 위한 값. { top: 10, right: 10, bottom: 10, left: 10, maxZoom: 10 } 형태로 좌표 경계를 확장하기 위한 픽셀 단위의 여백값입니다. Fires center_changed centerPoint_changed zoom_changed bounds_changed idle getBounds() 지도 화면의 좌표 경계를 반환합니다. Returns Type Description Bounds 현재 지도의 좌표 경계 getCenter() 지도의 중심 좌표를 반환합니다. Returns Type Description Coord 지도의 중심 좌표 getCenterPoint() 지도의 중심 좌표를 세계 좌표로 변환한 결과를 반환합니다. Returns Type Description Coord 지도의 중심 세계 좌표 getElement() 지도의 HTML 요소를 반환합니다. Returns Type Description HTMLElement 현재 지도의 HTML 요소 getMapTypeId() 현재 지도 유형의 id를 반환합니다. Returns Type Description string 지도 유형의 id getMaxZoom() 지도의 최대 줌 레벨을 반환합니다. Returns Type Description number 지도의 최대 줌 레벨 getMinZoom() 지도의 최소 줌 레벨을 반환합니다. Returns Type Description number 지도의 최소 줌 레벨 getOptions(key) 지도의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 getPanes() 오버레이 요소를 추가할 수 있는 지도의 창 요소의 집합을 객체로 반환합니다. Returns Type Description MapPanes 창 요소의 집합 객체 getPrimitiveProjection() 지도 유형의 투영(projection)을 반환합니다. Returns Type Description naver.maps.Projection 지도 유형의 원본 투영 객체 getProjection() 지도의 투영을 반환합니다. Returns Type Description naver.maps.MapSystemProjection 지도 투영 객체 getSize() 지도 화면의 크기를 반환합니다. Returns Type Description naver.maps.Size 지도의 크기 getZoom() 지도의 줌 레벨을 반환합니다. Returns Type Description number 지도의 줌 레벨 morph(coord, zoom, transitionOptions) 지정한 좌표와 줌 레벨을 사용하는 새로운 위치로 지도를 이동합니다. 이때, 이동 거리가 가깝다면 부드럽게 이동합니다. Parameters Name Type Argument Description coord Coord | CoordLiteral 이동할 중심 좌표 zoom number &lt;optional&gt; 이동할 줌 레벨 transitionOptions TransitionOptions &lt;optional&gt; 이동 효과에 사용할 옵션 Fires zooming center_changed centerPoint_changed zoom_changed bounds_changed idle panBy(offset) 지정한 픽셀 좌표만큼 지도를 이동합니다. Parameters Name Type Description offset naver.maps.Point | PointLiteral 이동할 픽셀 좌표 Fires center_changed centerPoint_changed bounds_changed idle panTo(coord, transitionOptions) 지정한 좌표를 중심점으로 지도를 이동합니다. 이때, 이동 거리가 가깝다면 부드럽게 이동합니다. Parameters Name Type Description coord Coord | CoordLiteral 중심 좌표 transitionOptions TransitionOptions 이동 효과에 사용할 옵션 Fires panning center_changed centerPoint_changed bounds_changed idle panToBounds(bounds, transitionOptions, margin) 지정한 좌표 경계를 포함하는 위치로 지도를 부드럽게 이동합니다. Parameters Name Type Argument Description bounds Bounds | BoundsLiteral 좌표 경계 transitionOptions TransitionOptions 이동 효과에 사용할 옵션 margin margin &lt;optional&gt; 좌표 경계를 확장하기 위한 값. { top: 10, right: 10, bottom: 10, left: 10 } 형태로 좌표 경계를 확장하기 위한 픽셀 단위의 여백값입니다. Fires zooming center_changed centerPoint_changed zoom_changed bounds_changed idle refresh(noEffect) 지도를 새로 고칩니다. Parameters Name Type Argument Default Description noEffect boolean &lt;optional&gt; false 지도를 새로 고칠 때 페이드 인(fade in) 효과 적용 여부 Fires projection_changed idle removePane(name) 지정한 창을 지도에서 제거합니다. Parameters Name Type Description name string 창의 이름 setCenter(center) 지정한 좌표로 지도의 중심점을 설정합니다. Parameters Name Type Description center Coord | CoordLiteral 지도의 중심 좌표 Fires center_changed centerPoint_changed bounds_changed idle setCenterPoint(point) 지정한 세계 좌표로 지도의 중심점을 설정합니다. Parameters Name Type Description point naver.maps.Point | PointLiteral 지도의 중심 세계 좌표 Fires center_changed centerPoint_changed bounds_changed idle setMapTypeId(mapTypeId) 지도 유형을 지정한 id로 설정합니다. Parameters Name Type Description mapTypeId string 지도 유형의 id Fires mapType_changed mapTypeId_changed projection_changed setOptions(newOptionsOrKey, value) 지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Argument Description newOptionsOrKey object | string 지도의 옵션 객체 또는 특정 옵션의 이름 value any &lt;optional&gt; 옵션의 값 setSize(size) 지도 화면의 크기를 픽셀 단위로 설정합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 픽셀 단위의 지도 크기 Fires size_changed bounds_changed setZoom(zoom, effect) 지도의 줌 레벨을 설정합니다. Parameters Name Type Argument Default Description zoom number 지도의 줌 레벨 effect boolean &lt;optional&gt; false 줌 레벨 변경 시 효과 적용 여부 Fires center_changed centerPoint_changed zoom_changed bounds_changed zooming idle updateBy(coord, zoom) 지정한 좌표와 줌 레벨을 사용하는 새로운 위치로 지도를 즉시 이동합니다. Parameters Name Type Description coord Coord | CoordLiteral 중심 좌표 zoom number 줌 레벨 Fires center_changed centerPoint_changed zoom_changed bounds_changed idle zoomBy(deltaZoom, zoomOrigin, effect) 지도의 줌 레벨을 상대 값으로 설정합니다. zoomOrigin을 설정하면 줌 레벨 변경 시 해당 지도 좌표의 위치가 고정됩니다. Parameters Name Type Argument Default Description deltaZoom number 지도의 상대 줌 레벨 zoomOrigin Coord | CoordLiteral &lt;optional&gt; center 줌 변경 시 고정할 지도 좌표입니다. effect boolean &lt;optional&gt; false 줌 레벨 변경 시 효과 적용 여부 Fires center_changed centerPoint_changed zoom_changed bounds_changed zooming idle Type Definitions MapOptions MapOptions 객체는 지도를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description background string 지도 요소의 배경으로 사용할 이미지 URL 또는 CSS 색상값입니다. baseTileOpacity number 지도 기본 타일의 불투명도를 설정합니다. 값의 범위는 0~1이며, 기본값은 1입니다. bounds Bounds | BoundsLiteral null 지도의 초기 좌표 경계입니다. 이 값을 설정하면 지도 옵션 중 center와 zoom 옵션을 무시하고, 지정한 좌표 경계에 맞게 지도를 생성합니다. center Coord | CoordLiteral 서울시청 지도의 초기 중심 좌표입니다. 기본값은 서울 시청 좌표(37.5666103, 126.9783882)입니다. disableDoubleClickZoom boolean false 사용자가 지도 위에서 마우스 버튼을 더블 클릭해 지도를 확대하는 기능의 사용 여부입니다. disableDoubleTapZoom boolean false 사용자가 지도 위에서 한 손가락으로 더블 탭해 지도를 확대하는 기능의 사용 여부입니다. disableKineticPan boolean true 사용자가 지도를 드래그했을 때 관성 효과(사용자가 동작을 끝낸 후에도 계속되는 지도의 움직임)의 사용 여부입니다. disableTwoFingerTapZoom boolean false 사용자가 지도 위에서 두 손가락으로 두 번 탭해 지도를 축소하는 기능의 사용 여부입니다. draggable boolean true 마우스 또는 손가락을 이용한 지도 이동(패닝) 허용 여부입니다. keyboardShortcuts boolean true 키보드 방향 키를 이용한 지도 이동(패닝) 허용 여부입니다. logoControl boolean true NAVER 로고 컨트롤의 표시 여부입니다. (항상 노출로 변경) logoControlOptions LogoControlOptions NAVER 로고 컨트롤의 옵션입니다. mapDataControl boolean true 지도 데이터 저작권 컨트롤의 표시 여부입니다. mapDataControlOptions MapDataControlOptions 지도 데이터 저작권 컨트롤의 옵션입니다. mapTypeControl boolean false 지도 유형 컨트롤의 표시 여부입니다. mapTypeControlOptions MapTypeControlOptions 지도 유형 컨트롤의 옵션입니다. mapTypeId string NORMAL 지도의 초기 지도 유형 id입니다. mapTypes naver.maps.MapTypeRegistry 지도 유형의 컬렉션을 포함하는 객체입니다. 이 값을 설정하지 않으면 사전에 정의된 NAVER 지도의 기본 지도 유형으로 설정합니다. maxBounds Bounds | BoundsLiteral null 지도에서 보이는 최대 좌표 경계입니다. 지도의 중심 좌표는 지정한 최대 좌표 경계 내에서만 설정할 수 있습니다. maxZoom number 지도의 최대 줌 레벨입니다. 이 값을 설정하지 않으면 지정된 초기 지도 유형의 최고 줌 레벨로 설정합니다. minZoom number 지도의 최소 줌 레벨입니다. 이 값을 설정하지 않으면 지정된 초기 지도 유형의 최저 줌 레벨로 설정합니다. padding padding 지도 뷰포트의 안쪽 여백(패딩)입니다. 단위는 화면 픽셀이며, 기본값은 {top: 0, right: 0, bottom: 0, left: 0}입니다. pinchZoom boolean true 핀치 제스처를 이용한 지도 확대/축소 허용 여부입니다. resizeOrigin naver.maps.Position CENTER 지도 크기 조정 시 고정할 원점입니다. scaleControl boolean true 지도 축척 컨트롤의 표시 여부입니다. scaleControlOptions ScaleControlOptions 지도 축척 컨트롤의 옵션입니다. scrollWheel boolean true 마우스 스크롤 휠을 이용한 지도 확대/축소 허용 여부입니다. size naver.maps.Size | SizeLiteral 지도의 초기 크기입니다. 이 값을 설정하지 않으면, 지도 DOM 요소의 CSS 크기에 따라 지도 크기가 자동으로 조정됩니다. overlayZoomEffect null | string null 도형, 마커 등 오버레이의 줌 효과 적용 대상입니다. 적용할 대상의 창(pane) 이름을 문자열로 지정합니다. 이 값이 all이면 모든 오버레이에 줌 효과가 적용됩니다. 오버레이의 개수가 많을 때는 성능에 영향을 줄 수 있으므로 주의해 사용해야 합니다. tileSpare number 0 지도의 크기보다 보다 여유있게 로딩할 타일의 개수를 지정합니다. tileTransition boolean true 지도 타일을 전환할 때 페이드 인 효과(타일이 서서히 나타나는 것)의 사용 여부입니다. tileDuration number 지도 타일을 전환할 때 페이드 인 효과(타일이 서서히 나타나는 것)의 지속 시간 입니다. (밀리초), 기본값은 300~600ms입니다. zoom number 11 지도의 초기 줌 레벨입니다. zoomControl boolean false 줌 컨트롤의 표시 여부입니다. zoomControlOptions ZoomControlOptions 줌 컨트롤의 옵션입니다. zoomOrigin Coord | CoordLiteral null 줌 효과 시 고정하여 적용할 기준 좌표입니다. 해당 좌표가 현재 지도 화면 밖에 위치해 있으면 기본 기준 좌표를 적용합니다. blankTileImage null | string null 빈 타일 이미지 URL을 설정할 수 있는 옵션입니다. 기본값은 투명 gif 입니다. MapPanes MapPanes 객체는 오버레이를 지도 위에 렌더링할 수 있는 DOM 요소를 포함하며, 지도에 있는 여러 레이어의 스택(stack) 순서를 나타냅니다. Type: object Properties Name Type Description overlayLayer HTMLElement 이 창은 폴리라인, 폴리곤 등의 오버레이 요소를 포함합니다. 이 창은 DOM 이벤트를 받지 않습니다. overlayImage HTMLElement 이 창은 마커의 요소를 포함합니다. floatPane HTMLElement 이 창은 모든 오버레이보다 위에 위치하는 정보 창(Info Window) 요소를 포함합니다. Events addLayer 지도 레이어가 추가되면 이벤트가 발생합니다. Parameters Name Type Description layer naver.maps.Layer 추가된 레이어 bounds_changed 지도 좌표 경계가 변경되면 이벤트가 발생합니다. Parameters Name Type Description bounds Bounds 변경된 좌표 경계 center_changed 지도 중심 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description center Coord 변경된 중심 좌표 centerPoint_changed 지도 중심 세계 좌표가 변경되면 이벤트가 발생합니다. Parameters Name Type Description centerPoint naver.maps.Point 변경된 중심 세계 좌표 click 사용자가 지도에서 마우스 왼쪽 버튼을 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dblclick 사용자가 지도에서 마우스 왼쪽 버튼을 더블 클릭하면 이벤트가 발생합니다. 단, 오버레이를 클릭했을 때는 이벤트가 발생하지 않습니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 doubletap 사용자가 지도에서 두 번 연속으로 탭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 drag 사용자가 지도를 끌어다 놓으면(드래그) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragend 사용자가 지도에서 드래그를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 dragstart 사용자가 지도에서 드래그를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 idle 지도의 움직임이 종료되면(유휴 상태) 이벤트가 발생합니다. init 지도가 초기화되면 이벤트가 발생합니다. keydown 지도 위에서 키보드의 키를 누르고 있으면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 keyup 지도 위에서 키보드의 키를 눌렀다 떼면 이벤트가 발생합니다. Parameters Name Type Description keyboardEvent KeyboardEvent 키보드 이벤트 객체 longtap 사용자가 한 손가락으로 지도를 누르고 1초 이상 지난 후 떼면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mapType_changed 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType MapType 변경된 지도 유형 객체 mapTypeId_changed 지도 유형 id가 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId naver.maps.MapTypeId | string 변경된 지도 유형의 id mousedown 사용자가 지도에서 마우스 버튼을 누르면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mousemove 지도에서 사용자의 마우스 포인터를 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseout 사용자의 마우스 포인터가 지도 경계를 벗어나면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseover 사용자의 마우스 포인터가 지도 경계에 들어오면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 mouseup 사용자가 지도에서 마우스 버튼을 놓으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 panning panTo, morph 메서드 등으로 지도 패닝을 시작하면 이벤트가 발생합니다. pinch 사용자가 두 손가락으로 지도를 누르고 두 손가락을 모으거나 펼치면(핀치 제스처) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchend 사용자가 지도에서 핀치 제스처를 종료하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 pinchstart 사용자가 지도에서 핀치 제스처를 시작하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 projection_changed 지도 투영이 변경되면 이벤트가 발생합니다. Parameters Name Type Description projection naver.maps.Projection 지도 유형의 원본 투영 객체 removeLayer 지도 레이어가 제거되면 이벤트가 발생합니다. Parameters Name Type Description layername string 제거된 레이어 이름 resize 지도의 크기가 재설정되면 이벤트가 발생합니다. rightclick 사용자가 지도에서 마우스 오른쪽 버튼을 클릭하면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 size_changed 지도 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 지도의 크기 tap 사용자가 한 손가락으로 지도를 누르고, 즉시 한 손가락을 뗄 때 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 tilesloaded 지도의 모든 타일이 로드되면 이벤트가 발생합니다. touchend 사용자의 손가락이 지도에서 떨어지면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchmove 사용자의 손가락이 지도에서 움직이면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 touchstart 사용자의 손가락이 지도에 닿으면 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 twofingertap 사용자가 두 손가락으로 지도를 누렀다가 즉시 떼면(탭) 이벤트가 발생합니다. Parameters Name Type Description pointerEvent PointerEvent 포인터 이벤트 객체 zoom_changed 지도 줌 레벨이 변경되면 이벤트가 발생합니다. Parameters Name Type Description zoom number 변경된 줌 레벨 zooming 지도의 줌 효과가 시작되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.MapDataControl.html":{"id":"naver.maps.MapDataControl.html","title":"Class: naver.maps.MapDataControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapDataControl Class: naver.maps.MapDataControl naver.maps. MapDataControl MapDataControl 클래스는 지도 데이터 저작권 컨트롤을 정의합니다. new naver.maps.MapDataControl(MapDataControlOptions) Parameters Name Type Description MapDataControlOptions MapDataControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { mapDataControl: true }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions MapDataControlOptions MapDataControlOptions 객체는 지도 데이터 저작권 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position BOTTOM_LEFT 지도 데이터 저작권 컨트롤을 배치할 위치입니다. × Search results Close "},"naver.maps.MapSystemProjection.html":{"id":"naver.maps.MapSystemProjection.html","title":"Interface: MapSystemProjection","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapSystemProjection Interface: MapSystemProjection naver.maps. MapSystemProjection MapSystemProjection은 현재 설정된 지도 유형의 Projection을 가공해 지도 내부에서 사용하는 투영 객체입니다. 이 객체를 이용하면 지도 좌표와 세계 좌표, 화면 픽셀 좌표를 서로 변환할 수 있습니다. 이 인터페이스는 Map 인스턴스의 getProjection 메서드를 이용해 가져올 수 있으며, 직접 초기화해서 사용할 수 없습니다. Tutorials 지도 투영과 좌표 체계 Extends naver.maps.KVO Methods factor(zoom) 특정 줌 레벨에서 한 축의 타일 개수를 반환합니다. Parameters Name Type Description zoom number 줌 레벨 Returns Type Description number 타일의 개수 fromCoordToOffset(coord) 지정한 지도 좌표에 해당하는 픽셀 단위의 offset 좌표를 반환합니다. Parameters Name Type Description coord Coord 지도 좌표 Returns Type Description naver.maps.Point offset 좌표 fromCoordToPoint(coord) 지정한 지도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord Coord 지도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromOffsetToCoord(offset) 지정한 픽셀 단위의 offset 좌표에 해당하는 지도 좌표를 반환합니다. Parameters Name Type Description offset naver.maps.Point offset 좌표 Returns Type Description Coord 지도 좌표 fromOffsetToPoint(offset) 지정한 픽셀 단위의 offset 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description offset naver.maps.Point offset 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 지도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description Coord 지도 좌표 fromPointToOffset(point) 지정한 세계 좌표에 해당하는 픽셀 단위의 offset 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point offset 좌표 getDestinationCoord(fromCoord, angle, meter) 지정한 좌표에서 북쪽을 기준으로 지정한 각도(시계 방향)와 거리만큼 떨어진 위치의 지도 좌표를 반환합니다. Projection 내에 getDestinationCoord 메서드를 구현해야 합니다. 네이버 지도 API에서 제공하는 EPSG3857, UTMK, UTMK_NAVER 지도 투영 객체에는 구현되어 있습니다. Parameters Name Type Description fromCoord Coord 기준이 되는 지도 좌표 angle number 지정한 좌표에서 북쪽을 기준으로 한 시계 방향의 각도(0-북, 90-동, 180-남, 270-서). 이 값이 0이면 현재의 좌표에서 북쪽을 가리키며, 90이면 동쪽을 가리킵니다. meter number 지정한 좌표에서 구하려는 좌표까지의 거리(미터) Returns Type Description Coord 새로운 지도 좌표 getDistance(coord1, coord2) 지정한 두 지도 좌표 간의 거리를 반환합니다. 단위는 미터입니다. Projection 내에 getDistance 메서드를 구현해야 합니다. 네이버 지도 API에서 제공하는 EPSG3857, UTMK, UTMK_NAVER 지도 투영 객체에는 구현되어 있습니다. Parameters Name Type Description coord1 Coord 지도 좌표 coord2 Coord 지도 좌표 Returns Type Description number 거리 getProjectionName() 현재의 지도 시스템이 적용된 지도 투영 객체(Projection)의 이름을 반환합니다. Returns Type Description number 지도 투영 객체의 이름 scaleDown(operand, zoom) 지정한 피연산자를 줌 레벨의 타일 개수만큼 나누어 축소한 후 반환합니다. Parameters Name Type Description operand number | naver.maps.Point | naver.maps.Size 확장할 피연산자 zoom number 줌 레벨 Returns Type Description numver | naver.maps.Point | naver.maps.Size 축소된 값 또는 객체 scaleUp(operand, zoom) 지정한 피연산자를 줌 레벨의 타일 개수만큼 곱해 확대한 후 반환합니다. Parameters Name Type Description operand number | naver.maps.Point | naver.maps.Size 확장할 피연산자 zoom number 줌 레벨 Returns Type Description numver | naver.maps.Point | naver.maps.Size 확대된 값 또는 객체 × Search results Close "},"naver.maps.MapType.html":{"id":"naver.maps.MapType.html","title":"Interface: MapType","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapType Interface: MapType naver.maps. MapType MapType 가상 인터페이스는 지도의 지도 유형을 만들 때 구현해야 할 메서드와 속성을 정의합니다. NAVER 지도 API에서 제공하는 모든 지도 유형(일반 지도, 위성 지도 등) 역시 이 인터페이스를 구현했습니다. 사용자 정의 지도 유형을 만들려면 이 인터페이스를 구현해야 합니다. Tutorials 지도 유형 Members &lt;abstract&gt; maxZoom 지도 유형의 최대 줌 레벨입니다. Type: number &lt;abstract&gt; minZoom 지도 유형의 최소 줌 레벨입니다. Type: number &lt;abstract&gt; name 지도 유형 컨트롤 등에서 표시할 지도 유형의 이름입니다. Type: string &lt;abstract&gt; projection 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. Type: naver.maps.Projection &lt;abstract&gt; tileSize 지도 유형의 타일 크기입니다. Type: naver.maps.Size Methods &lt;abstract&gt; getTile(x, y, z) 전달된 타일의 인덱스와 줌 레벨에 해당하는 타일 HTML 요소를 반환합니다. 새 타일을 지도에 표시해야 한다고 API가 판단할 때마다 이 메서드를 호출합니다. Parameters Name Type Description x number x축의 인덱스 y number y축의 인덱스 z number 줌 레벨 Returns Type Description HTMLElement | naver.maps.Tile 타일 HTML 요소 또는 Tile 객체 × Search results Close "},"naver.maps.MapTypeControl.html":{"id":"naver.maps.MapTypeControl.html","title":"Class: naver.maps.MapTypeControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapTypeControl Class: naver.maps.MapTypeControl naver.maps. MapTypeControl MapTypeControl 클래스는 지도 유형 컨트롤을 정의합니다. new naver.maps.MapTypeControl(MapTypeControlOptions) Parameters Name Type Description MapTypeControlOptions MapTypeControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { mapTypeControl: true }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions MapTypeControlOptions MapTypeControlOptions 객체는 지도 유형 컨트롤의 동작이나 위치, 모양을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description mapTypeIds Array.&lt;naver.maps.MapTypeId&gt; | null 지도 유형 컨트롤에 표시할 지도 유형의 id입니다. 기본값은 모든 지도 유형을 표시합니다. position naver.maps.Position TOP_RIGHT 지도 유형 컨트롤을 배치할 위치입니다. style MapTypeControlStyle BUTTON 지도 유형 컨트롤의 스타일입니다. hideTime number 버튼 스타일 컨트롤 마우스 아웃 시 숨김 delay 값. 기본값은 2000ms 입니다. MapTypeControlStyle MapTypeControlStyle 객체는 지도 유형 컨트롤의 스타일을 정의합니다. Type: object Properties Name Type Description BUTTON number 버튼 스타일입니다. DROPDOWN number 드롭다운 스타일입니다. × Search results Close "},"naver.maps.MapTypeRegistry.html":{"id":"naver.maps.MapTypeRegistry.html","title":"Class: naver.maps.MapTypeRegistry","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API MapTypeRegistry Class: naver.maps.MapTypeRegistry naver.maps. MapTypeRegistry MapTypeRegistry 클래스는 지도에서 사용할 수 있는 지도 유형의 컬렉션을 정의합니다. 이 객체의 컬렉션에 사용자 정의 지도 유형을 등록하면 NAVER 지도 API v3가 제공하는 HYBRID, TERRAIN 등의 기본 지도 유형처럼 지도에서 사용할 수 있습니다. new naver.maps.MapTypeRegistry(mapTypeInfo, defaultMapTypeId) Parameters Name Type Argument Description mapTypeInfo object 지도 유형 id와 지도 유형 객체의 쌍으로 이루어진 객체 defaultMapTypeId string &lt;optional&gt; 기본으로 선택할 지도 유형 id Tutorials 지도 유형 Extends naver.maps.KVO Methods getPreviousTypeId() 이전에 선택되었던 지도 유형의 id를 반환합니다. Returns Type Description string 이전에 선택되었던 지도 유형의 id getSelectedType() 현재 선택된 지도 유형 객체를 반환합니다. Returns Type Description naver.maps.MapType 지도 유형 객체 getSelectedTypeId() 현재 선택된 지도 유형의 id를 반환합니다. Returns Type Description string 현재 선택된 지도 유형의 id getTypeIds() 등록된 모든 지도 유형의 id 목록을 반환합니다. Returns Type Description Array.&lt;string&gt; 지도 유형 id의 배열 set(mapTypeId, mapType) 지정한 id로 지도 유형을 등록합니다. Parameters Name Type Description mapTypeId string 지도 유형의 id mapType naver.maps.MapType 지도 유형 객체 Overrides naver.maps.KVO#set Fires addMapType removeMapType {mapTypeId}_changed setSelectedTypeId(mapTypeId) 지정한 id의 지도 유형으로 현재 지도를 설정합니다. Parameters Name Type Description mapTypeId string 지도 유형의 id Fires selectedMapType_changed Events addMapType 새로운 지도 유형이 추가되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 추가된 지도 유형의 id mapType naver.maps.MapType 추가된 지도 유형 객체 removeMapType 지도 유형이 삭제되면 이벤트가 발생합니다. Parameters Name Type Description mapTypeId string 삭제된 지도 유형의 id mapType naver.maps.MapType 삭제된 지도 유형 객체 selectedMapType_changed 선택된(활성화된) 지도 유형이 변경되면 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType 선택된 지도 유형 객체 {mapTypeId}_changed 특정 id의 지도 유형이 추가, 변경 또는 삭제될 때 이벤트가 발생합니다. Parameters Name Type Description mapType naver.maps.MapType | null 변경된 지도 유형 객체 × Search results Close "},"naver.maps.Marker.html":{"id":"naver.maps.Marker.html","title":"Class: naver.maps.Marker","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Marker Class: naver.maps.Marker naver.maps. Marker Marker 클래스는 지도 위에 올리는 마커를 정의합니다. new naver.maps.Marker(options) Parameters Name Type Description options MarkerOptions 마커 옵션. 이때 position 속성은 반드시 설정해야 합니다. Tutorials 마커 Extends naver.maps.OverlayView Methods &lt;abstract&gt; draw() 지도에 오버레이를 그릴 때 호출됩니다. 지도의 창(pane) 위에 원하는 오버레이를 그리고, 배치하는 기능을 구현합니다. Inherited From naver.maps.OverlayView#draw Overrides naver.maps.OverlayView#draw getAnimation() 마커의 애니메이션을 반환합니다. Returns Type Description naver.maps.Animation Animation 객체 getClickable() 마커의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 마커 클릭 허용 여부 getContainerTopLeft() 현재 지도 컨테이너 요소의 left, top 픽셀값을 반환합니다. Inherited From naver.maps.OverlayView#getContainerTopLeft Returns Type naver.maps.Point getCursor() 마우스 오버 시 반영되는 마우스 포인터 모양을 반환합니다. Returns Type Description string 마우스 포인터 모양 getDraggable() 마커의 드래그 허용 여부를 반환합니다. Returns Type Description boolean 마커 드래그 허용 여부 getDrawingRect() 마커가 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getIcon() 마커의 모양을 표현하는 아이콘 객체를 반환합니다. Returns Type Description ImageIcon | SymbolIcon | HtmlIcon 아이콘 객체 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 마커 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 반환받을 옵션 이름 Returns Type Description MarkerOptions 마커 옵션 getPanes() 오버레이 요소를 추가할 수 있는 지도의 창(pane) 요소 집합 객체를 반환합니다. Inherited From naver.maps.OverlayView#getPanes Returns Type Description MapPanes MapPanes 객체 getPosition() 마커의 위치를 반환합니다. Returns Type Description Coord 마커 위치 getProjection() 지도 좌표, 화면 좌표 간에 변환할 수 있는 MapSystemProjection 객체를 반환합니다. 반환된 객체를 이용해 지도 위의 원하는 위치에 오버레이를 배치할 수 있습니다. Inherited From naver.maps.OverlayView#getProjection Returns Type Description naver.maps.MapSystemProjection MapSystemProjection 객체 getShape() 마커의 이벤트 영역 셰이프를 반환합니다. Returns Type Description MarkerShape 마커 셰이프 객체 getTitle() 마커의 타이틀을 반환합니다. 타이틀은 마커에 마우스 포인터를 올리면 나타나는 툴팁의 문자열입니다. Returns Type Description string 마커 타이틀 getVisible() 마커의 노출 허용 여부를 반환합니다. Returns Type Description boolean 마커 노출 허용 여부 getZIndex() 마커의 쌓임 순서를 반환합니다. Returns Type Description number 마커의 쌓임 순서 &lt;abstract&gt; onAdd() 지도에 오버레이를 추가할 때 호출됩니다. 오버레이 요소를 Map 객체의 창(pane) 요소에 추가하는 기능을 구현합니다. MapPanes 중 적합한 창 요소에 오버레이 요소를 추가합니다. Inherited From naver.maps.OverlayView#onAdd Overrides naver.maps.OverlayView#onAdd &lt;abstract&gt; onRemove() 지도에서 오버레이를 제거할 때 호출됩니다. 오버레이 요소를 Map 객체의 창(pane) 요소에서 제거하는 기능을 구현합니다. Inherited From naver.maps.OverlayView#onRemove Overrides naver.maps.OverlayView#onRemove setAnimation(animation) 마커의 애니메이션을 설정합니다. 동작하고 있는 애니메이션이 있다면 중지하고, 설정한 애니메이션을 바로 시작합니다. 제공하는 애니메이션은 DROP, BOUNCE입니다. Parameters Name Type Description animation naver.maps.Animation 마커의 애니메이션. 이 값이 null이면 애니메이션을 중지합니다. setClickable(clickable) 마커의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부. 이 값이 true이면 마커는 마우스, 터치 이벤트를 받을 수 있고, 마우스 오버 시 cursor 속성에 따라 포인터 모양을 반영합니다. false일 경우 이벤트를 받지 않으며 마우스 오버 시에도 포인터 모양이 변하지 않습니다. Fires clickable_changed setCursor(cursor) 마우스 오버 시 포인터의 모양을 설정하는 CSS cursor값을 설정합니다. Parameters Name Type Description cursor string 마우스 포인터 모양 Fires cursor_changed setDraggable(draggable) 마커의 드래그 허용 여부를 설정합니다. Parameters Name Type Description draggable boolean 마커의 드래그 허용 여부 Fires draggable_changed setIcon(icon) 마커의 모양을 설정합니다. 단, ImageIcon 객체는 마커 생성과 동시에 호출하면 MarkerOptions 객체의 icon 옵션이 적용됩니다. Parameters Name Type Description icon string | ImageIcon | SymbolIcon | HtmlIcon 아이콘 객체 Fires icon_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 마커 옵션을 설정합니다. 설정한 옵션만 반영됩니다. Parameters Name Type Description options MarkerOptions 마커 옵션 Fires clickable_changed cursor_changed draggable_changed icon_changed position_changed shape_changed title_changed visible_changed zIndex_changed setPosition(position) 마커의 위치를 설정합니다. Parameters Name Type Description position Coord | CoordLiteral 마커 위치 Fires position_changed setShape(shape) 마커의 이벤트 영역을 설정합니다. Parameters Name Type Description shape MarkerShape 마커 셰이프 객체 Fires shape_changed setTitle(title) 마커의 타이틀을 설정합니다. 타이틀은 마커에 마우스 포인터를 올리면 나타나는 툴팁의 문자열입니다. Parameters Name Type Description title string 마커 타이틀 Fires title_changed setVisible(visible) 마커의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 마커 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 마커의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 마커의 쌓임 순서 Fires zIndex_changed Type Definitions HtmlIcon HtmlIcon 객체는 HTML 마커에서 사용하는 아이콘을 정의합니다. HTML 마커는 HTML 문자열 또는 HTML 요소를 사용하는 마커입니다. Type: object Properties Name Type Argument Description content string | HTMLElement 마커의 아이콘으로 사용할 HTML 마크업 또는 HTML 요소입니다. 이 속성은 반드시 설정해야 합니다. size naver.maps.Size | SizeLiteral &lt;optional&gt; 화면에 나타나는 마커의 크기입니다. anchor naver.maps.Point | PointLiteral | naver.maps.Position &lt;optional&gt; 지도 위에 놓이는 마커의 위치와 일치시킬 아이콘의 기준 위치입니다. 기본값은 (0, 0)으로, 마커 기준 왼쪽 위 모서리가 마커의 위치입니다. ImageIcon ImageIcon 객체는 이미지 마커에서 사용하는 아이콘을 정의합니다. Type: object Properties Name Type Argument Default Description url string 마커의 아이콘으로 사용할 이미지의 URL입니다. size naver.maps.Size | SizeLiteral &lt;optional&gt; 화면에 나타나는 마커의 크기입니다. 이 속성을 설정하지 않으면 이미지의 크기로 설정합니다. scaledSize naver.maps.Size | SizeLiteral &lt;optional&gt; 아이콘 이미지의 크기입니다. 이 속성을 설정하지 않으면 이미지의 크기로 설정합니다. 이 속성을 이용하면 레티나 디스플레이에 대응할 수 있습니다. 예를 들어, window.deviceRatio가 2인 디바이스이고 이미지 크기가 200 x 100인 경우, 이 속성을 100 x 50으로 설정하면 실제 이미지 크기보다 2배 줄여서 보여줌으로써 레티나 디스플레이에 대응할 수 있습니다. origin naver.maps.Point | PointLiteral &lt;optional&gt; (x: 0, y: 0) 스프라이트 이미지의 아이콘을 사용할 때 이미지의 원점입니다. 즉, 이 원점 위치로부터 size 속성의 값만큼 화면에 노출됩니다. anchor naver.maps.Point | PointLiteral | naver.maps.Position &lt;optional&gt; 지도 위에 놓이는 마커의 위치와 일치시킬 아이콘의 기준 위치입니다. 이 속성을 설정하지 않으면 아이콘의 아래쪽 가운데로 설정합니다. MarkerOptions MarkerOptions 객체는 Marker를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description animation naver.maps.Animation &lt;optional&gt; 마커가 지도에 추가될 때 시작할 애니메이션입니다. map naver.maps.Map 마커를 표시할 Map 객체입니다. position Coord | CoordLiteral 마커의 위치를 나타내는 지도 좌표입니다. icon string | ImageIcon | SymbolIcon | HtmlIcon &lt;optional&gt; 마커의 모양입니다. 이 속성을 설정하지 않으면 기본 아이콘으로 설정합니다. 문자열로 입력할 때는 마커의 아이콘으로 사용할 이미지의 URL을 입력합니다. shape MarkerShape &lt;optional&gt; 마커의 인터랙션 영역입니다. title string &lt;optional&gt; null 마커에 마우스 오버 시 나타나는 툴팁 문자열입니다. 이 속성을 설정하지 않거나 빈 문자열로 설정하면 툴팁을 노출하지 않습니다. cursor string &lt;optional&gt; pointer 마커에 마우스 오버 시 나타나는 포인터 모양입니다. clickable boolean &lt;optional&gt; true 마커의 클릭 허용 여부입니다. 이 값이 false이면 마커는 사용자 인터랙션을 받지 않습니다. 또한 cursor 속성값도 반영되지 않습니다. draggable boolean &lt;optional&gt; false 마커의 드래그 허용 여부입니다. 이 속성은 clickable 속성보다 우선합니다. 즉, clickable 속성이 false라도 이 값이 true이면 클릭 등의 사용자 인터랙션을 받습니다. visible boolean &lt;optional&gt; true 마커의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 마커의 쌓임 순서입니다. MarkerShape MarkerShape 객체는 마커의 인터랙션 영역을 정의합니다. 일반적으로 이미지 또는 심벌 아이콘을 사용했을 때 클릭할 수 있는 영역은 다음 그림과 같이 사각형의 아이콘 크기로 설정됩니다. 그러나 이 객체를 이용하면 마커 모양대로 클릭할 수 있는 영역을 설정할 수 있습니다. Type: object Properties Name Type Description coords array 인터랙션 영역을 정의하는 도형의 좌표입니다. type string 인터랙션 영역을 정의하는 도형의 유형입니다. SymbolIcon SymbolIcon 객체는 심벌 마커에서 사용하는 아이콘을 정의합니다. 마커의 위치 (x: 0, y: 0)를 기준으로 폴리곤 좌표를 설정해 원하는 모양의 아이콘을 생성할 수 있습니다. Type: object Properties Name Type Argument Default Description path naver.maps.SymbolPath | Array.&lt;naver.maps.Point&gt; | Array.&lt;PointLiteral&gt; 마커 아이콘으로 사용할 벡터 폴리곤 좌표입니다. naver.maps.SymbolPath에서 미리 정의된 path를 사용할 수 있습니다. style naver.maps.SymbolStyle &lt;optional&gt; 도형 아이콘의 스타일입니다. path 속성을 naver.maps.SymbolPath로 사용하는 경우 생략할 수 있습니다. radius number &lt;optional&gt; 10 원 아이콘을 그리는 경우 원의 반지름을 정의합니다. fillColor string &lt;optional&gt; 폴리곤 배경색입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 폴리곤 배경색의 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; 폴리곤 선의 색상입니다. CSS 색상 표현법으로 설정합니다. strokeWeight number &lt;optional&gt; 1 폴리곤 선의 두께입니다. strokeOpacity number &lt;optional&gt; 1 폴리곤 선의 불투명도입니다. 값의 범위는 0~1입니다. anchor naver.maps.Point | PointLiteral | naver.maps.Position &lt;optional&gt; naver.maps.Position.BOTTOM_CENTER 지도 위에 놓이는 마커의 위치와 일치시킬 아이콘의 기준 위치입니다. × Search results Close "},"naver.maps.NaverMapTypeOptions.html":{"id":"naver.maps.NaverMapTypeOptions.html","title":"Class: naver.maps.NaverMapTypeOptions","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API NaverMapTypeOptions Class: naver.maps.NaverMapTypeOptions naver.maps. NaverMapTypeOptions NaverMapTypeOptions 클래스는 네이버 지도 유형의 옵션을 정의합니다. (Deprecated) 지도 타일이 변경되어 NaverStyleMapTypeOptions을 사용합니다. new naver.maps.NaverMapTypeOptions(options) Parameters Name Type Description options NaverImageMapTypeOptions 네이버 이미지 지도 유형 옵션 Tutorials 지도 유형 Methods &lt;static&gt; getBicycleLayer(opts) NAVER 자전거 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 자전거 레이어 지도 유형 &lt;static&gt; getBlankMap(opts) NAVER 일반 지도의 빈 타일 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도(빈 타일) 유형 &lt;static&gt; getCadastralLayer(opts) NAVER 지적도 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 지적도 레이어 지도 유형 &lt;static&gt; getHybridMap(opts) NAVER 위성 겹쳐보기 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 겹쳐보기 지도 유형 &lt;static&gt; getMapTypes(opts) 일반, 지형도, 위성, 겹쳐보기 지도 유형을 담고 있는 MapTypeRegistry 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 각 지도 유형에 적용할 옵션 Returns Type Description naver.maps.MapTypeRegistry NAVER 지도 유형 컬렉션 객체 &lt;static&gt; getNormalLabelLayer(opts) NAVER 일반 지도의 주기(Label) 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도의 주기(Label) 레이어 지도 유형 &lt;static&gt; getNormalMap(opts) NAVER 일반 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도 유형 &lt;static&gt; getSatelliteLabelLayer(opts) NAVER 위성 지도의 주기(Label) 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 지도의 주기(Label) 레이어 지도 유형 &lt;static&gt; getSatelliteMap(opts) NAVER 위성 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 지도 유형 &lt;static&gt; getStreetLayer(opts) NAVER 거리뷰 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 거리뷰 레이어 지도 유형 &lt;static&gt; getTerrainMap(opts) NAVER 지형도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 지형도 유형 &lt;static&gt; getTrafficLayer(opts) NAVER 교통 상황 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 교통 상황 레이어 지도 유형 &lt;static&gt; getVectorMap(opts) NAVER 일반 지도의 배경 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도의 배경 지도 유형 객체 &lt;static&gt; getWorldMap(opts) NAVER 세계 지도 유형 객체를 반환합니다. 이 지도 유형은 EPSG3857 Projection 객체를 사용하며, 최대/최소 줌 레벨은 0 ~ 7입니다. Parameters Name Type Argument Description opts NaverImageMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 세계 지도 유형 Type Definitions NaverImageMapTypeOptions NaverImageMapTypeOptions 객체는 ImageMapTypeOptions를 상속받으며, NAVER 지도 전용으로 설계된 별도의 옵션을 추가로 정의합니다. Type: object Properties Name Type Argument Default Description maxZoom number &lt;optional&gt; 14 지도 유형의 최대 줌 레벨입니다. minZoom number &lt;optional&gt; -1 지도 유형의 최소 줌 레벨입니다. projection naver.maps.Projection &lt;optional&gt; naver.maps.UTMK_NAVER 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. tileSize naver.maps.Size &lt;optional&gt; (256,256) 지도 유형의 타일 크기입니다. hd string &lt;optional&gt; 고해상도 이미지 타일의 사용 여부입니다. window.devicePixelRation의 값이 2 이상이면 true로 설정됩니다. NaverStyleMapTypeOptions NaverStyleMapTypeOptions 객체는 ImageMapTypeOptions를 상속받으며, NAVER 지도 전용으로 설계된 별도의 옵션을 추가로 정의합니다. Type: object Properties Name Type Argument Default Description maxZoom number &lt;optional&gt; 21 지도 유형의 최대 줌 레벨입니다. minZoom number &lt;optional&gt; 0 지도 유형의 최소 줌 레벨입니다. projection naver.maps.Projection &lt;optional&gt; naver.maps.EPSG3857 지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다. tileSize naver.maps.Size &lt;optional&gt; (256,256) 지도 유형의 타일 크기입니다. hd string &lt;optional&gt; 고해상도 이미지 타일의 사용 여부입니다. window.devicePixelRation의 값이 2 이상이면 true로 설정됩니다. × Search results Close "},"naver.maps.NaverStyleMapTypeOptions.html":{"id":"naver.maps.NaverStyleMapTypeOptions.html","title":"Class: naver.maps.NaverStyleMapTypeOptions","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API NaverStyleMapTypeOptions Class: naver.maps.NaverStyleMapTypeOptions naver.maps. NaverStyleMapTypeOptions NaverStyleMapTypeOptions 클래스는 네이버 지도 유형의 옵션을 정의합니다. new naver.maps.NaverStyleMapTypeOptions(options) Parameters Name Type Description options NaverStyleMapTypeOptions 네이버 스타일 지도 유형 옵션 Tutorials 지도 유형 Methods &lt;static&gt; getBicycleLayer(opts) NAVER 자전거 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 자전거 레이어 지도 유형 &lt;static&gt; getBlankMap(opts) NAVER 일반 지도의 빈 타일 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도(빈 타일) 유형 &lt;static&gt; getCadastralLayer(opts) NAVER 지적도 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 지적도 레이어 지도 유형 &lt;static&gt; getHybridMap(opts) NAVER 위성 겹쳐보기 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 겹쳐보기 지도 유형 &lt;static&gt; getMapTypes(opts) 일반, 지형도, 위성, 겹쳐보기 지도 유형을 담고 있는 MapTypeRegistry 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 각 지도 유형에 적용할 옵션 Returns Type Description naver.maps.MapTypeRegistry NAVER 지도 유형 컬렉션 객체 &lt;static&gt; getNormalLabelLayer(opts) NAVER 일반 지도의 주기(Label) 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도의 주기(Label) 레이어 지도 유형 &lt;static&gt; getNormalMap(opts) NAVER 일반 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도 유형 &lt;static&gt; getSatelliteLabelLayer(opts) NAVER 위성 지도의 주기(Label) 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 지도의 주기(Label) 레이어 지도 유형 &lt;static&gt; getSatelliteMap(opts) NAVER 위성 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 지도 유형 &lt;static&gt; getStreetLayer(opts) NAVER 거리뷰 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 거리뷰 레이어 지도 유형 &lt;static&gt; getTerrainMap(opts) NAVER 지형도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 지형도 유형 &lt;static&gt; getTrafficLayer(opts) NAVER 교통 상황 레이어 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 교통 상황 레이어 지도 유형 &lt;static&gt; getTrafficMiniMap(opts) NAVER 위성 겹쳐보기 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 위성 겹쳐보기 지도 유형 &lt;static&gt; getVectorMap(opts) NAVER 일반 지도의 배경 지도 유형 객체를 반환합니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 일반 지도의 배경 지도 유형 객체 &lt;static&gt; getWorldMap(opts) NAVER 세계 지도 유형 객체를 반환합니다. 이 지도 유형은 EPSG3857 Projection 객체를 사용하며, 최대/최소 줌 레벨은 0 ~ 21입니다. Parameters Name Type Argument Description opts naver.maps.NaverStyleMapTypeOptions &lt;optional&gt; 지도 유형에 적용할 옵션 Returns Type Description naver.maps.ImageMapType NAVER 세계 지도 유형 × Search results Close "},"naver.maps.OverlayView.html":{"id":"naver.maps.OverlayView.html","title":"Class: naver.maps.OverlayView","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API OverlayView Class: naver.maps.OverlayView naver.maps. OverlayView OverlayView 클래스는 오버레이를 만들 때 구현해야 할 여러 메서드를 정의하는 추상 클래스입니다. NAVER 지도 API v3에서 제공하는 모든 오버레이(마커, 정보 창 등)는 이 클래스를 상속받아 구현되었습니다. 사용자 정의 오버레이를 만들려면 이 클래스를 상속받아 구현해야 합니다. 이때 다음 메서드는 반드시 재정의해야 합니다. onAdd: 지도에 오버레이를 추가할 때 호출됩니다. onRemove: 지도에서 오버레이를 제거할 때 호출됩니다. draw: 지도에 오버레이를 그릴 때 호출됩니다. new naver.maps.OverlayView() Tutorials 사용자 정의 오버레이 Extends naver.maps.KVO Methods &lt;abstract&gt; draw() 지도에 오버레이를 그릴 때 호출됩니다. 지도의 창(pane) 위에 원하는 오버레이를 그리고, 배치하는 기능을 구현합니다. getContainerTopLeft() 현재 지도 컨테이너 요소의 left, top 픽셀값을 반환합니다. Returns Type naver.maps.Point getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 getPanes() 오버레이 요소를 추가할 수 있는 지도의 창(pane) 요소 집합 객체를 반환합니다. Returns Type Description MapPanes MapPanes 객체 getProjection() 지도 좌표, 화면 좌표 간에 변환할 수 있는 MapSystemProjection 객체를 반환합니다. 반환된 객체를 이용해 지도 위의 원하는 위치에 오버레이를 배치할 수 있습니다. Returns Type Description naver.maps.MapSystemProjection MapSystemProjection 객체 &lt;abstract&gt; onAdd() 지도에 오버레이를 추가할 때 호출됩니다. 오버레이 요소를 Map 객체의 창(pane) 요소에 추가하는 기능을 구현합니다. MapPanes 중 적합한 창 요소에 오버레이 요소를 추가합니다. &lt;abstract&gt; onRemove() 지도에서 오버레이를 제거할 때 호출됩니다. 오버레이 요소를 Map 객체의 창(pane) 요소에서 제거하는 기능을 구현합니다. setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 × Search results Close "},"naver.maps.Panorama.html":{"id":"naver.maps.Panorama.html","title":"Class: naver.maps.Panorama","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Panorama Class: naver.maps.Panorama naver.maps. Panorama Panorama 클래스는 애플리케이션에서 파노라마 인스턴스를 정의합니다. 개발자는 이 객체를 생성해서 지정한 DOM 요소에 파노라마를 삽입할 수 있습니다. 이 클래스는 panorama 서브 모듈을 로드해야 합니다. new naver.maps.Panorama(panoramaDiv, panoramaOptions) Parameters Name Type Description panoramaDiv string | HTMLElement 파노라마를 삽입할 HTML 요소 panoramaOptions PanoramaOptions 파노라마 옵션 Tutorials 파노라마 생성 및 기본 동작 Requires module:panorama Example Panorama 기본 사용법 var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814), size: new naver.maps.Size(800, 600), pov: { pan: -135, tilt: 29, fov: 100 } }); naver.maps.Event.addListener(pano, \"init\", function() { console.log(\"init\"); }); naver.maps.Event.addListener(pano, \"pano_status\", function(status) { console.log(\"pano_status\", status, pano.getPanoId()); }); naver.maps.Event.addListener(pano, \"pano_changed\", function() { console.log(\"pano_changed\", pano.getLocation()); }); naver.maps.Event.addListener(pano, \"pov_changed\", function() { console.log(\"pov_changed\", pano.getPov()); }); Extends naver.maps.KVO Requires module:panorama Methods getElement() 파노라마의 HTML 요소를 반환합니다. Returns Type Description HTMLElement 현재 파노라마의 HTML 요소 getLocation() 파노라마의 위치 정보를 반환합니다. Returns Type Description PanoramaLocation 위치 정보 getMaxScale() 파노라마의 최대 배율을 반환합니다. Returns Type Description number 파노라마 최대 배율 getMaxZoom() 파노라마의 최대 줌 레벨을 반환합니다. Returns Type Description number 파노라마 최대 줌 레벨 getMinScale() 파노라마의 최소 배율을 반환합니다. Returns Type Description number 파노라마 최소 배율 getMinZoom() 파노라마의 최소 줌 레벨을 반환합니다. Returns Type Description number 파노라마 최소 줌 레벨 getOptions(key) 파노라마의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 getPanoId() 파노라마의 id를 반환합니다. Returns Type Description string 파노라마 id getPosition() 파노라마의 위치를 반환합니다. Returns Type Description naver.maps.LatLng 파노라마 위치 getPov() 파노라마의 시야를 반환합니다. Returns Type Description PanoramaPov 파노라마 시야 getProjection() 파노라마의 투영을 반환합니다. Returns Type Description PanoramaProjection 파노라마 투영 객체 getScale() 파노라마의 배율을 반환합니다. Returns Type Description number 파노라마 배율 getSize() 파노라마의 화면 크기를 반환합니다. Returns Type Description naver.maps.Size 파노라마 화면 크기 getVisible() 파노라마의 노출 여부를 반환합니다. Returns Type Description boolean 파노라마 노출 여부 getZoom() 파노라마의 줌 레벨을 반환합니다. Returns Type Description number 파노라마 줌 레벨 setOptions(newOptions|key, value) 파노라마의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Argument Description newOptions|key object | string 파노라마의 옵션 객체 또는 특정 옵션의 이름 value any &lt;optional&gt; 옵션의 값 setPanoId(panoId) 파노라마의 id를 설정합니다. Parameters Name Type Description panoId string 파노라마 id Fires pano_status pano_changed setPanoIdWithPov(panoId, pov) 파노라마의 id와 시야를 함께 설정합니다. Parameters Name Type Description panoId string 파노라마 id pov PanoramaPov 파노라마 시야 Fires pano_status pano_changed pov_changed setPosition(position) 파노라마의 위치를 설정합니다. 해당 위치에서 가장 가까운 파노라마(검색 반경 300미터)를 자동으로 설정합니다. Parameters Name Type Description position naver.maps.LatLng | LatLngLiteral 파노라마 위치 Fires pano_status pano_changed setPov(pov) 파노라마의 시야를 설정합니다. Parameters Name Type Description pov PanoramaPov 파노라마 시야 Fires pov_changed setScale(scale) 파노라마의 배율을 설정합니다. Parameters Name Type Description scale number 파노라마 배율 setSize(size) 파노라마의 화면 크기를 펙셀 단위로 설정합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 파노라마 화면 크기 setVisible(visible) 파노라마의 노출 여부를 설정합니다. Parameters Name Type Description visible boolean 파노라마 노출 여부 setZoom(zoom) 파노라마의 줌 레벨을 설정합니다. Parameters Name Type Description zoom number 파노라마 줌 레벨 Fires pov_changed zoomIn() 파노라마를 1 레벨 확대합니다. Fires pov_changed zoomOut() 파노라마를 1 레벨 축소합니다. Fires pov_changed Type Definitions PanoramaLocation PanoramaLocation 객체는 파노라마의 위치 정보를 나타냅니다. Type: object Properties Name Type Description panoId string 파노라마의 id입니다. title string 파노라마의 도로명입니다. address string 파노라마의 주소입니다. coord naver.maps.LatLng 파노라마 위치(촬영 위치)의 위/경도 좌표입니다. photodate string 파노라마의 촬영일입니다. PanoramaOptions PanoramaOptions 객체는 파노라마를 정의하는 옵션을 나타냅니다. panoId 속성과 position 속성 중 하나는 반드시 설정해야 합니다. 두 속성을 모두 설정하면, 우선순위에 따라 panoId 속성을 적용합니다. Type: object Properties Name Type Default Description size naver.maps.Size | SizeLiteral 파노라마의 크기입니다. 이 옵션을 설정하지 않으면 파노라마 초기화 시 파노라마 개체가 삽입된 요소의 크기로 설정합니다. panoId string 파노라마의 id입니다. position naver.maps.LatLng | LatLngLiteral 파노라마의 위/경도 좌표입니다. pov PanoramaPov 파노라마의 시야 정보입니다. visible boolean true 파노라마의 노출 여부입니다. minScale number 0 파노라마의 최소 배율입니다. maxScale number 10 파노라마의 최대 배율입니다. minZoom number 0 파노라마의 최소 줌 레벨입니다. maxZoom number 4 파노라마의 최대 줌 레벨입니다. flightSpot boolean true 주변 항공뷰 아이콘 표시 여부입니다. logoControl boolean true NAVER 로고 컨트롤의 표시 여부입니다. logoControlOptions LogoControlOptions NAVER 로고 컨트롤의 옵션입니다. 자세한 설명은 LogoControlOptions 명세를 참고합니다. zoomControl boolean false 줌 컨트롤의 표시 여부입니다. zoomControlOptions ZoomControlOptions 줌 컨트롤의 옵션입니다. 자세한 설명은 ZoomControlOptions 명세를 참고합니다. aroundControl boolean false 주변 컨트롤(거리뷰/항공뷰 전환)의 표시 여부입니다. aroundControlOptions AroundControlOptions 주변 컨트롤(거리뷰/항공뷰 전환)의 옵션입니다. 자세한 설명은 AroundControlOptions 명세를 참고합니다. Example var panoramaOptions = { size: new naver.maps.Size(800, 600), // panoId: \"GeuHvj1YMFW56xcrravtcg==\", position: new naver.maps.LatLng(37.3599605, 127.1058814), pov: { pan: -135, tilt: 29, fov: 100 }, visible: true, aroundControl: true, minScale: 0, maxScale: 10, minZoom: 0, maxZoom: 4, flightSpot: true, logoControl: true, logoControlOptions: { position: naver.maps.Position.BOTTOM_RIGHT }, zoomControl: true, zoomControlOptions: { position: naver.maps.Position.TOP_LEFT, style: naver.maps.ZoomControlStyle.SMALL }, aroundControl: true, aroundControlOptions: { position: naver.maps.Position.TOP_RIGHT } }; var panorama = new naver.maps.Panorama(\"pano\",panoramaOptions); PanoramaPov PanoramaPov 객체는 파노라마의 시야(POV, Point of View) 정보를 나타냅니다. Type: object Properties Name Type Default Description pan number 0 카메라의 이동(좌우) 위치입니다. 진북 기준이며, 값은 -180(좌)~180(우)입니다. tilt number 0 카메라의 이동(상하) 위치입니다. 값은 -90(하)~90(상)입니다. fov number 90 카메라의 각도입니다. 값은 100(최대)~20(최소)입니다. Events init 파노라마 초기화를 끝내면 발생하는 이벤트입니다. pano_changed 파노라마 조회를 끝내면 발생하는 이벤트입니다. pano_status 파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다. Parameters Name Type Description panoramaStatus string 파노라마 요청 결과(OK: 성공, ERROR: 실패) pov_changed 파노라마 시야가 변경되면 발생하는 이벤트입니다. × Search results Close "},"naver.maps.PanoramaProjection.html":{"id":"naver.maps.PanoramaProjection.html","title":"Interface: PanoramaProjection","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API PanoramaProjection Interface: PanoramaProjection naver.maps. PanoramaProjection PanoramaProjection 인터페이스는 파노라마의 투영을 나타내는 것으로, 좌표 변환과 같은 작업에 필요한 메서드를 제공합니다. 이 인터페이스는 Panorama 인스턴스의 getProjection 메서드를 이용해 가져올 수 있으며, 직접 초기화해서 사용할 수 없습니다. Extends naver.maps.KVO Requires module:panorama Methods fromCoordToPov(coord) 지정한 위/경도 좌표에 해당하는 파노라마 시야를 반환합니다. Parameters Name Type Description coord naver.maps.LatLng 위/경도 좌표 Returns Type Description PanoramaPov 파노라마 시야 Example 파노라마 초기화 이벤트 발생 시 추가한 마커를 바라보도록 시야를 조정하는 예제 var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); var marker = new naver.maps.Marker({ position: new naver.maps.LatLng(37.359484, 127.105333) }); naver.maps.Event.addListener(pano, \"init\", function() { marker.setMap(pano); var proj = pano.getProjection(); var lookAtPov = proj.fromCoordToPov(marker.getPosition()); if (lookAtPov) { pano.setPov(lookAtPov); } }); × Search results Close "},"naver.maps.Point.html":{"id":"naver.maps.Point.html","title":"Class: naver.maps.Point","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Point Class: naver.maps.Point naver.maps. Point Point 클래스는 2차원 평면의 좌표를 정의합니다. new naver.maps.Point(x, y) Parameters Name Type Default Description x number 0 x 좌표 y number 0 y 좌표 Methods add(x, y) 좌표 객체의 x, y에 지정한 수치를 더합니다. Parameters Name Type Description x number x 좌표 y number y 좌표 Returns Type Description naver.maps.Point this add(point) 좌표 객체의 x, y에 지정한 좌표의 x, y를 더합니다. Parameters Name Type Description point Coord | PointLiteral 더할 좌표 객체 Returns Type Description naver.maps.Point this ceil() 좌표 객체의 x, y값을 올려 정수 형태로 만듭니다. Returns Type Description naver.maps.Point this clone() 객체의 복제본을 반환합니다. Returns Type Description naver.maps.Point 복제된 객체 div(point) 좌표 객체의 x, y에 지정한 좌표의 x, y를 나눕니다. Parameters Name Type Description point Coord | PointLiteral 나눌 좌표 객체 Returns Type Description naver.maps.Point this div(x, y) 좌표 객체의 x, y에 지정한 수치를 나눕니다. Parameters Name Type Description x number x 좌표 y number y 좌표 Returns Type Description naver.maps.Point this equals(point) 객체의 좌표와 지정한 좌표가 같은지 여부를 확인합니다. Parameters Name Type Description point Coord | PointLiteral 비교할 좌표 객체 Returns Type Description boolean 동일 여부 floor() 좌표 객체의 x, y값의 소수점 이하를 버리고 정수 형태로 만듭니다. Returns Type Description naver.maps.Point this mul(x, y) 좌표 객체의 x, y에 지정한 수치를 곱합니다. Parameters Name Type Description x number x 좌표 y number y 좌표 Returns Type Description naver.maps.Point this mul(point) 좌표 객체의 x, y에 지정한 좌표의 x, y를 곱합니다. Parameters Name Type Description point Coord | PointLiteral 곱할 좌표 객체 Returns Type Description naver.maps.Point this round() 좌표 객체의 x, y값을 반올림한 정수 형태로 만듭니다. Returns Type Description naver.maps.Point this sub(point) 좌표 객체의 x, y에 지정한 좌표의 x, y를 뺍니다. Parameters Name Type Description point Coord | PointLiteral 뺄 좌표 객체 Returns Type Description naver.maps.Point this sub(x, y) 좌표 객체의 x, y에 지정한 수치를 뺍니다. Parameters Name Type Description x number x 좌표 y number y 좌표 Returns Type Description naver.maps.Point this toString() 객체의 좌표를 문자열로 반환합니다. Returns Type Description string 좌표를 나타내는 문자열로 형식은 (x,y)입니다. Example var point = new naver.map.Point(128, 256); point.toString(); // '(128,256)' × Search results Close "},"naver.maps.PointBounds.html":{"id":"naver.maps.PointBounds.html","title":"Class: naver.maps.PointBounds","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API PointBounds Class: naver.maps.PointBounds naver.maps. PointBounds PointBounds 클래스는 최소 좌표와 최대 좌표를 포함하는 직사각형의 지리적 영역(이하 좌표 경계)을 정의합니다. new naver.maps.PointBounds(minPoint, maxPoint) Parameters Name Type Description minPoint naver.maps.Point 최소 좌표 maxPoint naver.maps.Point 최대 좌표 Methods &lt;static&gt; bounds(point, pointN) 두 개 이상의 좌표 중 최소/최대 좌표를 선정하여 새로운 PointBounds 객체를 반환하는 팩토리 메서드입니다. Parameters Name Type Argument Description point Coord | PointLiteral 좌표 객체 pointN Coord | PointLiteral &lt;repeatable&gt; 좌표 객체 Returns Type Description naver.maps.PointBounds 좌표 경계 clone() 객체의 복제본을 반환합니다. Returns Type Description naver.maps.PointBounds 복제된 객체 equals(bounds) 객체의 좌표 경계와 지정한 좌표 경계가 같은지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 비교할 좌표 경계 객체 Returns Type Description boolean 동일 여부 extend(point) 객체의 좌표 경계에 지정한 좌표가 들어가도록 좌표 경계를 확장합니다. Parameters Name Type Description point Coord | PointLiteral 확장할 좌표 Returns Type Description naver.maps.PointBounds this getCenter() 좌표 경계의 중심 좌표를 반환합니다. Returns Type Description naver.maps.Point 좌표 경계의 중심 좌표 getMax() 좌표 경계의 최대 좌표를 반환합니다. Returns Type Description naver.maps.Point 최대 좌표 getMin() 좌표 경계의 최소 좌표를 반환합니다. Returns Type Description naver.maps.Point 최소 좌표 hasBounds(bounds) 객체의 좌표 경계가 지정한 좌표 경계를 포함하는지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 확인할 좌표 경계 객체 Returns Type Description boolean 포함 여부 hasPoint(point) 객체의 좌표 경계 내에 지정한 좌표가 있는지 여부를 확인합니다. Parameters Name Type Description point Coord | PointLiteral 확인할 좌표 객체 Returns Type Description boolean 포함 여부 intersects(bounds) 객체의 좌표 경계가 지정한 좌표 경계와 겹치는 부분이 있는지 여부를 확인합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 확인할 좌표 경계 객체 Returns Type Description boolean 겹침 여부 maxX() 최대 좌표의 x 좌표를 반환합니다. Returns Type Description number x 좌표 maxY() 최대 좌표의 y 좌표를 반환합니다. Returns Type Description number y 좌표 minX() 최소 좌표의 x 좌표를 반환합니다. Returns Type Description number x 좌표 minY() 최소 좌표의 y 좌표를 반환합니다. Returns Type Description number y 좌표 toString() 객체의 좌표 경계를 문자열로 반환합니다. Returns Type Description string 좌표 경계를 나타내는 문자열로 형식은 (({minX},{minY}),({maxX},{maxY}))입니다. Example var bounds = new naver.map.PointBounds( new naver.maps.Point(0, 0), new naver.maps.Point(256, 256)); bounds.toString(); // '((0,0),(256,256))' union(bounds) 객체의 좌표 경계와 지정한 좌표 경계를 모두 포함하는 새로운 좌표 경계 객체를 반환합니다. Parameters Name Type Description bounds Bounds | PointBoundsLiteral 확장할 좌표 경계 Returns Type Description naver.maps.PointBounds 확장된 새로운 좌표 경계 객체 × Search results Close "},"naver.maps.Polygon.html":{"id":"naver.maps.Polygon.html","title":"Class: naver.maps.Polygon","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Polygon Class: naver.maps.Polygon naver.maps. Polygon Polygon 클래스는 폴리곤을 정의합니다. new naver.maps.Polygon(options) Parameters Name Type Argument Description options PolygonOptions &lt;optional&gt; 도형 옵션 Tutorials 도형 Extends naver.maps.OverlayView Methods getAreaSize() 도형의 전체 면적을 제곱미터 단위로 반환합니다. Returns Type Description number 면적 getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description PolygonOptions | any 도형 옵션 getPath() 첫 번째 도형의 좌표 목록을 반환합니다. Returns Type Description ArrayOfCoords | KVOArrayOfCoords 첫 번째 도형의 좌표 목록 getPaths() 모든 도형의 좌표 목록을 반환합니다. Returns Type Description Array.&lt;ArrayOfCoords&gt; | KVOArray.&lt;KVOArrayOfCoords&gt; 모든 도형의 좌표 목록 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description PolygonOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setClickable(clickable) 도형의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부 Fires clickable_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options PolygonOptions 도형 옵션 Fires clickable_changed visible_changed zIndex_changed setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션값 Fires clickable_changed visible_changed zIndex_changed setPath(path) 도형의 좌표 목록을 설정합니다. Parameters Name Type Description path ArrayOfCoords | KVOArrayOfCoords | ArrayOfCoordsLiteral 도형 좌표 목록 setPaths(paths) 도형의 좌표 목록을 설정합니다. Parameters Name Type Description paths Array.&lt;ArrayOfCoords&gt; | KVOArray.&lt;KVOArrayOfCoords&gt; | Array.&lt;ArrayOfCoordsLiteral&gt; 도형 좌표 목록. 여러 개의 path로 구성됩니다. setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일값 setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options PolygonOptions 도형 스타일 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions PolygonOptions PolygonOptions 객체는 Polygon을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. paths Array.&lt;ArrayOfCoords&gt; | KVOArray.&lt;KVOArrayOfCoords&gt; | Array.&lt;ArrayOfCoordsLiteral&gt; 도형의 좌표 목록입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; none 도형 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. Events click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.Polyline.html":{"id":"naver.maps.Polyline.html","title":"Class: naver.maps.Polyline","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Polyline Class: naver.maps.Polyline naver.maps. Polyline Polyline 클래스는 폴리라인을 정의합니다. new naver.maps.Polyline(options) Parameters Name Type Argument Description options PolylineOptions &lt;optional&gt; 도형 옵션 Tutorials 도형 Extends naver.maps.OverlayView Methods getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDistance() 폴리라인의 길이를 반환합니다. Returns Type Description number 폴리라인의 길이(미터) getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description PolylineOptions | any 도형 옵션 getPath() 도형 좌표 목록을 반환합니다. 내부적으로 좌표 목록은 KVOArray 객체로 관리됩니다. 따라서 도형의 좌표를 동적으로 추가, 삭제, 수정할 수 있습니다. Returns Type Description ArrayOfCoords | KVOArrayOfCoords 도형 좌표 목록 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description PolylineOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setClickable(clickable) 도형의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부 Fires clickable_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options PolylineOptions 도형 옵션 Fires clickable_changed visible_changed zIndex_changed setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션 값 setPath(path) 도형의 좌표 목록을 설정합니다. Parameters Name Type Description path ArrayOfCoords | KVOArrayOfCoords | ArrayOfCoordsLiteral 도형 좌표 목록. 내부적으로 좌표 목록은 KVOArray 객체로 관리됩니다. 따라서 도형의 좌표를 동적으로 추가, 삭제, 수정할 수 있습니다. setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options PolylineOptions 도형 스타일 setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일 값 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions PolylineOptions PolylineOptions 객체는 Polyline을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. path ArrayOfCoords | KVOArrayOfCoords | ArrayOfCoordsLiteral 도형의 좌표 목록입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. startIcon naver.maps.PointingIcon &lt;optional&gt; 도형의 시작점에 표시할 아이콘입니다. 아래와 같이 지원합니다. startIconSize number &lt;optional&gt; 도형의 시작점에 표시할 아이콘의 크기(픽셀)입니다. 해당 옵션은 IE9 이상에서 지원합니다. endIcon naver.maps.PointingIcon &lt;optional&gt; 도형의 끝점에 표시할 아이콘입니다. 아래와 같이 지원합니다. endIconSize number &lt;optional&gt; 도형의 끝점에 표시할 아이콘의 크기(픽셀)입니다. 해당 옵션은 IE9 이상에서 지원합니다. Events click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.Projection.html":{"id":"naver.maps.Projection.html","title":"Interface: Projection","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Projection Interface: Projection naver.maps. Projection Projection 클래스는 지도 투영을 만들 때 구현해야 할 메서드와 속성을 정의하고 있는 기본 클래스입니다. NAVER 지도 API에서 기본으로 제공하는 투영(UTMK, EPSG3857 등)은 이 클래스를 상속받아 구현되었습니다. 사용자 정의 지도 투영을 만들려면 이 클래스를 상속받아 구현합니다. Tutorials 지도 투영과 좌표 체계 Methods fromCoordToPoint(coord) 지정한 지도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description coord Coord 지도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 지도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description Coord 지도 좌표 × Search results Close "},"naver.maps.Rectangle.html":{"id":"naver.maps.Rectangle.html","title":"Class: naver.maps.Rectangle","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Rectangle Class: naver.maps.Rectangle naver.maps. Rectangle Rectangle 클래스는 사각형 모양의 폴리곤을 정의합니다. new naver.maps.Rectangle(options) Parameters Name Type Argument Description options RectangleOptions &lt;optional&gt; 도형 옵션 Tutorials 도형 Extends naver.maps.OverlayView Methods getAreaSize() 도형의 전체 면적을 제곱미터 단위로 반환합니다. Returns Type Description number 면적 getBounds() 도형의 좌표 경계를 반환합니다. Returns Type Description Bounds 좌표 경계 getClickable() 도형의 클릭 허용 여부를 반환합니다. Returns Type Description boolean 클릭 허용 여부 getDrawingRect() 도형이 그려지는 영역의 경계 좌표를 반환합니다. 기준 좌표는 세계 좌표를 화면 픽셀로 변환한 픽셀 좌표입니다. 좌표 체계에 대한 자세한 설명은 지도 투영과 좌표 체계의 좌표 체계를 참고합니다. Returns Type Description Bounds 경계 좌표 getMap() 현재 오버레이가 추가된 Map 객체를 반환합니다. Inherited From naver.maps.OverlayView#getMap Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 도형의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description RectangleOptions | any 도형 옵션 getStyles(key) 도형의 모든 스타일 또는 특정 스타일의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 스타일 이름 Returns Type Description RectangleOptions | any 도형 스타일 getVisible() 도형의 노출 여부를 반환합니다. Returns Type Description boolean 노출 허용 여부 getZIndex() 도형의 쌓임 순서를 반환합니다. Returns Type Description number 쌓임 순서 setBounds(bounds) 도형의 좌표 경계를 설정합니다. Parameters Name Type Description bounds Bounds | BoundsLiteral 좌표 경계 Fires bounds_changed setClickable(clickable) 도형의 클릭 허용 여부를 설정합니다. Parameters Name Type Description clickable boolean 클릭 허용 여부 Fires clickable_changed setMap(map) 오버레이를 지도에 추가합니다. 인수로 null을 전달하면 오버레이를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 오버레이를 추가할 Map 객체 Inherited From naver.maps.OverlayView#setMap setOptions(options) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options RectangleOptions 도형 옵션 Fires bounds_changed clickable_changed visible_changed zIndex_changed setOptions(key, value) 도형의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 옵션 이름 value any 도형 옵션값 Fires bounds_changed clickable_changed visible_changed zIndex_changed setStyles(key, value) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 도형 스타일 이름 value any 도형 스타일 값 setStyles(options) 도형의 스타일을 변경하거나 새로 설정합니다. Parameters Name Type Description options RectangleOptions 도형 스타일 setVisible(visible) 도형의 노출 허용 여부를 설정합니다. Parameters Name Type Description visible boolean 노출 허용 여부 Fires visible_changed setZIndex(zIndex) 도형의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 쌓임 순서 Fires zIndex_changed Type Definitions RectangleOptions RectangleOptions 객체는 Rectangle을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map &lt;optional&gt; 도형이 그려질 지도 객체입니다. bounds Bounds | BoundsLiteral 도형의 좌표 경계입니다. strokeWeight number &lt;optional&gt; 1 도형의 선 두께입니다. strokeOpacity number &lt;optional&gt; 1 도형의 선 불투명도입니다. 값의 범위는 0~1입니다. strokeColor string &lt;optional&gt; #007EEA 도형의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeStyle string &lt;optional&gt; solid 도형의 선 스타일입니다. solid shortdash shortdot shortdashdot shortdashdotdot dot dash longdash dashdot longdashdot longdashdotdot strokeLineCap string &lt;optional&gt; butt 도형에 사용되는 선의 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 도형에 사용되는 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; none 도형 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. fillOpacity number &lt;optional&gt; 1 도형 영역을 채울 색상의 불투명도입니다. 값의 범위는 0~1입니다. clickable boolean &lt;optional&gt; false 도형의 클릭 허용 여부입니다. 이 값이 true이면 도형은 마우스, 터치 이벤트를 받을 수 있습니다. 그렇지 않으면 이벤트를 받지 못합니다. visible boolean &lt;optional&gt; true 도형의 노출 허용 여부입니다. zIndex number &lt;optional&gt; 0 도형의 쌓임 순서입니다. Events bounds_changed Parameters Name Type Description bounds Bounds 도형의 좌표 경계가 변경되면 이벤트가 발생합니다. click Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 클릭했을 때 이벤트가 발생합니다. clickable_changed Parameters Name Type Description clickable boolean 도형의 클릭 허용 여부 옵션이 변경되면 이벤트가 발생합니다. dblclick Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 왼쪽 버튼을 더블 클릭했을 때 이벤트가 발생합니다. mousedown Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 누를 때 이벤트가 발생합니다. mouseout Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계를 벗어날 때 이벤트가 발생합니다. mouseover Parameters Name Type Description pointerEvent PointerEvent 사용자의 마우스 포인터가 도형의 경계에 들어올 때 이벤트가 발생합니다. mouseup Parameters Name Type Description pointerEvent PointerEvent 사용자가 도형에서 마우스 버튼을 놓을 때 이벤트가 발생합니다. visible_changed Parameters Name Type Description visible boolean 도형의 노출 허용 여부 옵션이 변경되면 이벤트가 발생합니다. zIndex_changed Parameters Name Type Description zIndex number 도형의 쌓임 순서 옵션이 변경되면 이벤트가 발생합니다. × Search results Close "},"naver.maps.ScaleControl.html":{"id":"naver.maps.ScaleControl.html","title":"Class: naver.maps.ScaleControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API ScaleControl Class: naver.maps.ScaleControl naver.maps. ScaleControl ScaleControl 클래스는 지도 축척 컨트롤을 정의합니다. new naver.maps.ScaleControl(ScaleControlOptions) Parameters Name Type Description ScaleControlOptions ScaleControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { scaleControl: true, scaleControlOptions: { position: naver.maps.Position.TOP_LEFT } }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions ScaleControlOptions ScaleControlOptions 객체는 지도 축척 컨트롤의 위치를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position BOTTOM_RIGHT 지도 축척 컨트롤을 배치할 위치입니다. × Search results Close "},"naver.maps.Service.html":{"id":"naver.maps.Service.html","title":"StaticObjects: Service","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Service StaticObjects: Service naver.maps. Service Service 객체는 NAVER 지도 API v3을 이용해 호출할 수 있는 서버 API들을 메서드로 제공합니다. Tutorials Geocoder를 활용한 주소와 좌표 검색 API 호출하기 Members &lt;static, readonly&gt; CoordinatesType CoordinatesType 객체는 좌표 체계의 이름을 나타냅니다. Properties Name Type Default Description LATLNG string epsg:4326 위/경도(WGS 84) 좌표계를 나타냅니다. UTMK string nhn:2048 UTMK 좌표계를 나타냅니다. TM128 string nhn:128 TM128(KATECH) 좌표계를 나타냅니다. EPSG3857 string epsg:3857 구글맵(EPSG3857) 좌표계를 나타냅니다. &lt;static, readonly&gt; GeocodeStatus GeocodeStatus Geocode 응답 상태를 나타냅니다. Properties Name Type Default Description OK string OK 정상 응답 INVALID_REQUEST string INVALID_REQUEST 요청 에러 SYSTEM_ERROR string SYSTEM_ERROR 예외처리가 안된 에러 &lt;static, readonly&gt; OrderType OrderType 객체는 변환 작업 이름을 나타냅니다. Properties Name Type Default Description LEGAL_CODE string legalcode 좌표를 법정동으로 나타냅니다. ADDR string addr 좌표를 행정동으로 나타냅니다. ROAD_ADDR string roadaddr 좌표를 지번 주소로 나타냅니다. ADM_CODE string admcode 좌표를 도로명 주소로 나타냅니다. &lt;static, readonly&gt; ReverseGeocodeStatusCode ReverseGeocodeStatusCode ReverseGeocode 응답 상태 코드를 나타냅니다. Properties Name Type Default Description CODE_0 string 0 정상적인 기능수행 및 반환된 결과가 있는 경우 CODE_3 string 3 정상적인 기능수행 및 반환된 결과가 없는 경우 CODE_100 string 100 요청 파라미터가 잘못된 경우 CODE_900 string 900 정의되지 않은 에러 &lt;static, readonly&gt; ReverseGeocodeStatusName ReverseGeocodeStatusName ReverseGeocode 응답 상태 이름을 나타냅니다. Properties Name Type Argument Default Description OK string ok 정상적인 기능수행 및 반환된 결과가 있는 경우 NO_RESULTS string &lt;optional&gt; no result 정상적인 기능수행 및 반환된 결과가 없는 경우 INVALID_REQUEST string &lt;optional&gt; invalid request 요청 파라미터가 잘못된 경우 UNKNOWN_ERROR_IO_ERROR string &lt;optional&gt; unknown error / io error 정의되지 않은 에러 &lt;static, readonly&gt; Status Status 객체는 서비스의 응답 상태를 나타냅니다. Properties Name Type Default Description OK number 200 요청이 성공한 상태입니다. ERROR number 500 요청이 실패한 상태입니다. Methods fromAddrToCoord() 특정 주소의 좌표를 반환하는 geocode API를 호출합니다. See naver.maps.Service#geocode fromCoordToAddr() 특정 좌표에 해당하는 주소를 반환하는 reversegeocode API를 호출합니다. See naver.maps.Service#reverseGeocode geocode(options, callback) 특정 주소의 좌표를 반환하는 geocode API를 호출합니다. Parameters Name Type Description options ServiceOptions 서버 API 호출 시 전달할 옵션 Properties Name Type Description query string 주소 검색을 위한 주소 coordinate string 검색 중심 좌표. lon,lat 형식 filter string 검색 결과 필터링 조건. ’필터 타입@코드1;코드2;… ’ 형식 예) HCODE@4113554500;4113555000 - HCODE: 행정동 코드 - BCODE: 법정동 코드 page number 페이지 번호 count number 결과 목록 크기 callback function 결과 반환 시 실행할 콜백 함수 Properties Name Type Argument Description status naver.maps.Service.Status 응답 결과에 대한 상태 코드 response GeocodeResponse &lt;optional&gt; 응답 본문 reverseGeocode(options, callback) 특정 좌표에 해당하는 주소를 반환하는 reversegeocode API를 호출합니다. Parameters Name Type Description options ServiceOptions 서버 API 호출 시 전달할 옵션 Properties Name Type Description coords string | Coord | CoordLiteral 주소 검색을 위한 입력 좌표 sourcecrs string 입력 좌표계 코드 targetcrs string 출력 좌표계 코드 orders string 변환 작업 이름 callback function 결과 반환 시 실행할 콜백 함수 Properties Name Type Argument Description status naver.maps.Service.Status 응답 결과의 상태 코드 response ReverseGeocodeResponse &lt;optional&gt; 응답 본문 Type Definitions Addition0 Addition0은 추가정보 나타냅니다. 지번 주소인 경우 reserved, 도로명 주소인 경우 건물정보 Type: object Properties Name Type Description type string 도로명 주소이고 건물정보가 있는경우 ‘building’ value string 도로명 주소이고 건물정보가 있는경우 건물명 Addition1 Addition1은 추가정보 나타냅니다. 지번 주소인 경우 reserved, 도로명 주소인 경우 우편번호 Type: object Properties Name Type Description type string 도로명 주소이고 우편번호정보가 있는경우 ‘zipcode’ value string 도로명 주소이고 우편번호정보가 있는경우 우편번호 Addition2 Addition2은 추가정보 나타냅니다. 지번 주소인 경우 reserved, 도로명 주소인 경우 도로코드 Type: object Properties Name Type Description type string 도로명 주소일경우 ‘roadGroupCode’ value string 도로명 주소일경우 도로코드(12자리 road group code) Addition3 Addition3 reserved Type: object Addition4 Addition4 reserved Type: object AddressItem AddressItem은 특정 주소의 정보를 나타냅니다. (deprecated) Type: object Properties Name Type Description address string 개별 주소의 전체 텍스트 addrdetail object 개별 주소의 상세 정보 Properties Name Type Description country string 개별 주소의 국가명 sido string 개별 주소가 속한 특별시/광역시/도에 해당되는 정보 sigugun string 개별 주소가 속한 일반시/구/군/면 해당되는 정보 dongmyun string 개별 주소가 속한 동/면/리에 해당되는 정보 rest string 지번 주소 또는 도로명과 같은 개별 주소의 나머지 정보 isRoadAddress boolean 해당 주소가 도로명 주소인지 여부 point PointObjectLiteral 개별 주소의 좌표 AddressItemV2 AddressItemV2은 주소 검색 결과를 나타냅니다. Type: object Properties Name Type Description roadAddress string 도로명 주소 jibunAddress string 지번 주소 englishAddress string 영어 주소 addressElements array 주소를 이루는 요소들 x string x 좌표(경도) y string y 좌표(위도) distance string 검색 중심 좌표로부터의 거리(단위: 미터) Area0 Area0은 국가 정보를 나타냅니다. Type: object Properties Name Type Description name string 국가 코드 최상위 도메인 두 자리 coords Coords 행정 구역과 관련된 좌표 Area1 Area1은 행정 구역 단위 명칭 1 정보 나타냅니다. Type: object Properties Name Type Description name string 대한민국인 경우 행정안전부에서 공시된 시/도 명칭 coords Coords 행정 구역과 관련된 좌표 Area2 Area2은 행정 구역 단위 명칭 2 정보 나타냅니다. Type: object Properties Name Type Description name string 대한민국인 경우 행정안전부에서 공시된 시/군/구 명칭 coords Coords 행정 구역과 관련된 좌표 Area3 Area3은 행정 구역 단위 명칭 3 정보 나타냅니다. Type: object Properties Name Type Description name string 대한민국인 경우 행정안전부에서 공시된 읍/면/동 명칭 coords Coords 행정 구역과 관련된 좌표 Area4 Area4은 행정 구역 단위 명칭 4 정보 나타냅니다. Type: object Properties Name Type Description name string 대한민국인 경우 행정안전부에서 공시된 리 명칭 coords Coords 행정 구역과 관련된 좌표 Coords Coords은 행정 구역과 관련된 좌표를 나타냅니다. Type: object Properties Name Type Description center object 행정 구역의 중심 좌표 Properties Name Type Description crs string 좌표계 코드 x string x축 좌표, 예) 경위도(epsg:4326)인 경우 위도(longitude) y string y축 좌표, 예) 경위도(epsg:4326)인 경우 경도(latitude) GeocodeResponse GeocodeResponse는 특정 주소의 좌표를 반환하는 geocode API의 응답 형태입니다. Type: object Properties Name Type Description result object 기존 응답 형식의 내용을 담고 있는 컨테이너. (deprecated) Properties Name Type Description userquery string API에 질의한 주소 total number 사용자가 질의한 주소에 해당되는 좌표의 결과 수 items Array.&lt;naver.maps.Service~AddressItem&gt; 좌표 목록의 배열 v2 object API의 응답 내용을 담고 있는 컨테이너. Properties Name Type Description status naver.maps.Service.GeocodeStatus 검색 결과 상태 코드 meta Meta 응답 정보 addresses Array.&lt;naver.maps.Service~AddressItemV2&gt; 주소 검색 결과 목록 errorMessage string 예외 발생 시 메시지 Example { \"result\": { \"total\": 1, \"userquery\": \"불정로6\", \"items\": [ { \"address\": \"경기도 성남시 분당구 불정로 6 그린팩토리\", \"addrdetail\": { \"country\": \"대한민국\", \"sido\": \"경기도\", \"sigugun\": \"성남시 분당구\", \"dongmyun\": \"불정로\", \"rest\": \" 6 그린팩토리\" }, \"isRoadAddress\": true, \"point\": { \"x\": 127.1052133, \"y\": 37.3595316 } } ] }, \"v2\": { \"status\": \"OK\", \"meta\": { \"totalCount\": 1, \"page\": 1, \"count\": 1 }, \"addresses\": [ { \"roadAddress\": \"경기도 성남시 분당구 불정로 6 그린팩토리\", \"jibunAddress\": \"경기도 성남시 분당구 정자동 178-1 그린팩토리\", \"englishAddress\": \"6, Buljeong-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea\", \"addressElements\": [ { \"types\": [ \"POSTAL_CODE\" ], \"longName\": \"13561\", \"shortName\": \"\", \"code\": \"\" } ], \"x\": \"127.10522081658463\", \"y\": \"37.35951219616309\", \"distance\": 20.925857741585514 } ], \"errorMessage\": \"\" } } Land Land는 상세주소 정보 나타냅니다. Type: object Properties Name Type Description type string 지번주소의 경우 지적 타입, 예) 대한민국 지번 주소인 경우 1: 일반토지, 2: 산, 도로명주소의 경우 reserved name string 상세 명칭, 예) 대한민국 지번 주소인 경우 reserved, 대한민국 도로명 주소인 경우 도로명 number1 string 상세 번호 1, 예) 대한민국 지번 주소인 경우 토지 본번호, 대한민국 도로명 주소인 경우 상세주소 number2 string 상세 번호 2, 예) 대한민국 지번 주소인 경우 토지 부번호, 대한민국 도로명 주소인 경우 reserved coords Coords 지적 구역에 관계된 좌표 (reserved) Meta Meta는 응답 정보를 나타냅니다. Type: object Properties Name Type Description totalCount number 총 검색 건수 page number 현재 페이지 번호 count number 페이지 내 결과 개수 Region Region은 지역 명칭 정보을 나타냅니다. Type: object Properties Name Type Description area0 Area0 국가 정보 area1 Area1 시/도 정보 area2 Area2 시/군/구 정보 area3 Area3 읍/면/동 정보 area4 Area4 리 정보 land Land 상세주소 정보 addition0 Addition0 추가정보 addition1 Addition1 추가정보 addition2 Addition2 추가정보 addition3 Addition3 reserved addition4 Addition4 reserved ResultItem ResultItem은 ReverseGeocode 응답 결과를 나타냅니다. Type: object Properties Name Type Description name string 변환 작업 이름 code object 코드 정보 Properties Name Type Description id string 코드값 type string 코드 타입, 예) L: 법정동, A: 행정동, S: 동일법정동 이름 존재하는 행정동 mappingId string id와 관련된 매핑 코드, 예) 법정 코드의 매핑된 네이버 동 코드 또는 행정 코드의 매핑된 네이버 동 코드 region Region 지역 명칭 정보. ReverseGeocodeAddress ReverseGeocodeAddress은 ReverseGeocodeResponse 응답 값으로 만든 주소입니다. Type: object Properties Name Type Description roadAddress string 도로명 주소 (서버 응답 결과에 따라 지번 주소만 있을 수 있음) jibunAddress string 지번 주소 (서버 응답 결과에 따라 도로명 주소만 있을 수 있음) ReverseGeocodeResponse ReverseGeocodeResponse는 특정 좌표에 해당하는 주소를 반환하는 reversegeocode API의 응답 형태입니다. Type: object Properties Name Type Description result object 기존 응답 형식의 내용을 담고 있는 컨테이너. (deprecated) Properties Name Type Description userquery string API에 질의한 좌표 total number 사용자가 질의한 좌표에 해당되는 주소의 결과 수 items Array.&lt;naver.maps.Service~AddressItem&gt; 주소 목록의 배열 v2 object API의 응답 내용을 담고 있는 컨테이너. Properties Name Type Description status ReverseGeocodeStatus 응답 상태 results Array.&lt;naver.maps.Service~ResultItem&gt; 주소 목록의 배열 address ReverseGeocodeAddress 주소 결과 Example { \"result\": { \"total\": 2, \"userquery\": \"127.1052133,37.3595316\", \"items\": [ { \"address\": \"경기도 성남시 분당구 정자동 178-1\", \"addrdetail\": { \"country\": \"대한민국\", \"sido\": \"경기도\", \"sigugun\": \"성남시 분당구\", \"dongmyun\": \"정자동\", \"rest\": \"178-1\" }, \"isRoadAddress\": false, \"point\": { \"x\": 127.1052208, \"y\": 37.3595122 } }, { \"address\": \"경기도 성남시 분당구 불정로 6 그린팩토리\", \"addrdetail\": { \"country\": \"대한민국\", \"sido\": \"경기도\", \"sigugun\": \"성남시 분당구\", \"dongmyun\": \"불정로\", \"rest\": \"6 그린팩토리\" }, \"isRoadAddress\": true, \"point\": { \"x\": 127.1052133, \"y\": 37.3595316 } } ] }, \"v2\": { \"status\":{ \"code\":0, \"name\":\"ok\", \"message\":\"done\" }, \"results\":[ { \"name\":\"legalcode\", \"code\":{ \"id\":\"2641010100\", \"type\":\"L\", \"mappingId\":\"08410101\" }, \"region\":{ \"area0\":{ \"name\":\"kr\", \"coords\":{ \"center\":{ \"crs\":\"\", \"x\":0.0, \"y\":0.0 } } }, \"area1\":{ \"name\":\"부산광역시\", \"coords\":{ \"center\":{ \"crs\":\"EPSG:4326\", \"x\":129.0750222, \"y\":35.1798159 } } }, \"area2\":{ \"name\":\"금정구\", \"coords\":{ \"center\":{ \"crs\":\"EPSG:4326\", \"x\":129.0921, \"y\":35.243068 } } }, \"area3\":{ \"name\":\"두구동\", \"coords\":{ \"center\":{ \"crs\":\"EPSG:4326\", \"x\":129.1133567, \"y\":35.2982641 } } }, \"area4\":{ \"name\":\"\", \"coords\":{ \"center\":{ \"crs\":\"\", \"x\":0.0, \"y\":0.0 } } } } } ], address: { jibunAddress: \"경기도 성남시 분당구 정자동 178-1\", roadAddress: \"경기도 성남시 분당구 불정로 6 NAVER그린팩토리\" } } } ReverseGeocodeStatus ReverseGeocodeStatus은 ReverseGeocode 응답 상태를 나타냅니다. Type: object Properties Name Type Description code naver.maps.Service.ReverseGeocodeStatusCode 응답 상태 코드 name naver.maps.Service.ReverseGeocodeStatusName 응답 상태 이름 message string 응답 상태 설명 ServiceOptions ServiceOptions는 서버 API 호출 시 전달하기 위한 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description sourcecrs naver.maps.Service.CoordinatesType &lt;optional&gt; epsg:4326 입력 좌표계 코드 targetcrs naver.maps.Service.CoordinatesType &lt;optional&gt; epsg:4326 출력 좌표계 코드 orders naver.maps.Service.OrderType &lt;optional&gt; legalcode,admcode 변환 작업 이름 × Search results Close "},"naver.maps.Size.html":{"id":"naver.maps.Size.html","title":"Class: naver.maps.Size","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Size Class: naver.maps.Size naver.maps. Size Size 클래스는 2차원 평면의 크기를 정의합니다. new naver.maps.Size(width, height) Parameters Name Type Default Description width number 0 너비 height number 0 높이 Methods add(width, height) Size 객체의 너비와 높이에 지정한 수치를 더합니다. Parameters Name Type Description width number 너비 height number 높이 Returns Type Description naver.maps.Size this add(size) Size 객체의 너비와 높이에 지정한 Size 객체의 너비와 높이를 더합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 더할 Size 객체 Returns Type Description naver.maps.Size this ceil() Size 객체의 너비와 높이를 정수 형태(올림)로 만듭니다. Returns Type Description naver.maps.Size this clone() 객체의 복제본을 반환합니다. Returns Type Description naver.maps.Size 복제된 객체 div(size) Size 객체의 너비와 높이를 지정한 Size 객체의 너비와 높이로 나눕니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 나눌 Size 객체 Returns Type Description naver.maps.Size this div(width, height) Size 객체의 너비와 높이를 지정한 수치로 나눕니다. Parameters Name Type Description width number 너비 height number 높이 Returns Type Description naver.maps.Size this equals(size) 객체의 크기와 지정한 Size 객체의 크기가 같은지 여부를 확인합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 비교할 Size 객체 Returns Type Description boolean 동일 여부 floor() Size 객체의 너비와 높이를 정수 형태(소수점 이하 버림)로 만듭니다. Returns Type Description naver.maps.Size this mul(size) Size 객체의 너비와 높이에 지정한 Size 객체의 너비와 높이를 곱합니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 곱할 Size 객체 Returns Type Description naver.maps.Size this mul(width, height) Size 객체의 너비와 높이에 지정한 수치를 곱합니다. Parameters Name Type Description width number 너비 height number 높이 Returns Type Description naver.maps.Size this round() Size 객체의 너비와 높이를 정수 형태(반올림)로 만듭니다. Returns Type Description naver.maps.Size this sub(size) Size 객체의 너비와 높이에서 지정한 Size 객체의 너비와 높이를 뺍니다. Parameters Name Type Description size naver.maps.Size | SizeLiteral 뺄 Size 객체 Returns Type Description naver.maps.Size this sub(width, height) Size 객체의 너비와 높이에서 지정한 수치를 뺍니다. Parameters Name Type Description width number 너비 height number 높이 Returns Type Description naver.maps.Size this toString() 객체의 크기를 문자열로 반환합니다. Returns Type Description string 크기를 나타내는 문자열로 형식은 (w:{너비},h:{높이})입니다. Example var size = new naver.map.Size(1024, 768); size.toString(); // '(w:1024,h:768)' × Search results Close "},"naver.maps.StreetLayer.html":{"id":"naver.maps.StreetLayer.html","title":"Class: naver.maps.StreetLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API StreetLayer Class: naver.maps.StreetLayer naver.maps. StreetLayer StreetLayer 클래스는 거리뷰 오버레이를 하나의 지도 유형으로 나타내는 레이어를 정의합니다. new naver.maps.StreetLayer(option) Parameters Name Type Argument Description option StreetLayerOptions &lt;optional&gt; 레이어 옵션 (Deprecated) Properties Name Type Description name string 레이어 이름입니다. 이 레이어의 이름은 street입니다. Tutorials 레이어 Extends naver.maps.LabelLayer Methods getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity Type Definitions StreetLayerOptions StreetLayerOptions 객체는 StreetLayer를 정의하는 옵션을 나타냅니다. (Deprecated) Type: object Properties Name Type Default Description overlayMap boolean true 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. zIndex number 10 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. × Search results Close "},"naver.maps.Tile.html":{"id":"naver.maps.Tile.html","title":"Class: naver.maps.Tile","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Tile Class: naver.maps.Tile naver.maps. Tile Tile 클래스는 한 장의 지도 타일을 정의합니다. new naver.maps.Tile(element, tileOptions) Parameters Name Type Argument Description element HTMLElement 지도 타일에 해당하는 HTML 요소 tileOptions TileOptions &lt;optional&gt; 타일의 옵션 Extends naver.maps.KVO Methods appendTo(parentNode) 지정한 parentNode에 타일 HTML 요소를 추가합니다. Parameters Name Type Description parentNode HTMLElement 타일이 추가될 HTML 요소 cancelFadeIn() 진행 중인 페이드 인(타일이 서서히 나타나는) 효과를 즉시 중지하고, 본래의 불투명도를 설정합니다. destroy() 타일 객체를 완전히 삭제합니다. fadeIn(callback, startOpacity) 페이드 인(타일이 서서히 나타나는) 효과를 실행합니다. Parameters Name Type Argument Default Description callback function 페이드 인 효과가 완료되었을 때 실행할 콜백 함수입니다. startOpacity number &lt;optional&gt; 0 페이드 인 효과의 시작 불투명도입니다. getDuration() 타일의 fadeIn 효과 지속시간을 반환합니다. Returns Type Description number 타일의 fadeIn animation duration getElement() 타일의 HTML 요소를 반환합니다. Returns Type Description HTMLElement 타일의 HTML 요소 getOffset() 타일의 오프셋(위치)을 반환합니다. Returns Type Description naver.maps.Point 타일의 오프셋 getOpacity() 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Returns Type Description number 0~1 사이의 실수. getSize() 타일의 크기를 반환합니다. Returns Type Description naver.maps.Size 타일의 크기 getTileIndex() 타일 인덱스를 반환합니다. Returns Type Description TileIndex 타일 인덱스 getZIndex() 타일의 쌓임 순서를 반환합니다. Returns Type Description number 타일의 쌓임 순서 hide() 타일을 숨깁니다. load(tileOptions, loaded) 타일을 불러옵니다. Parameters Name Type Argument Description tileOptions TileOptions &lt;optional&gt; 타일의 옵션 loaded function 이벤트 알림 이전에 실행할 함수 remove() 타일의 HTML 요소를 지도에서 삭제합니다. reset(mapType, zoom, tileOptions) 지정한 mapType에 맞게 타일을 재설정합니다. Parameters Name Type Argument Description mapType naver.maps.MapType 재설정할 지도 유형 zoom number 타일 재설정 시 적용할 지도의 줌 레벨 tileOptions TileOptions &lt;optional&gt; 타일의 옵션 setBlank() 타일의 내용물을 비워 공백으로 만듭니다. setDuration(duration) 타일의 fadeIn 효과 지속시간을 설정합니다. 단위는 밀리초 (millisecond), 기본값은 300~600ms 입니다. Parameters Name Type Description duration number 타일의 fadeIn animation duration setOffset(offset) 타일이 표시될 오프셋(위치)을 지정합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 setOffset(x, y) 타일이 표시될 오프셋(위치)을 지정합니다. Parameters Name Type Description x number 타일의 x축 오프셋 y number 타일의 y축 오프셋 setOpacity(opacity) 타일의 불투명도를 지정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도 0~1 사이의 실수. setSize(size) 타일의 크기를 설정합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 setTileIndex(tileIndex) 타일 인덱스를 설정합니다. Parameters Name Type Description tileIndex TileIndex 타일 인덱스 setZIndex(zIndex) 타일의 쌓임 순서를 설정합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 show() 타일을 보이게 합니다. Type Definitions TileIndex TileIndex 객체는 각 타일링 시스템에서 x축과 y축에 대한 인덱스를 나타냅니다. Type: object Properties Name Type Description xIndex number x축의 인덱스 yIndex number y축의 인덱스 TileOptions TileOptions 객체는 naver.maps.Tile을 정의하는 데 필요한 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description opacity number &lt;optional&gt; 1 타일의 불투명도 duration number &lt;optional&gt; 타일의 fadeIn 효과 지속 시간 (밀리초 단위) transition boolean &lt;optional&gt; true 타일 로드 시 fadeIn 효과의 사용 여부입니다. offset naver.maps.Point &lt;optional&gt; 타일의 오프셋입니다. zIndex number &lt;optional&gt; 0 타일의 쌓임 순서입니다. size naver.maps.Size &lt;optional&gt; 타일의 크기입니다. pane HTMLElement &lt;optional&gt; 타일이 추가될 HTML 요소입니다. Events loaded 타일의 로드가 완료되면 이벤트가 발생합니다. Parameters Name Type Description tile naver.maps.Tile 로드가 완료된 타일 객체 offset_changed 타일의 오프셋(위치)이 변경되면 이벤트가 발생합니다. Parameters Name Type Description offset naver.maps.Point 타일의 오프셋 opacity_changed 타일의 불투명도가 변경되면 이벤트가 발생합니다. Parameters Name Type Description opacity number 타일의 불투명도 pane_changed 타일이 추가된 HTML 요소가 변경되면 이벤트가 발생합니다. Parameters Name Type Description paneElement HTMLElement 타일이 추가된 HTML 요소 size_changed 타일의 크기가 변경되면 이벤트가 발생합니다. Parameters Name Type Description size naver.maps.Size 타일의 크기 tileIndex_changed 타일의 인덱스가 변경되면 이벤트가 발생합니다. Parameters Name Type Description tileIndex TileIndex 타일의 인덱스 zIndex_changed 타일의 쌓임 순서가 변경되면 이벤트가 발생합니다. Parameters Name Type Description zIndex number 타일의 쌓임 순서 × Search results Close "},"naver.maps.TM128.html":{"id":"naver.maps.TM128.html","title":"StaticObjects: TM128","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API TM128 StaticObjects: TM128 naver.maps. TM128 TM128 객체는 위/경도 좌표를 기본 좌표계로 사용하는 TM128 투영 객체입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.TM128Coord Methods fromCoordToPoint(latlng) 지정한 위/경도 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 × Search results Close "},"naver.maps.TM128Coord.html":{"id":"naver.maps.TM128Coord.html","title":"StaticObjects: TM128Coord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API TM128Coord StaticObjects: TM128Coord naver.maps. TM128Coord TM128Coord 객체는 TM128 좌표를 기본 좌표계로 사용하는 투영 객체입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.UTMK Methods fromCoordToLatLng(tm128) 지정한 TM128 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromCoordToPoint(tm128) 지정한 TM128 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToCoord(latlng) 지정한 위/경도 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromLatLngToTM128(latlng) 지정한 위/경도 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromPointToTM128(point) 지정한 세계 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromTM128ToLatLng(tm128) 지정한 TM128 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromTM128ToPoint(tm128) 지정한 TM128 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromTM128ToUTMK(tm128) 지정한 TM128 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromUTMKToTM128(utmk) 지정한 UTMK 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point TM128 좌표 × Search results Close "},"naver.maps.TrafficLayer.html":{"id":"naver.maps.TrafficLayer.html","title":"Class: naver.maps.TrafficLayer","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API TrafficLayer Class: naver.maps.TrafficLayer naver.maps. TrafficLayer TrafficLayer 클래스는 교통 정보 관련 오버레이를 하나의 지도 유형으로 나타내는 레이어를 정의합니다. new naver.maps.TrafficLayer(option) Parameters Name Type Argument Description option TrafficLayerOptions &lt;optional&gt; 레이어 옵션 Properties Name Type Description name string 레이어 이름입니다. 이 레이어의 이름은 traffic입니다. Tutorials 레이어 Extends naver.maps.LabelLayer Methods endAutoRefresh() 자동 새로 고침을 종료합니다. getLayerType() 레이어의 지도 유형을 반환합니다. Inherited From naver.maps.Layer#getLayerType Fires mapType_changed mapTypeId_changed projection_changed Returns Type Description naver.maps.MapType 레이어의 지도 유형 getLayerTypeId() 레이어의 지도 유형 id를 반환합니다. Inherited From naver.maps.Layer#getLayerTypeId Returns Type Description string 레이어의 지도 유형 id getMap() 현재 레이어가 추가된 지도 객체를 반환합니다. Inherited From naver.maps.Layer#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOpacity() 레이어 타일의 불투명도를 반환합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Inherited From naver.maps.Layer#getOpacity Returns Type Description number 0~1 사이의 실수. getPaneElement() 레이어의 지도 타일이 렌더링된 창(pane)의 HTML 요소를 반환합니다. Inherited From naver.maps.Layer#getPaneElement Returns Type Description HTMLElement 레이어 HTML 요소 getRTSVersion() 최신의 교통 정보 버전을 반환합니다. Returns Type number refresh(noEffect) 레이어를 새로 고칩니다. Parameters Name Type Argument Description noEffect boolean &lt;optional&gt; 효과 적용 여부 Inherited From naver.maps.Layer#refresh refreshRTSVersion() 버전정보를 새로 고침합니다. setLayerTypeId(typeId) 레이어의 지도 유형을 설정합니다. 반드시 MapTypeRegistry 객체에 등록된 지도 유형 id를 사용합니다. Parameters Name Type Description typeId string 지도 유형 id Inherited From naver.maps.Layer#setLayerTypeId Fires addLayer removeLayer setMap(map) 레이어를 지도에 추가합니다. 인수로 null을 전달하면 레이어를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.Layer#setMap setOpacity(opacity) 레이어 타일의 불투명도를 설정합니다. 불투명도값의 범위는 0~1이며, 기본값은 1입니다. Parameters Name Type Description opacity number 불투명도. 0~1 사이의 실수. Inherited From naver.maps.Layer#setOpacity startAutoRefresh() 자동 새로 고침을 시작합니다. 이 레이어의 interval 옵션이 0보다 크면 자동으로 호출됩니다. Type Definitions TrafficLayerOptions TrafficLayerOptions 객체는 TrafficLayer를 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description interval number 300000 교통 상황을 자동으로 갱신하는 시간 간격(ms)입니다. 이 값이 0이면 자동으로 갱신하지 않습니다. 최소값은 5분입니다. overlayMap boolean true 이 값이 true이면 레이어를 타일로 간주합니다. 즉, 타일과 동일한 레벨에 위치하므로 지도 요소 구조상 제일 아래에 위치하며, 타일과 동일한 줌 효과가 적용됩니다. 이 값이 false이면 레이어를 별도의 창(pane)으로 간주합니다. 생성한 순서대로 지도 요소 구조에 추가되므로 레이어의 zIndex값에 따라서는 오버레이보다 위에 위치할 수도 있습니다. (Deprecated) zIndex number 2 레이어의 우선순위입니다. 이 값이 높을수록 다른 레이어보다 위에 표시됩니다. 오버레이 창의 zIndex는 100으로 설정되어 있으므로 이 값이 100보다 크면 오버레이 위로 레이어가 추가됩니다. 단, 레이어가 오버레이보다 위에 있을 때는 오버레이의 이벤트를 사용하지 못하니 주의해야 합니다. (Deprecated) × Search results Close "},"naver.maps.TransCoord.html":{"id":"naver.maps.TransCoord.html","title":"StaticObjects: TransCoord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API TransCoord StaticObjects: TransCoord naver.maps. TransCoord TransCoord 객체는 여러 가지의 좌표 체계 사이의 변환을 수행하는 메서드를 제공합니다. 지원하는 좌표 체계의 목록은 아래와 같습니다. LatLng: 위/경도로 나타내는 좌표계입니다. UTMK: UTMK 좌표계입니다. NAVER: NAVER의 자체 좌표계입니다. TM128: TM128 좌표계입니다. EPSG3857: EPSG3857 평면 좌표계입니다. Tutorials Geocoder를 활용한 좌표 변환 Methods fromEPSG3857ToLatLng(coord) 지정한 EPSG3857 평면 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromEPSG3857ToNaver(coord) 지정한 EPSG3857 평면 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromEPSG3857ToTM128(coord) 지정한 EPSG3857 평면 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromEPSG3857ToUTMK(coord) 지정한 EPSG3857 평면 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description coord naver.maps.Point EPSG3857 평면 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromLatLngToEPSG3857(latlng) 지정한 위/경도 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromLatLngToNaver(latlng) 지정한 위/경도 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromLatLngToTM128(latlng) 지정한 위/경도 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromLatLngToUTMK(latlng) 지정한 위/경도 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromNaverToEPSG3857(n) 지정한 NAVER 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromNaverToLatLng(n) 지정한 NAVER 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromNaverToTM128(n) 지정한 NAVER 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point TM128 좌표 fromNaverToUTMK(n) 지정한 NAVER 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromTM128ToEPSG3857(tm128) 지정한 TM128 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromTM128ToLatLng(tm128) 지정한 TM128 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromTM128ToNaver(tm128) 지정한 TM128 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromTM128ToUTMK(tm128) 지정한 TM128 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description tm128 naver.maps.Point TM128 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromUTMKToEPSG3857(utmk) 지정한 UTMK 좌표에 해당하는 EPSG3857 평면 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point EPSG3857 평면 좌표 fromUTMKToLatLng(utmk) 지정한 UTMK 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromUTMKToNaver(utmk) 지정한 UTMK 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromUTMKToTM128(utmk) 지정한 UTMK 좌표에 해당하는 TM128 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point TM128 좌표 × Search results Close "},"naver.maps.UTMK.html":{"id":"naver.maps.UTMK.html","title":"StaticObjects: UTMK","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UTMK StaticObjects: UTMK naver.maps. UTMK UTMK 객체는 한국형 UTM(Universal Transverse Mercator) 좌표계를 나타내는 것으로 UTMK 좌표계와 관련된 좌표 변환 메서드를 제공합니다. 원본 Projection 객체의 세계 좌표는 0~1 사이의 값입니다. Properties Name Type Description name string \"UTMK\" pointPerMeter number 8192 Tutorials 지도 투영과 좌표 체계 Extends naver.maps.Projection Methods fromCoordToPoint(latlng) 지정한 위/경도 좌표를 세계 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromCoordToUTMK(latlng) 지정한 위/경도 좌표를 UTMK 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromLatLngToPoint(latlng) 지정한 위/경도 좌표를 세계 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToUTMK(latlng) 지정한 위/경도 좌표를 UTMK 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromPointToCoord(point) 지정한 세계 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromPointToLatLng(point) 지정한 세계 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromPointToUTMK(point) 지정한 세계 좌표를 UTMK 좌표로 변환하여 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromUTMKToCoord(utmk) 지정한 UTMK 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromUTMKToLatLng(utmk) 지정한 UTMK 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromUTMKToPoint(utmk) 지정한 UTMK 좌표를 세계 좌표로 변환하여 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point 세계 좌표 getDestinationCoord(fromLatLng, angle, meter) 지정한 좌표에서 북쪽을 기준으로 지정한 각도(시계 방향)와 거리만큼 떨어진 위치의 지도 좌표를 반환합니다. Parameters Name Type Description fromLatLng naver.maps.LatLng 기준이 되는 위/경도 좌표 angle number 지정한 좌표에서 북쪽을 기준으로 한 시계 방향의 각도(0-북, 90-동, 180-남, 270-서). 이 값이 0이면 현재의 좌표에서 북쪽을 가리키며, 90이면 동쪽을 가리킵니다. meter number 지정한 좌표에서 구하려는 좌표까지의 거리(미터) Returns Type Description naver.maps.LatLng 새로운 위/경도 좌표 getDistance(latlng1, latlng2) 지정한 두 위/경도 좌표 간의 거리를 반환합니다. 단위는 미터입니다. Parameters Name Type Description latlng1 naver.maps.LatLng 위/경도 좌표 latlng2 naver.maps.LatLng 위/경도 좌표 Returns Type Description number 거리 × Search results Close "},"naver.maps.UTMK_NAVER.html":{"id":"naver.maps.UTMK_NAVER.html","title":"StaticObjects: UTMK_NAVER","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UTMK_NAVER StaticObjects: UTMK_NAVER naver.maps. UTMK_NAVER UTMK_NAVER 객체는 한국형 UTM(Universal Transverse Mercator) 좌표계를 변조해 네이버에서 사용하는 좌표계를 나타냅니다. UTMK_NAVER 좌표계와 관련된 좌표 변환 메서드를 제공합니다. 원본 Projection 객체의 세계 좌표는 0~1 사이의 값입니다. Properties Name Type Description name string \"UTMK_NAVER\" pointPerMeter number 8192 Tutorials 지도 투영과 좌표 체계 Extends naver.maps.UTMK Methods fromCoordToNaver(latlng) 지정한 위/경도 좌표를 NAVER 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromLatLngToNaver(latlng) 지정한 위/경도 좌표를 NAVER 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description latlng naver.maps.LatLng 위/경도 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromNaverToCoord(naverPoint) 지정한 NAVER 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description naverPoint naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromNaverToLatLng(naverPoint) 지정한 NAVER 좌표를 위/경도 좌표로 변환하여 반환합니다. Parameters Name Type Description naverPoint naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromNaverToPoint(naverPoint) 지정한 NAVER 좌표를 세계 좌표로 변환하여 반환합니다. Parameters Name Type Description naverPoint naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromNaverToUTMK(naverPoint) 지정한 NAVER 좌표를 UTMK 좌표로 변환하여 반환합니다. Parameters Name Type Description naverPoint naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromPointToNaver(point) 지정한 세계 좌표를 NAVER 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromUTMKToNaver(utmk) 지정한 UTMK 좌표를 NAVER 지도 좌표로 변환하여 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point NAVER 좌표 × Search results Close "},"naver.maps.UTMK_NAVERCoord.html":{"id":"naver.maps.UTMK_NAVERCoord.html","title":"StaticObjects: UTMK_NAVERCoord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UTMK_NAVERCoord StaticObjects: UTMK_NAVERCoord naver.maps. UTMK_NAVERCoord UTMK_NAVERCoord 객체는 NAVER 좌표계를 기본 좌표계로 사용하는 투영 객체입니다. 기존의 UTMK_NAVER 투영 객체와 유사하지만, 실제 사용 좌표계는 위/경도 좌표계가 아닌 NAVER 좌표계입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.UTMK_NAVER Methods fromCoordToLatLng(n) 지정한 NAVER 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromCoordToPoint(n) 지정한 NAVER 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description n naver.maps.Point NAVER 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToCoord(latlng) 지정한 위/경도 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point NAVER 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 NAVER 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point NAVER 좌표 × Search results Close "},"naver.maps.UTMKCoord.html":{"id":"naver.maps.UTMKCoord.html","title":"StaticObjects: UTMKCoord","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UTMKCoord StaticObjects: UTMKCoord naver.maps. UTMKCoord UTMKCoord 객체는 UTMK 좌표를 기본 좌표계로 사용하는 투영 객체입니다. 기존의 UTMK 투영 객체와 유사하지만, 실제 사용 좌표계는 위/경도 좌표계가 아닌 UTMK 좌표계입니다. Tutorials Geocoder를 활용한 좌표 변환 Extends naver.maps.UTMK Methods fromCoordToLatLng(utmk) 지정한 UTMK 좌표에 해당하는 위/경도 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.LatLng 위/경도 좌표 fromCoordToPoint(utmk) 지정한 UTMK 좌표에 해당하는 세계 좌표를 반환합니다. Parameters Name Type Description utmk naver.maps.Point UTMK 좌표 Returns Type Description naver.maps.Point 세계 좌표 fromLatLngToCoord(latlng) 지정한 위/경도 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description latlng Coord 위/경도 좌표 Returns Type Description naver.maps.Point UTMK 좌표 fromPointToCoord(point) 지정한 세계 좌표에 해당하는 UTMK 좌표를 반환합니다. Parameters Name Type Description point naver.maps.Point 세계 좌표 Returns Type Description naver.maps.Point UTMK 좌표 × Search results Close "},"naver.maps.visualization.html":{"id":"naver.maps.visualization.html","title":"Namespace: naver.maps.visualization","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API visualization Namespace: naver.maps.visualization naver.maps. visualization 시각화 서브 모듈 네임스페이스입니다. Classes DotMap HeatMap WeightedLocation StaticObjects SpectrumStyle × Search results Close "},"naver.maps.visualization.DotMap.html":{"id":"naver.maps.visualization.DotMap.html","title":"Class: naver.maps.visualization.DotMap","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API DotMap Class: naver.maps.visualization.DotMap naver.maps.visualization. DotMap DotMap 클래스는 점지도를 정의합니다. 가중치가 있는 지점 목록을 이용할 때는 가중치를 1~{반지름}로 정규화하고, 해당 값을 점지도를 표현하는 점의 반지름으로 사용합니다. 가중치가 없는 지점 목록을 이용할 때는 반지름을 점지도를 표현하는 점의 반지름으로 사용합니다. new naver.maps.visualization.DotMap(dotMapOptions) Parameters Name Type Argument Description dotMapOptions DotMapOptions &lt;optional&gt; 점지도 옵션 Tutorials 데이터 시각화 Methods getData() 점지도의 데이터를 반환합니다. Returns Type Description Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; 점지도의 데이터 getMap() 현재 점지도가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 점지도의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description DotMapOptions | any 점지도 옵션 redraw() 점지도를 새로 그립니다. setData(data) 점지도의 데이터를 설정합니다. 새로 추가된 데이터는 naver.maps.visualization.DotMap#redraw 메서드를 호출해야 반영됩니다. Parameters Name Type Description data Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; 점지도의 데이터 setMap(map) 점지도를 지도에 추가합니다. 인수로 null을 전달하면 점지도를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 점지도를 추가할 Map 객체 setOptions(key, value) 점지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 점지도 옵션 이름 value any 점지도 옵션값 setOptions(options) 점지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options DotMapOptions 점지도 옵션 Type Definitions DotMapOptions DotMapOptions 객체는 DotMap을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map 점지도가 그려질 지도 객체입니다. data Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; | Array.&lt;naver.maps.visualization.WeightedLocation&gt; 점지도의 지점 목록입니다. opacity number &lt;optional&gt; 0.5 점지도의 불투명도입니다. 값의 범위는 0~1입니다. radius number &lt;optional&gt; 5 점지도를 표현하는 점의 반지름입니다. 단위는 픽셀입니다. strokeWeight number &lt;optional&gt; 1 점지도를 표현하는 점의 선 두께입니다. strokeColor string &lt;optional&gt; white 점지도를 표현하는 점의 선 색상입니다. CSS 색상 표현법으로 설정합니다. strokeLineCap string &lt;optional&gt; butt 점지도를 표현하는 점의 선 마감 스타일입니다. SVG의 stroke-linecap 스타일 표준을 따릅니다. 사용 가능한 값은 butt, flat(butt와 동일), round, square입니다. 아래 그림의 왼쪽부터 순서대로 butt, round, square입니다. strokeLineJoin string &lt;optional&gt; miter 점지도를 표현하는 점의 선들이 맞닿는 부분의 마감 스타일입니다. SVG의 stroke-linejoin 스타일 표준을 따릅니다. 사용 가능한 값은 miter, round, bevel입니다. 아래 그림의 위부터 순서대로 miter, round, bevel입니다. fillColor string &lt;optional&gt; red 점지도를 표현하는 점의 영역을 채울 색상입니다. CSS 색상 표현법으로 설정합니다. × Search results Close "},"naver.maps.visualization.HeatMap.html":{"id":"naver.maps.visualization.HeatMap.html","title":"Class: naver.maps.visualization.HeatMap","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API HeatMap Class: naver.maps.visualization.HeatMap naver.maps.visualization. HeatMap HeatMap 클래스는 열지도를 정의합니다. 가중치가 있는 지점 목록을 이용할 때는 가중치를 0.1~1로 정규화하고, 해당 값을 열지도를 표현하는 점의 영향력 강도(세기)로 사용합니다. 가중치가 없는 지점 목록을 이용할 때는 기본값 1을 열지도를 표현하는 점의 영향력 강도(세기)로 사용합니다. new naver.maps.visualization.HeatMap(heatMapOptions) Parameters Name Type Argument Description heatMapOptions HeatMapOptions &lt;optional&gt; 열지도 옵션 Tutorials 데이터 시각화 Methods getColorMap() 열지도의 색상 스펙트럼을 반환합니다. Returns Type Description naver.maps.visualization.SpectrumStyle 열지도 색상 스펙트럼 getData() 열지도의 데이터를 반환합니다. Returns Type Description Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; 열지도의 데이터 getMap() 현재 열지도가 추가된 Map 객체를 반환합니다. Returns Type Description naver.maps.Map | null Map 객체 getOptions(key) 열지도의 모든 옵션 또는 특정 옵션을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션 이름 Returns Type Description HeatMapOptions | any 열지도 옵션 redraw() 열지도를 새로 그립니다. setColorMap(colormap, inReverse) 열지도의 색상 스펙트럼을 설정합니다. Parameters Name Type Description colormap naver.maps.visualization.SpectrumStyle 열지도 색상 스펙트럼 inReverse boolean 반전된 색상 설정 여부입니다. 이 값이 true이면 설정한 색상 스펙트럼의 반전을 이용합니다. setData(data) 열지도의 데이터를 설정합니다. 새로 추가된 데이터는 naver.maps.visualization.HeatMap#redraw 메서드를 호출해야 반영됩니다. Parameters Name Type Description data Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; 열지도의 데이터 setMap(map) 열지도를 지도에 추가합니다. 인수로 null을 전달하면 열지도를 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 열지도를 추가할 Map 객체 setOptions(key, value) 열지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description key string 열지도 옵션 이름 value any 열지도 옵션값 setOptions(options) 열지도의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description options HeatMapOptions 열지도 옵션 Type Definitions HeatMapOptions HeatMapOptions 객체는 HeatMap을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Argument Default Description map naver.maps.Map 열지도가 그려질 지도 객체입니다. data Array.&lt;naver.maps.LatLng&gt; | Array.&lt;PointArrayLiteral&gt; | Array.&lt;naver.maps.visualization.WeightedLocation&gt; 열지도의 지점 목록입니다. opacity number &lt;optional&gt; 0.6 열지도의 불투명도입니다. 값의 범위는 0~1입니다. radius number &lt;optional&gt; 10 열지도를 표현하는 점의 영향력을 나타내는 반지름입니다. 단위는 픽셀입니다. colorMap naver.maps.visualization.SpectrumStyle &lt;optional&gt; RAINBOW 열지도의 색상 스펙트럼입니다. × Search results Close "},"naver.maps.visualization.SpectrumStyle.html":{"id":"naver.maps.visualization.SpectrumStyle.html","title":"StaticObjects: SpectrumStyle","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API SpectrumStyle StaticObjects: SpectrumStyle naver.maps.visualization. SpectrumStyle SpectrumStyle 객체는 열지도의 색상 스펙트럼을 사전에 정의한 것입니다. 설정할 수 있는 색상 스펙트럼은 아래와 같습니다. Properties Name Type Description JET string rgb(0,0,131)~rgb(128,0,0) 값으로 구성된 스펙트럼입니다. HSV string rgb(255,0,0)~rgb(255,0,6) 값으로 구성된 스펙트럼입니다. HOT string rgb(0,0,0)~rgb(255,255,255) 값으로 구성된 스펙트럼입니다. COOL string rgb(0,255,255)~rgb(255,0,255) 값으로 구성된 스펙트럼입니다. GREYS string rgb(0,0,0)~rgb(255,255,255) 값으로 구성된 스펙트럼입니다. YIGnBu string rgb(8,29,88)~rgb(255,255,217) 값으로 구성된 스펙트럼입니다. YIOrRd string rgb(128,0,38)~rgb(255,255,204) 값으로 구성된 스펙트럼입니다. RdBu string rgb(5,10,172)~rgb(178,10,28) 값으로 구성된 스펙트럼입니다. RAINBOW string rgb(150,0,90)~rgb(255,0,0) 값으로 구성된 스펙트럼입니다. PORTLAND string rgb(12,51,131)~rgb(217,30,30) 값으로 구성된 스펙트럼입니다. OXYGEN string rgb(64,5,5)~rgb(248,254,105) 값으로 구성된 스펙트럼입니다. Requires module:visualization × Search results Close "},"naver.maps.visualization.WeightedLocation.html":{"id":"naver.maps.visualization.WeightedLocation.html","title":"Class: naver.maps.visualization.WeightedLocation","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API WeightedLocation Class: naver.maps.visualization.WeightedLocation naver.maps.visualization. WeightedLocation WeightedLocation 클래스는 가중치가 있는 위/경도 좌표를 정의합니다. new naver.maps.visualization.WeightedLocation(lat, lng, weight) Parameters Name Type Argument Default Description lat number 위도 lng number 경도 weight number &lt;optional&gt; 1 가중치 Tutorials 데이터 시각화 Methods clone() 객체의 복제본을 반환합니다. Returns Type Description naver.maps.visualization.WeightedLocation 복제된 객체 getLocation() 위/경도 좌표를 반환합니다. Returns Type Description naver.maps.LatLng 위/경도 좌표 getWeight() 가중치를 반환합니다. Returns Type Description number 가중치 lat() 위도를 반환합니다. Returns Type Description number 위도 lng() 경도를 반환합니다. Returns Type Description number 경도 toString() 객체의 가중치와 좌표를 문자열로 반환합니다. Returns Type Description number 가중치, 위/경도 좌표를 나타내는 문자열로 형식은 (lat:{위도},lng:{경도},weight:{가중치})입니다. × Search results Close "},"naver.maps.ZoomControl.html":{"id":"naver.maps.ZoomControl.html","title":"Class: naver.maps.ZoomControl","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API ZoomControl Class: naver.maps.ZoomControl naver.maps. ZoomControl ZoomControlOptions 클래스는 줌 컨트롤을 정의합니다. new naver.maps.ZoomControl(ZoomControlOptions) Parameters Name Type Description ZoomControlOptions ZoomControlOptions UI 컨트롤 옵션 Tutorials 지도 컨트롤 See naver.maps.MapOptions Example var map = new naver.maps.Map('map', { zoomControl: true, zoomControlOptions: { position: naver.maps.Position.TOP_RIGHT } }); Extends naver.maps.CustomControl Methods getElement() UI 컨트롤의 HTML 노드를 반환합니다. Inherited From naver.maps.CustomControl#getElement Returns Type HTMLElement getMap() 현재 UI 컨트롤이 추가된 지도 객체를 반환합니다. Inherited From naver.maps.CustomControl#getMap Returns Type Description naver.maps.Map | null 지도 객체 getOptions(key) UI 컨트롤의 모든 옵션 또는 특정 옵션의 값을 반환합니다. Parameters Name Type Argument Description key string &lt;optional&gt; 가져올 옵션의 이름 Inherited From naver.maps.CustomControl#getOptions Returns Type Description any 모든 옵션 또는 특정 key에 해당되는 옵션의 값 html(html) 지정한 HTML 마크업을 컨테이너 &lt;div&gt; 요소 내에 렌더링하거나, UI 컨트롤의 컨테이너 &lt;div&gt; 요소를 반환합니다. Parameters Name Type Argument Description html string &lt;optional&gt; UI 컨트롤 마크업 Inherited From naver.maps.CustomControl#html Returns Type Description string | undefined UI 컨트롤 마크업 setMap(map) UI 컨트롤을 지도에 추가합니다. 인수로 null을 전달하면 UI 컨트롤을 지도에서 제거합니다. Parameters Name Type Description map naver.maps.Map | null 지도 객체 Inherited From naver.maps.CustomControl#setMap setOptions(newOptions) UI 컨트롤의 옵션을 변경하거나 새로 설정합니다. Parameters Name Type Description newOptions ControlOptions UI 컨트롤 옵션 Inherited From naver.maps.CustomControl#setOptions setPosition(position) UI 컨트롤의 위치를 설정합니다. Parameters Name Type Description position naver.maps.Position 컨트롤 위치 Inherited From naver.maps.CustomControl#setPosition Type Definitions ZoomControlOptions ZoomControlOptions 객체는 줌 컨트롤의 위치나 모양을 정의하는 옵션을 나타냅니다. Type: object Properties Name Type Default Description position naver.maps.Position TOP_LEFT 줌 컨트롤을 배치할 위치입니다. style ZoomControlStyle LARGE 줌 컨트롤의 스타일입니다. legendDisabled boolean false 줌 컨트롤의 범례 노출 여부입니다. ZoomControlStyle ZoomControlStyle 객체는 줌 컨트롤의 스타일을 정의합니다. Type: object Properties Name Type Description LARGE number 확대/축소 버튼과 슬라이드 바가 함께 있는 스타일입니다. SMALL number 확대/축소 버튼만 있는 스타일입니다. × Search results Close "},"tutorial-1-Conceptual-Overview.html":{"id":"tutorial-1-Conceptual-Overview.html","title":"Tutorial: NAVER 지도 API v3 특징","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API NAVER 지도 API v3 특징 NAVER 지도 API v3 특징 NAVER 지도 API v3은 JavaScript 형태로 제공되는 NAVER 지도 플랫폼으로서, 웹 서비스 또는 애플리케이션에 NAVER 지도 기능을 구현할 수 있도록 다양한 클래스와 메서드를 제공합니다. 특히, 성능을 높이기 위해 데스크톱과 모바일 환경에 최적화된 코드를 제공하고 있으며, 주요 웹 브라우저를 완벽하게 지원할 수 있도록 새롭게 설계되었습니다. NAVER 지도 API v3은 다음과 같은 특징이 있습니다. 독립적인 API 모바일 최적화 KVO(Key-Value Observing) 디자인 단일 버전 관리 독립적인 API NAVER 지도 API의 이전 버전(v1, v2)은 JindoJS 프레임워크를 사용했습니다. 그러나 NAVER 지도 API v3은 DOM(Document Object Model) 처리 및 웹 브라우저 호환 코드를 내장하고 있으므로, JindoJS 등의 다른 프레임워크 또는 라이브러리와 완벽히 독립적으로 동작합니다. 따라서, 어떠한 프레임워크 또는 라이브러리를 함께 사용해도 문제 없이 동작합니다. 또한 NAVER 지도 API v3은 이전 버전과 달리 별도의 CSS(Cascading Style Sheets)를 필요로 하지 않도록 설계했습니다. 모바일 최적화 모바일 웹 브라우징 환경은 최근 몇 년 사이 매우 진보하였지만 단말기의 성능과 제조사의 커스터마이징 상태에 따라 동작 방식이 매우 다양합니다. NAVER 지도 API v3은 대부분의 모바일 단말기에서도 최적의 성능으로 동작할 수 있도록 설계되었습니다. 또한 touchstart, touchmove, touchend 터치 이벤트 외에도 다음과 같은 제스처 이벤트를 사용할 수 있습니다. tap - 한 손가락으로 터치합니다. doubletap - 한 손가락으로 빠르게 두 번 터치합니다. longtap - 한 손가락으로 터치를 1초 이상 유지합니다. twofingertap - 두 손가락으로 터치합니다. pinch in/out - 두 손가락으로 터치 후 손가락을 오므리거나 폅니다. 제스처 이벤트는 지속적으로 추가할 예정입니다. NAVER 지도 API v3은 CSS3 Transform 속성을 적극적으로 활용하고 있습니다. 그러나 특정 웹 브라우저 또는 단말기의 성능이 낮은 환경에서는 자동으로 CSS2 렌더링 방식을 이용합니다. 즉, 각 환경에서 최적의 성능으로 동작할 수 있도록 전환하여 지도를 표현합니다. KVO 디자인 KVO 디자인은 NAVER 지도 API v3 전체 설계의 핵심입니다. KVO 클래스를 상속받은 클래스는 사용자가 관심있는 속성을 바인딩(bind)함으로써 속성이 변경되었을 때 효율적으로 대응할 수 있습니다. KVO 매커니즘에 대한 자세한 설명은 KVO 디자인을 참고합니다. 단일 버전 관리 NAVER 지도 API v3은 단일 버전으로 제공합니다. 버전 정보를 확인하려면 다음과 같이 JavaScript 파일 시작 부분의 주석을 확인합니다. /*! * mantle - NAVER Maps API v3.0.0 - 2016-05-26 11:20:56 * * Copyright(c) 2016, NAVER corp, Team mantle */ 버전 변경에 따른 오류 및 문의 사항은 Question에 등록해 주시면 빠르게 처리하겠습니다. 빠르고 원활한 처리를 원하신다면 로그인 이후 문의 바랍니다. × Search results Close "},"tutorial-1-Getting-Client-ID.html":{"id":"tutorial-1-Getting-Client-ID.html","title":"Tutorial: 클라이언트 아이디 발급","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 클라이언트 아이디 발급 클라이언트 아이디 발급 NAVER 지도 API v3을 사용하려면 클라이언트 아이디를 이용해서 인증해야 합니다. 네이버 클라우드 플랫폼 클라이언트 아이디는 NAVER CLOUD PLATFORM Console에서 애플리케이션을 등록해 발급받습니다. 공공기관용 클라이언트 아이디는 NAVER CLOUD PLATFORM GOV Console에서 애플리케이션을 등록해 발급받습니다. 금융기관용 클라이언트 아이디는 NAVER CLOUD PLATFORM FIN Console에서 애플리케이션을 등록해 발급받습니다. 콘솔의 AI·Application Service &gt; AI·NAVER API &gt; Application에서 애플리케이션을 등록합니다. 네이버 클라우드 플랫폼 자세한 방법 보기 &gt; 공공기관용 자세한 방법 보기 &gt; 금융기관용 자세한 방법 보기 &gt; AI·Application Service &gt; AI·NAVER API &gt; Application에서 등록한 애플리케이션을 선택해 Client ID와 Client Secret값을 확인합니다. AI·Application Service &gt; AI·NAVER API &gt; Application의 변경 화면에서 **Maps(Web)**가 선택되어 있는지 확인합니다. 선택되어 있지 않으면 429 오류(Quota Exceed)가 발생하니 주의하시기 바랍니다. × Search results Close "},"tutorial-1-Layers.html":{"id":"tutorial-1-Layers.html","title":"Tutorial: 레이어","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 레이어 레이어 레이어는 지도 타일 위에 겹쳐서 노출되는 지도 유형을 말합니다. NAVER 지도 API v3은 다섯 가지 레이어를 기본적으로 제공합니다. 자전거 전용도로와 자전거 관련 오버레이를 하나의 레이어로 제공 교통상황을 나타내는 레이어를 제공 거리뷰를 보여줄 수 있는 영역을 나타내는 레이어를 제공 전국 토지 소개, 지번, 지목, 경계, 도로 철도 등을 나타내는 레이어를 제공 일반 지도 유형과 위성 지도 유형을 함께 나타내는 겹쳐보기 레이어를 제공 지도 유형과 마찬가지로, NAVER 지도 API v3에서 기본적으로 제공하는 레이어 외에 사용자 정의 레이어를 만들 수 있습니다. 자세한 설명은 사용자 정의 레이어 만들기를 참고합니다. 기본 레이어 표시하기 NAVER 지도 API v3에서 제공하는 기본 레이어를 표시하려면 각 레이어의 인스턴스를 생성하고 init 이후, Map 객체의 setMap 메서드를 호출합니다. var cadastralLayer = new naver.maps.CadastralLayer(); var streetLayer = new naver.maps.StreetLayer(); var bicycleLayer = new naver.maps.BicycleLayer(); var trafficLayer = new naver.maps.TrafficLayer(); naver.maps.Event.once(map, 'init', function() { cadastralLayer.setMap(map); streetLayer.setMap(map); bicycleLayer.setMap(map); trafficLayer.setMap(map); }); Examples: 네이버 자전거 레이어 표시하기 Examples: 네이버 지적도 레이어 표시하기 Examples: 네이버 실시간 교통상황 레이어 표시하기 사용자 정의 레이어 만들기 레이어는 기본 타일 위에 올라가는 지도 유형입니다. 따라서 사용자 정의 레이어를 만들려면 Layer 클래스를 사용하는 것뿐만 아니라 지도 유형을 만들 때 필요한 부분을 함께 구현해야 합니다. 사용자 정의 지도 유형을 만드는 방법은 지도 유형을 참고합니다. Layer 클래스는 레이어를 만들 때 구현해야 할 여러 메서드를 제공합니다. 즉, 사용자 정의 지도 유형을 만들고 지도 유형 저장소에 등록합니다. var myMapTypeRegistry = new naver.maps.MapTypeRegistry({ 'myLayer': myLayerType }, 'myLayer'); Layer 객체를 생성할 때 앞서 생성한 지도 유형 저장소를 인수로 전달하고, Map 객체의 setMap 메서드를 호출해 레이어를 표시합니다. var myLayer = new naver.maps.Layer('myLayer', myMapTypeRegistry); myLayer.setMap(map); Examples: 사용자 정의 레이어 만들기 × Search results Close "},"tutorial-1-Overlay-Overview.html":{"id":"tutorial-1-Overlay-Overview.html","title":"Tutorial: 오버레이 개요","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 오버레이 개요 오버레이 개요 오버레이는 지리적 정보를 시각화하기 위해 지도 위에 추가할 수 있는 도형이나 개체 등을 말합니다. 오버레이는 지도의 지리 좌표와 연동되어 표시되므로 사용자가 지도를 확대/축소하거나 이동하면 오버레이도 함께 움직입니다. NAVER 지도 API v3은 마커, 정보 창, 도형, 지상 오버레이 등 다양한 오버레이를 제공하며, 사용자가 직접 오버레이를 정의해 사용할 수 있도록 지원합니다. 자세한 내용은 각 오버레이 설명을 참고하세요. 마커 정보 창 도형 지상 오버레이 사용자 정의 오버레이 × Search results Close "},"tutorial-2-Abbreviation.html":{"id":"tutorial-2-Abbreviation.html","title":"Tutorial: 축약형 표현","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 축약형 표현 축약형 표현 네임스페이스 NAVER 지도 API v3은 naver.maps 네임스페이스를 사용하며, 사용자의 편의성을 위해 축약형인 N 네임스페이스를 제공합니다. N 네임스페이스는 NAVER 지도 API v3을 로드하는 시점에 해당 전역 변수가 사용되지 않은 경우에만 유효합니다. // 일반 표현 var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); // 축약 표현 var map2 = new N.Map('map', { center: new N.LatLng(37.3595704, 127.105399), zoom: 10 }); naver.maps === N; // true 또한, 다음과 같이 사용자 네임스페이스를 사용할 수도 있습니다. var MyNS = naver.maps; var map = new MyNS.Map('map', { center: new MyNS.LatLng(37.3595704, 127.105399), zoom: 10 }); 기본 클래스 팩토리 메서드 NAVER 지도 API v3은 자주 사용하는 기본 클래스의 인스턴스를 팩토리 메서드 방식으로 생성할 수 있도록 지원합니다. 팩토리 메서드를 지원하는 기본 클래스의 목록은 다음과 같습니다. Point LatLng PointBounds LatLngBounds Size 팩토리 메서드 방식으로 생성한 인스턴스는 new 키워드를 사용해 생성하는 방식과 동일하게 동작합니다. 팩토리 메서드와 축약형 네임스페이스를 함께 사용하면 간결한 코드를 작성할 수 있습니다. var cityHall = naver.maps.LatLng(37.5666805, 126.9784147); var cityHall2 = N.LatLng(37.5666805, 126.9784147); cityHall.equals(cityHall2); // true var point = naver.maps.Point(10, 20); var point2 = N.Point(10, 20); var dokdo = naver.maps.LatLngBounds( naver.maps.LatLng(37.2380651, 131.8562652), naver.maps.LatLng(37.2444436, 131.8786475)); var dokdo2 = N.LatLngBounds( N.LatLng(37.2380651, 131.8562652), N.LatLng(37.2444436, 131.8786475)); var size = naver.maps.Size(300, 400); var size2 = N.Size(300, 400); 기본 클래스의 리터럴 표현 NAVER 지도 API v3에서는 아래의 자주 사용하는 기본 클래스의 인스턴스 객체를 대신해 리터럴 표현을 사용할 수 있습니다. Point LatLng PointBounds LatLngBounds Size 리터럴 표현은 Object 리터럴과 Array 리터럴 두 가지 방식으로 사용할 수 있습니다. Object 리터럴 Object 리터럴은 객체의 속성을 모두 표현하는 일반 객체입니다. SizeObject 리터럴은 width, height 속성을 포함해야 합니다. PointObject나 LatLngObject 리터럴은 x, y 또는 lat, lng 속성을 포함해야 하며, PointBoundsObject나 LatLngBoundsObject 리터럴은,minX, minY, maxX, maxY 또는 south, west, north, east 속성을 포함해야 합니다. SizeObject 리터럴 naver.maps.Size 클래스를 사용하는 대신 SizeObject 리터럴을 사용할 수 있습니다. SizeObject 리터럴은 width와 height 속성을 포함하는 일반 객체입니다. var size = new naver.maps.Size(1024, 768), sizeObject = { width: 1024, height: 768 }; map.setSize(sizeObject); PointObject 리터럴 naver.maps.Point 클래스를 사용하는 대신 PointObject 리터럴을 사용할 수 있습니다. PointObject 리터럴은 x와 y 속성을 포함하는 일반 객체입니다. var point = new naver.maps.Point(64, 128), pointObject = { x: 64, y: 128 }; map.setCenterPoint(pointObject); LatLngObject 리터럴 naver.maps.LatLng 클래스를 사용하는 대신 LatLngObject 리터럴을 사용할 수 있습니다. LatLngObject 리터럴은 lat와 lng 속성을 포함하는 일반 객체입니다. var latlng = new naver.maps.LatLng(37.5666103, 126.9783882), latlngObject = { lat: 37.5666103, lng: 126.9783882 }; map.setCenter(latlngObject); LatLngObject 리터럴을 사용할 수 있는 곳에서는 PointObject 리터럴도 사용할 수 있습니다. PointBoundsObject 리터럴 naver.maps.PointBounds 클래스를 사용하는 대신 PointBoundsObject 리터럴을 사용할 수 있습니다. PointBoundsObject 리터럴은 minX, minY, maxX, maxY 속성을 포함하는 일반 객체입니다. var pointBounds = new naver.maps.PointBounds( new naver.maps.Point(125, 36), new naver.maps.Point(128, 38)), pointBoundsObject = { minX: 125, minY: 36, maxX: 128, maxY: 37 }; map.fitBounds(pointBoundsObject); LatLngBoundsObject 리터럴 naver.maps.LatLngBounds 클래스를 사용하는 대신 LatLngBoundsObject 리터럴을 사용할 수 있습니다. LatLngBoundsObject 리터럴은 south, west, north, east 속성을 포함하는 일반 객체입니다. var latlngBounds = new naver.maps.LatLngBounds( new naver.maps.LatLng(36, 125), new naver.maps.LatLng(38, 128)), latlngBoundsObject = { south: 36, west: 125, north: 38, east: 128 }; map.fitBounds(latlngBoundsObject); LatLngBoundsObject 리터럴을 사용할 수 있는 곳에서는 PointBoundsOBject 리터럴도 사용할 수 있습니다. Array 리터럴 Array 리터럴은 GeoJSON 방식의 순서로 된 배열로 표기합니다. SizeArray 리터럴의 순서는 width, height입니다. PointArray 리터럴의 순서는 x, y 또는 lng, lat이며, PointBoundsArray 리터럴은 4개의 배열 원소를 minX, minY, maxX, maxY 또는 west, south, east, north 순서로 배치합니다. SizeArray 리터럴 naver.maps.Size 클래스를 사용하는 대신 SizeArray 리터럴을 사용할 수 있습니다. SizeArray 리터럴은 [width, height] 순서로 된 배열 객체입니다. var size = new naver.maps.Size(1024, 768), sizeArray = [1024, 768]; map.setSize(sizeArray); PointArray 리터럴 naver.maps.Point 클래스를 사용하는 대신 PointArray 리터럴을 사용할 수 있습니다. PointArray 리터럴은 [x, y] 또는 [lng, lat] 순서로 된 배열 객체입니다. var latlng = new naver.maps.LatLng(37.5666103, 126.9783882), pointArray = [126.9783882, 37.5666103]; map.setCenter(pointArray); PointBoundsArray 리터럴 naver.maps.PointBounds 클래스를 사용하는 대신 PointBoundsArray 리터럴을 사용할 수 있습니다. PointBoundsArray 리터럴은 [minX, minY, maxX, maxY] 또는 [west, south, east, north] 순서로 된 배열 객체입니다. var latlngBounds = new naver.maps.LatLngBounds( new naver.maps.LatLng(36, 125), new naver.maps.LatLng(38, 128)), pointBoundsArray = [125, 36, 128, 38]; map.fitBounds(pointBoundsArray); × Search results Close "},"tutorial-2-DataLayer.html":{"id":"tutorial-2-DataLayer.html","title":"Tutorial: 데이터 레이어","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 데이터 레이어 데이터 레이어 NAVER 지도 API v3은 지리 공간 데이터를 기반으로 지도 위에 점, 선, 도형 등을 쉽게 표현할 수 있는 가상의 Data 레이어를 제공합니다. GeoJSON, KML, GPX 형식의 지리 공간 데이터를 지도 위에 표현할 수 있으며, 반대로 표시된 데이터를 GeoJSON 형식으로 저장할 수 있습니다. KML, GPX 형식의 지리 공간 데이터는 내부적으로 GeoJSON 형식의 지리 공간 데이터로 변환됩니다. 현재 지원하는 요소는 다음과 같습니다. GPX Line Paths (wpt, rte, trk) Line Styles (color, opacity, width, linecap, pattern) bounds, name, time, desc, cmt, type, sym KML Point, LineString, LinearRing, Polygon, MultiGeometry, gx:Track, gx:MultiTrack Style (LineStyle, PolyStyle) LatLonAltBox name, address, description, visibility 개요 Data 레이어는 GeoJSON 지리 공간 데이터의 형상 정보(feature)를 다룹니다. 각 형상 정보는 Feature 객체로 표현되며, 형상 정보의 기하 구조(geometry)는 Geometry 객체로 표현됩니다. Feature 객체는 기하 구조의 타입에 따라 폴리라인, 폴리곤, 마커 등으로 렌더링됩니다. KML, GPX 형식의 지리 공간 데이터 역시 내부적으로 GeoJSON 형식의 지리 공간 데이터로 변환 후 렌더링됩니다. 기하 구조의 타입이 GeometryCollection이면, geometryies라는 기하 구조 컬렉션이 존재하며, 이 컬렉션에는 여러 가지 타입의 기하 구조가 존재할 수 있습니다. 즉, 하나의 Feature 객체는 여러 가지 타입의 Geometry 객체를 관리할 수 있습니다. Geometry 객체의 타입이 하나의 오버레이를 의미하므로 Feature 객체는 여러 가지 타입의 오버레이를 관리할 수 있습니다. 다음은 GeoJSON 지리 공간 데이터의 기하 구조 타입에 따라 NAVER 지도 API v3에서 표현하는 오버레이 타입을 정의한 것입니다. 기하 구조 타입 오버레이 타입 설명 Point Marker 한 개의 마커 MultiPoint Marker 한 개 이상의 마커 LineString Polyline 한 개의 폴리라인 MultiLineString Polyline 한 개 이상의 폴리라인 Polygon Polygon 한 개의 폴리곤 MultiPolygon Polygon 한 개 이상의 폴리곤 Feature의 스타일과 속성(properties)은 변경할 수 있으며, 이를 다시 GeoJSON 형식으로 저장할 수 있습니다. GeoJSON 표준에 대해서는 http://geojson.org를 참고합니다. GeoJSON 로드하기 GeoJSON 형식의 데이터를 로드하려면 addGeoJson 메서드를 사용합니다. 기본적으로 모든 Map 객체는 data 객체를 포함합니다. 따라서, map.data.addGeoJson 메서드를 사용합니다. $.ajax({ url: './geojson/naver.json', dataType: 'json', success: startDataLayer }); var map; function startDataLayer(geojson) { map = new naver.map.Map('map', { zoom: 13, center: new naver.maps.LatLng(37.3586524, 127.1060678) }); map.data.addGeoJson(geojson); } 위 예제는 jQuery 구문을 포함하고 있습니다. GeoJSON 데이터 스타일 지정하기 GeoJSON 지리 공산 데이터의 형상 정보의 스타일을 지정하려면 setStyle 메서드를 사용합니다. 이 메서드는 Data 레이어의 모든 Feature 객체에 영향을 미치며, StyleOptions 객체 리터럴 또는 StylingFunction 함수를 인수로 사용합니다. StyleOptions 객체 리터럴로 스타일 지정하기 StyleOptions 객체 리터럴에서 설정한 스타일은 모든 Feature 객체에 적용됩니다. 단, 각 Feature 객체의 기하 구조(geometry) 타입에 따라 적용되는 범위는 다릅니다. 예를 들어, icon 스타일은 Marker 오버레이 타입인 Point, MultiPoint 기하 구조에만 영향을 줍니다. map.data.setStyle({ strokeColor: 'red', fillColor: 'red', icon: './img/pin_spot.png' }); StylingFunction 함수로 스타일 지정하기 StylingFunction 함수를 이용하면 각 형상 정보(Feature 객체)의 속성이나 특성에 따라 다른 스타일을 지정할 수 있습니다. map.data.setStyle(function(feature) { var color = 'red'; if (feature.getProperty('color')) { color = feature.getProperty('color'); } return { strokeColor: color, fillColor: color }; }); 지정된 스타일 재정의하기 앞서 설명한대로 setStyle 메서드는 Data 레이어의 모든 Feature 객체에 영향을 미칩니다(이를 전역 스타일이라고 함). 특정 Feature 객체에 특별한 스타일을 적용하고자 할 때는 overrideStyle 메서드를 사용합니다. 이 메서드는 전역 스타일에 추가로 적용됩니다. 재정의한 스타일을 이전 스타일로 다시 복원하려면 revertStyle 메서드를 사용합니다. 이 메서드는 특정 Feature 객체에 사용할 수 있지만, 인수를 생략하면 모든 Feature 객체의 스타일을 복원합니다. 다음은 마우스 포인터가 기하 구조의 경계에 들어올 때와 벗어날 때 스타일을 변경하고 복원하는 예제입니다. map.data.addListener('mouseover', function(e) { map.data.overrideStyle(e.feature, { strokeWeight: 8, icon: './img/pin_spot.png' }); map.data.addListener('mouseout', function(e) { map.data.revertStyle(); }); Data 레이어 이벤트 활용하기 Data 레이어는 각 Feature 객체의 UI 인터랙션과 속성 변경 등에 대한 이벤트와 Feature 객체의 추가/삭제에 대한 이벤트를 발생시킵니다. 이벤트에 관한 자세한 내용은 Data 레이어의 Events 내용을 참고합니다. 다음은 마우스 포인터가 기하 구조의 경계에 들어올 때와 벗어날 때 각 Feature 객체의 스타일을 변경하고, 특정 Feature 객체 클릭 시 해당 Feature 객체의 속성값을 이용해 스타일을 반영하며, 더블 클릭 시 Feature 객체의 좌표 경계를 이용해 지도를 이동시키는 예제입니다. var map = new naver.maps.Map(document.getElementById('map'), { zoom: 13, mapTypeId: 'normal', center: new naver.maps.LatLng(37.3586524, 127.1060678) }); $.ajax({ url: '../geojson/naver.json', dataType: 'json', success: startDataLayer }); function startDataLayer(geojson) { map.data.addGeoJson(geojson); map.data.setStyle(function(feature) { var color = 'red'; if (feature.getProperty('isColorful')) { color = feature.getProperty('color'); } return { fillColor: color, strokeColor: color, strokeWeight: 2, icon: null }; }); map.data.addListener('click', function(e) { e.feature.setProperty('isColorful', true); }); map.data.addListener('dblclick', function(e) { var bounds = e.feature.getBounds(); if (bounds) { map.panToBounds(bounds); } }); map.data.addListener('mouseover', function(e) { map.data.overrideStyle(e.feature, { strokeWeight: 8, icon: './img/pin_spot.png' }); }); map.data.addListener('mouseout', function(e) { map.data.revertStyle(); }); } 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: GeoJSON 데이터 레이어 표시하기 KML 로드하기 KML 형식의 데이터를 로드하려면 addKml 메서드를 사용합니다. 기본적으로 모든 Map 객체는 data 객체를 포함합니다. 따라서, map.data.addKml 메서드를 사용합니다. $.ajax({ url: './geojson/naver.kml', dataType: 'xml', success: startDataLayer }); var map; function startDataLayer(xmlDoc) { map = new naver.map.Map('map', { zoom: 13, center: new naver.maps.LatLng(37.3586524, 127.1060678) }); map.data.addKml(xmlDoc); } 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: KML 데이터 레이어 표시하기 GPX 로드하기 GPX 형식의 데이터를 로드하려면 addGpx 메서드를 사용합니다. 기본적으로 모든 Map 객체는 data 객체를 포함합니다. 따라서, map.data.addGpx 메서드를 사용합니다. $.ajax({ url: './geojson/naver.gpx', dataType: 'xml', success: startDataLayer }); var map; function startDataLayer(xmlDoc) { map = new naver.map.Map('map', { zoom: 13, center: new naver.maps.LatLng(37.3586524, 127.1060678) }); map.data.addGpx(xmlDoc); } 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: GPX 데이터 레이어 표시하기 × Search results Close "},"tutorial-2-Getting-Started.html":{"id":"tutorial-2-Getting-Started.html","title":"Tutorial: Hello, World","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Hello, World Hello, World 간단한 예제를 보면서 NAVER 지도 API v3에 대해 설명합니다. 아래는 NAVER 그린팩토리를 중심점으로 하는 지도를 생성하는 예제입니다. &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=\"UTF-8\"&gt; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\"&gt; &lt;title&gt;간단한 지도 표시하기&lt;/title&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID\"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=\"map\" style=\"width:100%;height:400px;\"&gt;&lt;/div&gt; &lt;script&gt; var mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }; var map = new naver.maps.Map('map', mapOptions); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; Examples: 지도 기본 예제 NAVER 지도 API v3 로드하기 클라이언트 아이디 발급에서 발급받은 ncpClientId를 사용해 NAVER 지도 API v3을 로드해야 합니다. 공공기관용의 경우 govClientId를 금융기관용의 경우 finClientId를 사용하여 호출해주세요. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID\"&gt;&lt;/script&gt; 금융기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?finClientId=YOUR_CLIENT_ID\"&gt;&lt;/script&gt; NAVER 지도 API v3이 로드되는 동안 나머지 웹 사이트를 렌더링하는 비동기 방식으로 사용하려면 다음과 같이 callback 파라미터를 이용해 콜백 함수를 지정합니다. NAVER API v3이 준비되면 지정한 콜백 함수를 호출합니다. &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;callback=CALLBACK_FUNCTION\"&gt;&lt;/script&gt; 지도 DOM 요소 지정하기 웹 페이지에 지도를 삽입할 DOM 요소를 지정합니다. 일반적으로 &lt;div&gt;&lt;/div&gt; 요소를 사용합니다. &lt;div id=\"map\" style=\"width:100%;height:400px;\"&gt;&lt;/div&gt; 지도를 초기화할 때 MapOptions의 size를 지정하지 않으면, 초기화 시점의 지도 DOM 컨테이너의 크기로 지도 크기를 설정합니다. 이후 setSize 메서드를 이용해 지도 크기를 변경하기 전까지 지도 크기는 고정됩니다. 지도 옵션 설정하기 지도 옵션은 지도를 생성할 때 지도의 속성을 초기화하는 데 사용되며, 객체 리터럴로 만듭니다. 지도 옵션에 대한 자세한 설명은 MapOptions 명세를 참고합니다. var mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 } 지도 생성하기 Map 클래스는 지도를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); 새 인스턴스를 만들 때 두 가지 인수를 전달합니다. 지도를 표현할 컨테이너 요소. 반드시 전달해야 하는 인수입니다. 앞서 지도를 표현하기 위해 지정한 DOM 요소의 id 문자열을 직접 전달하거나, document.getElementById 메서드를 이용해 해당 DOM 요소의 참조를 전달할 수 있습니다. 지도의 속성을 초기화하는 데 이용하는 지도 옵션. 반드시 전달할 필요는 없습니다. 지도 옵션을 전달하면 설정한 속성으로 지도를 초기화합니다. 그렇지 않으면 NAVER 지도 API v3에서 가지고 있는 기본값으로 지도를 초기화합니다. 앞서 NAVER 지도 API v3을 비동기 방식으로 로드한 경우 아래와 같이 콜백 함수 내에서 지도를 생성합니다. 네이버 클라우드 플랫폼 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; 공공기관용 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; 금융기관용 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?finClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; × Search results Close "},"tutorial-2-Marker.html":{"id":"tutorial-2-Marker.html","title":"Tutorial: 마커","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 마커 마커 마커는 지도 위의 한 위치를 아이콘으로 표시하는 오버레이입니다. 아이콘은 이미지를 사용하거나, 벡터 그래픽 폴리곤 등으로 사용할 수 있습니다. 원하는 위치에 마커 올리기 마커를 사용하려면 Marker 클래스의 객체를 생성해야 합니다. 생성자에는 MarkerOptions 객체 리터럴을 인수로 넘겨서 마커의 속성을 설정해야 합니다. 마커는 지도상의 한 위치를 아이콘으로 표시하는 객체입니다. 따라서 위치를 나타내는 position 속성을 반드시 입력해야 합니다. 그 외의 속성은 기본값을 제공합니다. 다음 예제는 position 속성만 설정한 기본 마커를 네이버 그린팩토리 위에 올리는 예제입니다. 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 }); Examples: 마커 표시하기 다음은 마커의 setPosition 메서드를 사용하여 지도에 클릭한 지점으로 마커의 위치를 옮기는 예제입니다. 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); }); Examples: 클릭한 지점으로 마커 옮기기 원하는 이미지를 마커 아이콘으로 사용하기 마커의 icon 속성은 마커의 외형인 아이콘을 정의하는 객체입니다. icon 속성은 두 가지 타입의 객체 리터럴로 정의합니다. ImageIcon: 이미지 파일을 사용하여 아이콘을 설정합니다. SymbolIcon: 백터 그래픽(폴리곤)을 사용하여 아이콘을 설정합니다. 이 절에서는 ImageIcon 객체 리터럴을 활용하여 원하는 이미지의 마커를 사용하는 예제를 다룹니다. 다음은 icon 속성에 ImageIcon 객체 리터럴를 설정하여 특정 이미지의 마커를 만드는 예제입니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var markerOptions = { position: position, map: map, icon: { url: './img/pin_default.png', size: new naver.maps.Size(22, 35), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(11, 35) } }; var marker = new naver.maps.Marker(markerOptions); Examples: 이미지 아이콘 사용하기 icon 속성에 ImageIcon 객체 리터럴 대신 이미지의 url만 넣어 주어도 위 예제와 동일하게 동작합니다. icon 속성에 url 문자열을 넣으면 NAVER 지도 API v3 내부에서 자동으로 ImageIcon 객체 리터럴로 변환하고, ImageIcon의 size 속성은 이미지의 크기, origin 속성은 (0, 0), anchor 속성은 이미지의 가운데 아래 포인터를 기본값으로 설정합니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var markerOptions = { position: position, map: map, icon: './img/pin_default.png' }; var marker = new naver.maps.Marker(markerOptions); 하나의 이미지에 여러 모양의 아이콘을 합친 스프라이트 이미지를 활용하여 마커를 만들 수도 있습니다. var MARKER_ICON_URL = './img/sp_pins_spot_v2.png'; var MARKER_SPRITE_X_OFFSET = 29; var MARKER_SPRITE_Y_OFFSET = 50; var MARKER_SPRITE_POSITION = { \"A0\": [0, 0], \"B0\": [MARKER_SPRITE_X_OFFSET, 0], \"C0\": [MARKER_SPRITE_X_OFFSET*2, 0], \"D0\": [MARKER_SPRITE_X_OFFSET*3, 0], \"E0\": [MARKER_SPRITE_X_OFFSET*4, 0], \"F0\": [MARKER_SPRITE_X_OFFSET*5, 0], \"G0\": [MARKER_SPRITE_X_OFFSET*6, 0], \"H0\": [MARKER_SPRITE_X_OFFSET*7, 0], \"I0\": [MARKER_SPRITE_X_OFFSET*8, 0], \"A1\": [0, MARKER_SPRITE_Y_OFFSET], \"B1\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET], \"C1\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET], \"D1\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET], \"E1\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET], \"F1\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET], \"G1\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET], \"H1\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET], \"I1\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET], \"A2\": [0, MARKER_SPRITE_Y_OFFSET*2], \"B2\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET*2], \"C2\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET*2], \"D2\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET*2], \"E2\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET*2], \"F2\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET*2], \"G2\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET*2], \"H2\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET*2], \"I2\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET*2] }; var myLatlng = new naver.maps.LatLng(37.3614483, 129.1114883); var mapOptions = { zoom: 11, center: myLatlng }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); var bounds = map.getBounds(), southWest = bounds.getSW(), northEast = bounds.getNE(), lngSpan = northEast.lng() - southWest.lng(), latSpan = northEast.lat() - southWest.lat(); var markers = [], marker, position; for (var key in MARKER_SPRITE_POSITION) { position = new naver.maps.LatLng( southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); marker = new naver.maps.Marker({ map: map, position: position, title: key, icon: { url: MARKER_ICON_URL, size: new naver.maps.Size(24, 37), anchor: new naver.maps.Point(12, 37), origin: new naver.maps.Point(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1]) } }); }; Examples: 스프라이트 이미지 아이콘 사용하기 이미지 아이콘 마커 사용 시 레티나 디스플레이 대응하기 ImageIcon 객체 리터럴에 scaledSize 속성이 있습니다. scaledSize는 아이콘으로 사용하는 이미지의 크기를 강제로 조절하는 속성입니다. scaledSize를 입력하지 않으면 이미지의 원본 크기가 scaledSize에 기본값으로 입력됩니다. 레티나 디스플레이에 대응하려면 화면에 보이는 이미지보다 두 배 큰 이미지를 준비하고 scaledSize를 원본 이미지 크기의 반으로 입력합니다. 큰 이미지를 작게 보여주어 레티나 디스플레이에서도 정상적으로 보이게 하는 원리입니다. 다음은 레티나 디스플레이에 대응하는 단일 이미지 마커 예제입니다. 50 x 68 크기의 이미지를 25 x 34 크기의 마커 아이콘으로 사용하여 레티나 디스플레이에 대응합니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var marker = new naver.maps.Marker({ position: position, map: map, icon: { url: './img/ico_pin.jpg', size: new naver.maps.Size(25, 34), scaledSize: new naver.maps.Size(25, 34), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(12, 34) } }); Examples: 이미지 아이콘 레티나 대응하기 다음은 레티나 디스플레이에 대응하는 스프라이트 이미지 마커 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); makeMarker(map, new naver.maps.LatLng(37.3595704, 127.105399), 0); makeMarker(map, new naver.maps.LatLng(37.3618025, 127.1153248), 1); makeMarker(map, new naver.maps.LatLng(37.3561936, 127.0983706), 2); function makeMarker(map, position, index) { var ICON_GAP = 31; var ICON_SPRITE_IMAGE_URL = './img/sp_pin_hd.png'; var iconSpritePositionX = (index * ICON_GAP) + 1; var iconSpritePositionY = 1; var marker = new naver.maps.Marker({ map: map, position: position, icon: { url: ICON_SPRITE_IMAGE_URL, size: new naver.maps.Size(26, 36), // 이미지 크기 origin: new naver.maps.Point(iconSpritePositionX, iconSpritePositionY), // 스프라이트 이미지에서 클리핑 위치 anchor: new naver.maps.Point(13, 36), // 지도상 위치에서 이미지 위치의 offset값 scaledSize: new naver.maps.Size(395, 79) } }); return marker; } Examples: 스프라이트 이미지 아이콘 레티나 대응하기 폴리곤을 마커 아이콘으로 사용하기 지금까지 MarkerOptions의 icon 속성에 ImageIcon 객체 리터럴을 설정하여 이미지 파일을 마커 아이콘으로 활용하는 예제를 보았습니다. icon 속성에 SymbolIcon 객체 리터럴을 설정하면 이미지 파일 대신 폴리곤을 그려 마커의 아이콘으로 활용할 수 있습니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var marker = new naver.maps.Marker({ map: map, position: position, icon: { path: [ new naver.maps.Point(0, 70), new naver.maps.Point(20, 100), new naver.maps.Point(40, 70), new naver.maps.Point(30, 70), new naver.maps.Point(70, 0), new naver.maps.Point(10, 70) ], anchor: new naver.maps.Point(23, 103), fillColor: '#ff0000', fillOpacity: 1, strokeColor: '#000000', strokeStyle: 'solid', strokeWeight: 3 }, shadow: { url: \"./img/shadow-arrow.png\", size: new naver.maps.Size(193, 128), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(62, 120) } }); Examples: 심벌 아이콘 사용하기 HTML 마크업을 마커 아이콘으로 사용하기 이미지 또는 심벌 외에도 HTML 마크업을 이용해 마커를 생성할 수 있습니다. 'icon' 속성에 HtmlIcon 객체 리터럴을 설정하면 설정한 HTML을 노출하는 마커를 생성할 수 있습니다. var boundary = naver.maps.LatLngBounds.bounds(new naver.maps.LatLng(37.3724620, 127.1051714), new naver.maps.LatLng(37.3542795, 127.1174332)); var unarySpot = new naver.maps.LatLng(37.3637770, 127.1174332); var map = new naver.maps.Map(document.getElementById('map'), { zoom: 10 }); map.fitBounds(boundary); var unarySpotMarker = new naver.maps.Marker({ position: unarySpot, map: map, title: 'Unary Spot!!', icon: { content: '&lt;img src=\"./img/pin_default.png\" alt=\"\" style=\"margin: 0px; padding: 0px; border: 0px solid transparent; display: block; max-width: none; max-height: none; -webkit-user-select: none; position: absolute; width: 22px; height: 35px; left: 0px; top: 0px;\"&gt;', size: new naver.maps.Size(22, 35), anchor: new naver.maps.Point(11, 35) } }); Examples: HTML 아이콘 사용하기 마커의 인터랙션 영역 정의하기 MarkerOptions의 shape 속성은 사용자 인터랙션의 영역(마우스, 터치 이벤트)을 정의하는 속성입니다. 기본값은 null이고, shape가 null인 경우는 다음과 같이 사용자 인터랙션의 영역을 설정합니다. icon이 ImageIcon이면 마커 크기만큼의 사각 영역을 사용자 인터랙션 영역으로 설정합니다. icon이 SymbolIcon이면 폴리곤의 모양 그대로 사용자 인터랙션 영역으로 설정합니다. 마커의 사용자 인터랙션의 영역을 임의로 설정하고 싶은 경우 shape 속성에 MarkerShape 객체 리터럴을 설정하여 원하는 모양의 좌표를 입력합니다. 다음 예제는 마커의 모양대로 사용자 인터랙션을 설정하기 위해 shape 속성을 활용한 예제입니다. var position = new naver.maps.LatLng(37.3595704, 127.105399); var map = new naver.maps.Map('map', { center: position, zoom: 10 }); var markerOptions = { position: position, map: map, icon: { url: './img/pin_default.png', size: new naver.maps.Size(22, 35), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(11, 35) }, shadow: { url: './img/shadow-pin_default.png', size: new naver.maps.Size(40, 35), origin: new naver.maps.Point(0, 0), anchor: new naver.maps.Point(11, 35) }, shape: { coords: [11, 0, 9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 5, 20, 6, 23, 8, 26, 9, 30, 9, 34, 13, 34, 13, 30, 14, 26, 16, 23, 17, 20, 17, 19, 20, 16, 21, 14, 22, 12, 22, 12, 22, 8, 20, 4, 18, 2, 16, 1, 13, 0], type: 'poly' } }; var marker = new naver.maps.Marker(markerOptions); Examples: 마커 인터랙션 영역 설정하기 마커의 애니메이션 정의하기 MarkerOptions의 animation 속성은 마커의 애니메이션을 정의하는 속성입니다. 제공하는 애니메이션은 다음과 같습니다. BOUNCE: 마커가 지도에 노출되면 마커 위치에서 튀기는 애니메이션을 수행합니다. 이 애니메이션은 animation 속성을 null로 설정해 애니메이션을 중지할 때까지 계속 수행됩니다. DROP: 마커를 지도에 노출할 때 지도 위에서 떨어지는 애니메이션을 수행합니다. 최종적으로 떨어지는 위치는 마커의 위치입니다. 이 애니메이션은 한 번만 수행되며, 수행 후 animation 속성은 null로 바뀝니다. 다음은 마커를 지도에 표시할 때 DROP 애니메이션을 적용한 예제입니다. var mapOptions = { zoom: 11 }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); map.fitBounds(naver.maps.LatLngBounds.bounds(new naver.maps.LatLng(37.3724620, 127.1051714), new naver.maps.LatLng(37.3542795, 127.1174332))); var urlMarker = new naver.maps.Marker({ position: new naver.maps.LatLng(37.3542795, 127.1072556), map: map, title: 'urlMarker', icon: \"./img/pin_default.png\", animation: naver.maps.Animation.DROP }); Examples: 애니메이션 마커 표시하기 현재 화면에 보이는 마커만 표시하기 지도 위에 오버레이가 많이 올라갈수록 브라우저의 그래픽 리소스를 많이 사용하게 되고 그만큼 성능이 느려질 수 밖에 없습니다. 따라서 가능한 한 적은 수의 오버레이만 지도 위에 올리는 것이 성능에 도움이 됩니다. 가장 쉽게 생각할 수 있는 방법은 화면에 보이는 오버레이만 지도에 올리고 보이지 않는 오버레이는 지도에서 빼는 것입니다. LatLngBounds, PointBounds 객체의 hasLatLng, hasPoint 메서드를 사용하면 이를 어렵지 않게 구현할 수 있습니다. LatLngBounds, PointBounds은 특정 영역을 표현하기 위한 클래스입니다. 특정 영역이 정의되면 그 영역 내에 특정 위치가 포함되는지 그렇지 않은지를 판단할 수 있고 이는 hasLatLng, hasPoint 메서드를 이용해 확인할 수 있습니다. Map 객체는 getBounds 메서드를 제공하여 현재 화면에 표시되고 있는 지도 영역을 LatLngBounds 객체로 반환합니다. 각 마커의 위치가 Map 객체의 getBounds 메서드를 이용해 받은 현재 화면의 지도 영역에 포함되는지 확인하여, 화면에 보이면 지도에 올리고 그렇지 않다면 지도에서 뺄 수 있습니다. 다음은 위에서 설명한 내용을 구현한 예제입니다. 지도를 초기화한 후 getBounds를 이용해 지도 영역을 구하고 해당 영역 내에서 임의의 위치에 여러 개의 마커를 올립니다. 그 후 지도 영역이 변경되는 drag_end, zoom_changed 이벤트에서 각 마커들이 현재 지도 영역에 포함되는지 여부에 따라 지도에 올리거나 뺍니다. var MARKER_ICON_URL = './img/sp_pins_spot_v3.png'; var MARKER_SPRITE_X_OFFSET = 29; var MARKER_SPRITE_Y_OFFSET = 50; var MARKER_SPRITE_POSITION = { \"A0\": [0, 0], \"B0\": [MARKER_SPRITE_X_OFFSET, 0], \"C0\": [MARKER_SPRITE_X_OFFSET*2, 0], \"D0\": [MARKER_SPRITE_X_OFFSET*3, 0], \"E0\": [MARKER_SPRITE_X_OFFSET*4, 0], \"F0\": [MARKER_SPRITE_X_OFFSET*5, 0], \"G0\": [MARKER_SPRITE_X_OFFSET*6, 0], \"H0\": [MARKER_SPRITE_X_OFFSET*7, 0], \"I0\": [MARKER_SPRITE_X_OFFSET*8, 0], \"A1\": [0, MARKER_SPRITE_Y_OFFSET], \"B1\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET], \"C1\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET], \"D1\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET], \"E1\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET], \"F1\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET], \"G1\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET], \"H1\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET], \"I1\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET], \"A2\": [0, MARKER_SPRITE_Y_OFFSET*2], \"B2\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET*2], \"C2\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET*2], \"D2\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET*2], \"E2\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET*2], \"F2\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET*2], \"G2\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET*2], \"H2\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET*2], \"I2\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET*2] }; var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); var bounds = map.getBounds(), southWest = bounds.getSW(), northEast = bounds.getNE(), lngSpan = northEast.lng() - southWest.lng(), latSpan = northEast.lat() - southWest.lat(); var markers = []; for (var key in MARKER_SPRITE_POSITION) { var position = new naver.maps.LatLng( southWest.lat() + (latSpan * Math.random()), southWest.lng() + (lngSpan * Math.random()) ); var marker = new naver.maps.Marker({ map: map, position: position, title: key, icon: { url: MARKER_ICON_URL, size: new naver.maps.Size(24, 37), anchor: new naver.maps.Point(12, 37), origin: new naver.maps.Point(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1]) }, zIndex: 100 }); markers.push(marker); }; naver.maps.Event.addListener(map, 'zoom_changed', function() { updateMarkers(map, markers); }); naver.maps.Event.addListener(map, 'dragend', function() { updateMarkers(map, markers); }); function updateMarkers(map, markers) { var mapBounds = map.getBounds(); var marker, position; for (var i = 0; i &lt; markers.length; i++) { marker = markers[i] position = marker.getPosition(); if (mapBounds.hasLatLng(position)) { showMarker(map, marker); } else { hideMarker(map, marker); } } } function showMarker(map, marker) { if (marker.setMap()) return; marker.setMap(map); } function hideMarker(map, marker) { if (!marker.setMap()) return; marker.setMap(null); } Examples: 보이는 지도 영역의 마커만 표시하기 getDrawingRect 메서드를 활용하여 겹침 마커 구분하기 NAVER 지도 API v3에서 제공하는 오버레이 중 Marker, Rectangle, Circle, Polyline, Polygon은 getDrawingRect 메서드를 제공합니다. 이 메서드는 현재 지도 상태에서 오버레이가 그려지는 영역을 구합니다. 반환값은 PointBounds 객체이고 단위는 화면 픽셀을 기준으로 합니다. 앞서 주어진 영역에 특정 위치가 포함되는지 여부를 확인할 수 있는 LatLngBounds, PointBounds의 hasPoint 메서드를 설명했습니다. 이 절에서는 intersects 메서드를 설명합니다. LatLngBounds, PointBounds의 intersects 메서드는 두 영역이 겹치는지 여부를 검사하는 메서드입니다. 이 메서드를 사용하면 두 개의 마커가 현재 겹쳐진 상태인지 그렇지 않은지를 쉽게 알 수 있습니다. getDrawingRect 메서드로 두 마커의 그리기 영역을 구하고 두 영역이 겹치는지 검사하면 됩니다. 다음은 이를 간단하게 구현한 코드입니다. var marker1 = new naver.maps.Marker({...}); var marker2 = new naver.maps.Marker({...}); marker1.setMap(map); marker2.setMap(map); function intersects() { var marker1Rect = marker1.getDrawingRect(); var marker2Rect = marker2.getDrawingRect(); // 두 마커가 겹치는지 여부를 true 또는 false로 반환한다. return marker1Rect.intersects(marker2Rect); } 다음 예제는 지도 위에 불특정 다수의 마커를 올리고 zoom_changed 이벤트 핸들러에서 각 마커의 겸침 상태를 확인해 화면에 표시하는 예제입니다. 이 예제는 위치가 변경되지 않는 마커이므로 줌 레벨이 변경되는 경우 겹침 여부를 검사합니다. 지도 초기화 후 현재 보이는 지도 영역의 임의의 위치에 마커를 올립니다. 줌 레벨이 변경되면 각 마커는 다른 마커와의 겹침 여부를 확인하고 인접한 마커들을 모으는 작업을 합니다. 겹쳐진 마커는 하이라이트 처리를 한 후 인접한 마커들의 그리기 영역을 합쳐 지도 좌표계 단위의 LatLngBounds 객체로 변환하고 Rectangle을 그려 겹쳐진 마커들을 눈으로 확인할 수 있도록 합니다. var MARKER_ICON_URL = './img/sp_pins_spot_v3.png'; var MARKER_HIGHLIGHT_ICON_URL = './img/sp_pins_spot_v3_over.png'; var COLORS = ['#45ABD9', '#6154B6', '#E43736', '#44AE3F', '#F6D200', '#344554']; var MARKER_SPRITE_X_OFFSET = 29; var MARKER_SPRITE_Y_OFFSET = 50; var MARKER_SPRITE_POSITION = { \"A0\": [0, 0], \"B0\": [MARKER_SPRITE_X_OFFSET, 0], \"C0\": [MARKER_SPRITE_X_OFFSET*2, 0], \"D0\": [MARKER_SPRITE_X_OFFSET*3, 0], \"E0\": [MARKER_SPRITE_X_OFFSET*4, 0], \"F0\": [MARKER_SPRITE_X_OFFSET*5, 0], \"G0\": [MARKER_SPRITE_X_OFFSET*6, 0], \"H0\": [MARKER_SPRITE_X_OFFSET*7, 0], \"I0\": [MARKER_SPRITE_X_OFFSET*8, 0], \"A1\": [0, MARKER_SPRITE_Y_OFFSET], \"B1\": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET], \"C1\": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET], \"D1\": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET], \"E1\": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET], \"F1\": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET], \"G1\": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET], \"H1\": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET], \"I1\": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET] }; var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); var bounds = map.getBounds(), southWest = bounds.getSW(), northEast = bounds.getNE(), lngSpan = northEast.lng() - southWest.lng(), latSpan = northEast.lat() - southWest.lat(); var markers = [], markersMap = {}; var rectangles = [], colorIndex = 0; for (var key in MARKER_SPRITE_POSITION) { var position = new naver.maps.LatLng( southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); var marker = new naver.maps.Marker({ map: map, position: position, title: key, icon: { url: MARKER_ICON_URL, size: new naver.maps.Size(24, 37), anchor: new naver.maps.Point(12, 37), origin: new naver.maps.Point(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1]) }, zIndex: 100 }); markers.push(marker); markersMap[key] = marker; }; naver.maps.Event.addListener(map, 'zoom_changed', function() { updateMarkersIntersectState(); }); function updateMarkersIntersectState() { var store = getIntersectMarkerStore(markers); var intersectMarkers = getMarkersByStore(store); var boundsList = getIntersectMarkerBounds(intersectMarkers); resetMarkers(markers); highlightMarkers(intersectMarkers); resetRectangles(rectangles); rectangles = drawRectangles(boundsList); } function resetRectangles(rectangles) { for (var i = 0; i &lt; rectangles.length; i++) { rectangles[i].setMap(null); } } function drawRectangles(boundsList) { var rectangles = [] for (var i = 0; i &lt; boundsList.length; i++) { rectangles.push(new naver.maps.Rectangle({ map: map, bounds: boundsList[i], strokeColor: COLORS[colorIndex % COLORS.length], strokeWeight: 2, strokeOpacity: 0.8, fillColor: COLORS[colorIndex % COLORS.length], fillOpacity: 0.4 })); colorIndex++; } return rectangles; } function getIntersectMarkerStore(markers) { var store = []; var target, checked, targetBounds, checkedBounds; for (var i = 0; i &lt; markers.length; i++) { target = markers[i]; for (var j = 0; j &lt; markers.length; j++) { checked = markers[j]; if (target === checked) continue; targetBounds = target.getDrawingRect(); checkedBounds = checked.getDrawingRect(); if (targetBounds.intersects(checkedBounds)) { _inertToIntersectStore(store, target.getTitle(), checked.getTitle()); } } } return store; } function getMarkersByStore(store) { var intersectMarkers = []; for (var i = 0; i &lt; store.length; i++) { intersectMarkers[i] = []; for (var j = 0; j &lt; store[i].length; j++) { intersectMarkers[i].push(markersMap[store[i][j]]); } } return intersectMarkers; } function getIntersectMarkerBounds(intersectMarkers) { var boundsList = [], bounds; for (var i = 0; i &lt; intersectMarkers.length; i++) { for (var j = 0; j &lt; intersectMarkers[i].length; j++) { if (j === 0) { bounds = intersectMarkers[i][j].getDrawingRect(); } else { bounds = bounds.union(intersectMarkers[i][j].getDrawingRect()); } } bounds = _pixelBoundsToLatLngBounds(map, bounds); boundsList.push(bounds); } return boundsList; } function resetMarkers(markers) { for (var i = 0; i &lt; markers.length; i++) { var icon = markers[i].getIcon(); icon.url = MARKER_ICON_URL; markers[i].setIcon(icon); } } function highlightMarkers(intersectMarkers) { for (var i = 0; i &lt; intersectMarkers.length; i++) { for (var j = 0; j &lt; intersectMarkers[i].length; j++) { var icon = intersectMarkers[i][j].getIcon(); icon.url = MARKER_HIGHLIGHT_ICON_URL; intersectMarkers[i][j].setIcon(icon); } } } function _pixelBoundsToLatLngBounds(map, pixelBounds) { var zoom = map.getZoom(); var proj = map.getProjection(); var min = pixelBounds.getMin(); var max = pixelBounds.getMax(); min = proj.scaleDown(min, zoom); max = proj.scaleDown(max, zoom); min = proj.fromPointToCoord(min); max = proj.fromPointToCoord(max); return new naver.maps.LatLngBounds(min, max); } function _uniqueArray(a) { return a.reduce(function(p, c) { if (p.indexOf(c) &lt; 0) p.push(c); return p; }, []); } function _inertToIntersectStore(store, value1, value2) { var index1 = _has(store, value1); var index2 = _has(store, value2); if (index1 !== -1 &amp;&amp; index2 === -1) { index2 = index1; } else if (index1 === -1 &amp;&amp; index2 !== -1) { index1 = index2; } if (index1 === -1 &amp;&amp; index2 === -1) { store.push([value1, value2]); } else { store[index1].push(value1); store[index2].push(value2); if (index1 !== index2) { var low = Math.min(index1, index2); var high = Math.max(index1, index2); store[low] = store[low].concat(store[high]); store.splice(high, 1); store[low] = _uniqueArray(store[low]); } else { store[index1] = _uniqueArray(store[index1]); } } } function _has(store, value) { var array; for (var i = 0; i &lt; store.length; i++) { array = store[i]; if (array.indexOf(value) !== -1) { return i; } } return -1; } Examples: 겹침 마커 처리하기 기타 마커 구현 예제 위에서 설명한 내용 외에도 다양한 방식으로 마커를 활용할 수 있습니다. 다음의 마커 구현 예제를 참고하세요. Examples: 마커 클러스터화하기 Examples: 다수의 마커에 이벤트 핸들러 사용하기 × Search results Close "},"tutorial-3-InfoWindow.html":{"id":"tutorial-3-InfoWindow.html","title":"Tutorial: 정보 창","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 정보 창 정보 창 InfoWindow는 지도 위에 말풍선 모양의 콘텐츠를 표시할 수 있는 정보 창을 정의하는 객체입니다. 정보 창의 디자인은 NAVER 지도 API v3에서 제공하는 스타일을 사용할 수 있고, 스타일 관련 옵션으로 정보 창 테두리, 배경색, 말풍선 꼬리의 스타일을 설정할 수 있습니다. 정보 창 내부의 콘텐츠는 DOM 요소로 구성되므로 NAVER 지도 API v3에서 제공하는 스타일을 무시하고 사용자가 원하는 디자인으로 정보 창을 꾸밀 수도 있습니다. 마커 위에 정보 창 올리기 정보 창을 지도 위에 노출하려면 open(map, anchor) 메서드를 호출합니다. 첫 번째 파라미터인 map은 정보 창을 올릴 Map 객체를 설정합니다. 두 번째 파라미터인 anchor는 지도 위에서 정보 창의 위치를 결정하는 인자입니다. anchor에 LatLng 또는 Point 객체로 지도 좌표를 설정하면 해당 좌표를 가리키도록 정보 창을 위치시킵니다. anchor는 지도 좌표뿐만 아니라 Marker 객체와 같이 객체 내부에 지도 좌표 속성과 해당 지도 좌표 위치에서의 오프셋값인 anchor 속성을 포함하는 KVO 객체로도 설정할 수 있습니다. 해당 객체는 getPosition과 getAnchor 메서드가 구현되어 있어야 하고, InfoWindow 객체는 이를 이용해 position과 anchor값을 계산하여 적절한 위치에 정보 창을 노출합니다. 다음은 마커 위에 정보 창을 노출하는 예제입니다. var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147); var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.5698411, 126.9783927), zoom: 10 }); var contentString = [ '&lt;div class=\"iw_inner\"&gt;', ' &lt;h3&gt;서울특별시청&lt;/h3&gt;', ' &lt;p&gt;서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청&lt;br&gt;', ' &lt;img src=\"./img/hi-seoul.jpg\" width=\"55\" height=\"55\" alt=\"서울시청\" class=\"thumb\" /&gt;&lt;br&gt;', ' 02-120 | 공공,사회기관 &gt; 특별,광역시청&lt;br&gt;', ' &lt;a href=\"http://www.seoul.go.kr\" target=\"_blank\"&gt;www.seoul.go.kr/&lt;/a&gt;', ' &lt;/p&gt;', '&lt;/div&gt;' ].join(''); var marker = new naver.maps.Marker({ map: map, position: cityhall }); var infowindow = new naver.maps.InfoWindow({ content: contentString }); naver.maps.Event.addListener(marker, \"click\", function(e) { if (infowindow.getMap()) { infowindow.close(); } else { infowindow.open(map, marker); } }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 정보 창 표시하기 정보 창 디자인 스타일 옵션 조정하기 InfoWindow를 생성할 때 생성자에 InfoWindowOptions를 설정해야 합니다. InfoWindowOptions에는 정보 창의 테두리, 배경색, 말꼬리 등의 모양을 결정하는 스타일 옵션이 포함되어 있습니다. 이를 조정하여 사용자는 원하는 모양대로 정보 창을 노출할 수 있습니다. 다음은 스타일 옵션값을 조절하여 정보 창 모양을 설정하는 예제입니다. var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147); var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.5698411, 126.9783927), zoom: 10 }); var contentString = [ '&lt;div class=\"iw_inner\"&gt;', ' &lt;h3&gt;서울특별시청&lt;/h3&gt;', ' &lt;p&gt;서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청&lt;br&gt;', ' &lt;img src=\"./img/hi-seoul.jpg\" width=\"55\" height=\"55\" alt=\"서울시청\" class=\"thumb\" /&gt;&lt;br&gt;', ' 02-120 | 공공,사회기관 &gt; 특별,광역시청&lt;br&gt;', ' &lt;a href=\"http://www.seoul.go.kr\" target=\"_blank\"&gt;www.seoul.go.kr/&lt;/a&gt;', ' &lt;/p&gt;', '&lt;/div&gt;' ].join(''); var marker = new naver.maps.Marker({ map: map, position: cityhall }); var infowindow = new naver.maps.InfoWindow({ content: contentString, maxWidth: 140, backgroundColor: \"#eee\", borderColor: \"#2db400\", borderWidth: 5, anchorSize: new naver.maps.Size(30, 30), anchorSkew: true, anchorColor: \"#eee\", pixelOffset: new naver.maps.Point(20, -20) }); naver.maps.Event.addListener(marker, \"click\", function(e) { if (infowindow.getMap()) { infowindow.close(); } else { infowindow.open(map, marker); } }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 정보 창 옵션 사용하기 사용자 정의 정보 창 InfoWindow 객체에서 제공하는 정보 창 모양을 무시하고 사용자가 원하는 대로 정보 창 디자인을 꾸밀 수 있습니다. InfoWindowOptions의 borderWidth를 0으로 설정하여 테두리 디자인을 무시합니다. backgroundColor를 transparent로 설정하여 배경색을 무시합니다. 말꼬리를 없애기 위해 disableAnchor를 false로 설정합니다. disableAnchor 속성은 기본 말풍선 꼬리의 사용 여부입니다. CSS 스타일을 설정해 원하는 대로 정보 창 요소를 디자인합니다. 다음은 NAVER 지도 API v3에서 제공하는 정보 창 디자인을 무시하고 CSS를 설정해 정보 창 디자인을 적용한 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.5698411, 126.9783927), zoom: 10 }); // 핀 요소 var infoWindowElement = $([ '&lt;div class=\"pin_nation\"&gt;', ' &lt;a href=\"http://www.naver.com/\" target=\"_blank\" class=\"pin_a\"&gt;', ' &lt;img src=\"./img/hi-seoul.jpg\" width=\"38\" height=\"26\" alt=\"\" class=\"pin_flag_m\"&gt;', ' &lt;span class=\"pin_txt\"&gt;&lt;em&gt;캐나다&lt;/em&gt; &lt;span class=\"spr spr_arrow\"&gt;&lt;/span&gt;&lt;/span&gt;', ' &lt;span class=\"spr spr_arr\"&gt;&lt;/span&gt;', ' &lt;/a&gt;', ' &lt;div class=\"pin\"&gt;&lt;span class=\"pin_blur\"&gt;&lt;/span&gt;&lt;/div&gt;', '&lt;/div&gt;'].join('')); var infowindow = new naver.maps.InfoWindow({ content: infoWindowElement[0], borderWidth: 0, disableAnchor: true, backgroundColor: 'transparent', pixelOffset: new naver.maps.Point(0, -28), }); naver.maps.Event.addListener(map, \"click\", function(e) { var latlng = e.latlng; infoWindowElement.find(\"em\").text(latlng.toString()); infowindow.open(map, latlng); }); 위 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-KVO-Mechanism.html":{"id":"tutorial-3-KVO-Mechanism.html","title":"Tutorial: KVO 디자인","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVO 디자인 KVO 디자인 KVO(Key-Value Observing)는 객체의 속성에 접근할 때 해당 속성을 의미하는 문자열을 키(key)로 사용해 속성의 값(value)을 참조하는 매커니즘입니다. 또한 키에 대응하는 속성값의 변경 사항을 추적하는 역할을 합니다. KVO 클래스 상속받기 KVO 클래스를 상속받으려면 클래스를 선언할 때 다음과 같이 해당 클래스의 prototype을 설정해야 합니다. var MyClass = function() { // class initialization codes }; MyClass.prototype = new naver.maps.KVO(); MyClass.prototype.constructor = MyClass; MyClass.prototype.myMethod = function() { // implementation }; 위와 같이 MyClass를 선언하면 MyClass의 인스턴스는 KVO 클래스를 상속받은 객체가 됩니다. var myKVO = new naver.maps.KVO(); var myClass = new MyClass(); myClass instanceof MyClass; // true myClass instanceof naver.maps.KVO; // true myKVO instanceof naver.maps.KVO; // true myKVO instanceof MyClass; // false Key-Value 이용하기 KVO 클래스를 상속받은 클래스는 set과 get 메서드를 이용해 키에 대응하는 값을 설정하거나 가져올 수 있습니다. var MyClass = function() { this.set('zoom', 10); }; MyClass.prototype = new naver.maps.KVO(); MyClass.prototype.constructor = MyClass; MyClass.prototype.getZoom = function() { return this.get('zoom'); }; Key-Value 연결하기 KVO 클래스를 상속받은 클래스의 인스턴스는 bindTo 메서드를 이용해 키에 대응하는 값을 서로 동기화할 수 있습니다. 다음은 zoom 문자열을 키로 사용해 속성의 값을 설정하고, KVO 클래스를 상속받은 클래스의 두 인스턴스 간에 zoom 속성을 연결하는 예제입니다. myView 객체가 myModel 객체의 zoom 속성을 바인딩함으로써 해당 속성에 접근해 변경할 수 있습니다. 또한 zoom 속성의 상태 변경은 두 객체에 동일하게 적용됩니다. var myModel = new naver.maps.KVO(); myModel.set('zoom', 11); var myView = new naver.maps.KVO(); myView.bindKVO = function() { this.bindTo('zoom', myModel); }; myView.bindKVO(); myView.get('zoom'); // 11 myModel.set('zoom', 21); myModel.get('zoom'); // 21 myView.get('zoom'); // 21 속성을 바인딩할 때 속성의 이름을 별도로 지정해 동기화할 수 있습니다. 다음은 앞의 예제에서 zoom 속성을 myZoom이란 키로 지정해 연결하는 예제입니다. myView.bindKVO = function() { this.bindTo('myZoom', myModel, 'zoom'); }; myView.bindKVO(); myView.get('zoom'); // undefined myView.get('myZoom'); // 11 myModel.set('zoom', 21); myView.get('myZoom'); // 21 bindTo 메서드의 세 번째 인수(targetKey)를 생략하면, 연결하려는 객체의 속성 목록에서 첫 번째 인수의 속성 이름을 찾아 연결합니다. 여러 개의 속성을 바인딩할 때는 배열 형태의 키를 지정해 이용할 수 있습니다. 다음은 myModel 객체의 zoom, center, centerPoint, scale 속성을 한 번에 연결하는 예제입니다. var myModel = new naver.maps.KVO(); myModel.set('zoom', 11); myModel.set('center', new naver.maps.LatLng(38, 127)); myModel.set('centerPoint', new naver.maps.Point(128, 128)); myModel.set('scale', 1); var myView = new naver.maps.KVO(); myView.bindKVO = function() { this.bindTo([ 'zoom', 'center', 'centerPoint', 'scale' ], myModel); }; myView.bindKVO(); 연결된 Key-Value 상태 변경 감지하기 KVO는 속성의 상태(내용) 변경을 {key}_changed 이름 규칙을 사용해 알립니다. 따라서 속성을 연결한 객체들은 해당 속성의 상태가 변경된 시점을 감지할 수 있습니다. 즉, 특정 속성의 상태가 변경되면 추가적으로 수행해야 할 것이 있을 때 유용하게 이용할 수 있습니다. 연결된 Key-Value 상태 변경 감지에 대한 자세한 설명은 KVO 상태 변경 알림를 참고합니다. NAVER 지도 API v3은 속성의 상태 변경을 감지할 수 있도록 두 가지 방법을 제공합니다. 첫 번째는 {key}_changed 이름 규칙을 준수하는 메서드를 사용하는 것입니다. 다음은 myModel 객체의 zoom 속성을 변경하면 시스템 경고 창을 표시하는 예제입니다. myView.zoom_changed = function(zoom) { alert('zoom 값이 '+ zoom +'으로 변경되었습니다!'); }; myModel.set('zoom', 14); 두 번째는 {key}_changed 이름 규칙을 준수하는 이벤트를 구독하는 것입니다. 다음은 위 예제를 이벤트 구독으로 처리하는 예제입니다. var listener = naver.maps.Event.addListener(myView, 'zoom_changed', function(zoom) { alert('zoom 값이 '+ zoom +'으로 변경되었습니다!'); }); myModel.set('zoom', 14); Event의 addListener 메서드를 이용해 KVO 이벤트를 구독하면 removeListener 메서드를 이용해 구독을 취소할 수 있습니다. var listener = naver.maps.Event.addListener(myView, 'zoom_changed', function(zoom) { alert('zoom 값이 '+ zoom +'으로 변경되었습니다!'); }); naver.maps.Event.removeListener(listener); myModel.set('zoom', 14); // not notified × Search results Close "},"tutorial-4-Shape.html":{"id":"tutorial-4-Shape.html","title":"Tutorial: 도형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 도형 도형 NAVER 지도 API v3에서는 지도 좌표를 기반으로 백터 그래픽을 올릴 수 있는 도형 오버레이를 제공합니다. NAVER 지도 API v3에서 제공하는 도형의 종류는 아래와 같습니다. Polyline Polygon Rectangle Circle Ellipse 폴리라인 폴리라인은 일련의 지도 좌표를 연결하여 선을 그리는 객체입니다. 지도 위에 폴리라인 그리기 path 속성에 지도 좌표 목록을 입력합니다(path는 반드시 입력해야 합니다). 그리고 map 속성에 폴리라인이 그려질 Map 객체를 입력하거나, setMap 메서드를 이용해 지도 객체를 설정할 수 있습니다. 다음은 Polyline 객체를 만들어 지도위에 폴리라인을 그리는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3700065, 127.121359), zoom: 9 }); var polyline = new naver.maps.Polyline({ map: map, path: [ new naver.maps.LatLng(37.359924641705476, 127.1148204803467), new naver.maps.LatLng(37.36343797188166, 127.11486339569092), new naver.maps.LatLng(37.368520071054576, 127.11473464965819), new naver.maps.LatLng(37.3685882848096, 127.1088123321533), new naver.maps.LatLng(37.37295383612657, 127.10876941680907), new naver.maps.LatLng(37.38001321351567, 127.11851119995116), new naver.maps.LatLng(37.378546827477855, 127.11984157562254), new naver.maps.LatLng(37.376637072444105, 127.12052822113036), new naver.maps.LatLng(37.37530703574853, 127.12190151214598), new naver.maps.LatLng(37.371657839593894, 127.11645126342773), new naver.maps.LatLng(37.36855417793982, 127.1207857131958) ] }); Examples: 폴리곤, 폴리라인 그리기 폴리라인 옵션 살펴보기 폴리라인의 색상, 두께, 선 스타일, 투명도를 설정할 수 있습니다. Polyline 객체 생성 시 생성자에 PolylineOptions 객체 리터럴을 설정할 수도 있고, 생성 후 setOptions 메서드를 통해 동적으로 스타일을 변경할 수도 있습니다. PolylineOptions 객체 리터럴의 속성 중 clickable 속성을 true로 설정하면 사용자 인터랙션을 처리할 수도 있습니다. 다음은 마우스 포인터를 올리거나 치우는 사용자 인터랙션 시 setOptions 메서드를 사용하여 선 스타일을 변경하는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3646656, 127.108828), zoom: 10 }); var polyline = new naver.maps.Polyline({ map: map, path: [ new naver.maps.LatLng(37.365620929135716, 127.1036195755005), new naver.maps.LatLng(37.365620929135716, 127.11353302001953), new naver.maps.LatLng(37.3606921307849, 127.10452079772949), new naver.maps.LatLng(37.36821310838941, 127.10814714431763), new naver.maps.LatLng(37.360760351656545, 127.11299657821654), new naver.maps.LatLng(37.365620929135716, 127.1036195755005) ], clickable: true, // 사용자 인터랙션을 받기 위해 clickable을 true로 설정합니다. strokeColor: '#5347AA', strokeStyle: 'longdash', strokeOpacity: 0.5, strokeWeight: 5 }); naver.maps.Event.addListener(polyline, 'mouseover', function() { polyline.setOptions({ strokeColor: '#E51D1A', strokeStyle: 'solid', strokeOpacity: 1 }); }); naver.maps.Event.addListener(polyline, 'mouseout', function() { polyline.setOptions({ strokeColor: '#5347AA', strokeStyle: 'longdash', strokeOpacity: 0.5 }); }); Examples: 폴리라인 옵션 사용하기 동적으로 폴리라인 그리기 Polyline 객체의 path 속성은 지도 좌표 목록을 입력합니다. 지도 좌표 목록을 입력할 때 [Array]로 입력할 수 있지만 객체 내부적으로는 KVOArray로 저장하고 관리합니다. 따라서 getPath 메서드를 이용해 반환받은 path는 KVOArray입니다. KVOArray는 목록의 내부 요소가 변경될 때마다 이에 해당하는 이벤트를 발생시켜 상태 변경을 알려줍니다. Polyline 객체는 이러한 KVOArray의 기능을 활용해 path의 상태를 동적으로 반영하여 선을 그립니다. KVOArray에 대한 자세한 설명은 KVO 상태 변경 알림를 참고합니다. 다음은 지도 클릭 시 클릭한 지점의 지도 좌표를 동적으로 그리는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3700065, 127.121359), zoom: 9 }); var polyline = new naver.maps.Polyline({ map: map, path: [], strokeColor: '#5347AA', strokeWeight: 2 }); naver.maps.Event.addListener(map, 'click', function(e) { var point = e.latlng; var path = polyline.getPath(); path.push(point); new naver.maps.Marker({ map: map, position: point }); }); Examples: 클릭한 지점 폴리라인 연결하기 폴리곤 폴리곤은 일련의 지도 좌표 목록을 잇는 닫힌 다각형을 그립니다. 따라서 폴리라인과 다르게 내부 색상에 대한 옵션이 추가됩니다. 그리고 닫힌 다각형 영역 내에 구멍(hole or interior ring)을 표현할 수 있기 때문에 폴리라인의 좌표 목록에는 여러 개의 path로 구성되는 paths 속성이 있습니다. 지도 위에 폴리곤 그리기 Polygon 객체를 만들 때 paths 속성에 폴리곤을 구성하는 하나의 path를 입력합니다(paths는 반드시 입력해야 합니다). paths는 여러 개의 path를 입력할 수 있는 이중 배열이어야 합니다. map 속성에 폴리곤이 그려질 Map 객체를 입력하거나, setMap 메서드를 이용해 지도 객체를 설정할 수 있습니다. 다음은 Polygon 객체를 만들어 지도 위에 폴리곤을 그리는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var polygon = new naver.maps.Polygon({ map: map, paths: [ [ new naver.maps.LatLng(37.37544345085402, 127.11224555969238), new naver.maps.LatLng(37.37230584065902, 127.10791110992432), new naver.maps.LatLng(37.35975408751081, 127.10795402526855), new naver.maps.LatLng(37.359924641705476, 127.11576461791992), new naver.maps.LatLng(37.35931064479073, 127.12211608886719), new naver.maps.LatLng(37.36043630196386, 127.12293148040771), new naver.maps.LatLng(37.36354029942161, 127.12310314178465), new naver.maps.LatLng(37.365211629488016, 127.12456226348876), new naver.maps.LatLng(37.37544345085402, 127.11224555969238) ] ], fillColor: '#ff0000', fillOpacity: 0.3, strokeColor: '#ff0000', strokeOpacity: 0.6, strokeWeight: 3 }); Examples: 폴리곤, 폴리라인 그리기 폴리곤 옵션 살펴보기 폴리곤 또한 폴리라인과 마찬가지로 색상, 두께, 선 스타일, 투명도를 설정할 수 있습니다. 그리고 폴리곤 내부 채우기 색상과 투명도를 설정할 수 있습니다. 폴리곤의 스타일은 Polygon 객체 생성 시 생성자에 PolygonOptions 객체 리터럴을 설정할 수도 있고 생성 후 setOptions 메서드를 이용해 동적으로 스타일을 변경할 수도 있습니다. PolygonOptions 객체 리터럴의 속성 중 clickable 속성을 true로 설정하면 사용자 인터랙션을 처리할 수도 있습니다. 다음은 마우스 포인터를 올리거나 치우는 사용자 인터랙션 시 setOptions 메서드를 사용하여 선 스타일을 변경하는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var polygon = new naver.maps.Polygon({ map: map, paths: [ [ new naver.maps.LatLng(37.37544345085402, 127.11224555969238), new naver.maps.LatLng(37.37230584065902, 127.10791110992432), new naver.maps.LatLng(37.35975408751081, 127.10795402526855), new naver.maps.LatLng(37.359924641705476, 127.11576461791992), new naver.maps.LatLng(37.35931064479073, 127.12211608886719), new naver.maps.LatLng(37.36043630196386, 127.12293148040771), new naver.maps.LatLng(37.36354029942161, 127.12310314178465), new naver.maps.LatLng(37.365211629488016, 127.12456226348876), new naver.maps.LatLng(37.37544345085402, 127.11224555969238) ] ], fillColor: '#ff0000', fillOpacity: 0.3, strokeColor: '#ff0000', strokeOpacity: 0.6, strokeWeight: 3, clickable: true }); naver.maps.Event.addListener(polygon, 'mouseover', function() { polygon.setOptions({ strokeColor: '#E51D1A', strokeOpacity: 1 }); }); naver.maps.Event.addListener(polygon, 'mouseout', function() { polygon.setOptions({ strokeColor: '#ff0000', strokeOpacity: 0.6 }); }); Examples: 폴리곤 옵션 사용하기 구멍 뚫린 폴리곤 그리기 Polygon 객체의 paths 속성은 여러 개의 path로 구성된 배열입니다. 폴리라인과 다르게 폴리곤에 여러 개의 path로 구성된 paths 속성이 있는 이유는 하나 이상의 닫힌 도형을 표현하거나 구멍이 뚫린 폴리곤을 표현하기 위해서입니다. 폴리곤 내부에 구멍을 표현하려면, 첫 번째 path는 시계 방향으로 지도 좌표 목록을 구성해 폴리곤 외부 좌표를 설정하고, 두 번째 path는 시계 반대 방향으로 구멍의 좌표 목록을 구성합니다. 다음은 위 기본 예제의 폴리곤에 구멍을 뚧은 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var polygon = new naver.maps.Polygon({ map: map, paths: [ [ new naver.maps.LatLng(37.37544345085402, 127.11224555969238), new naver.maps.LatLng(37.37230584065902, 127.10791110992432), new naver.maps.LatLng(37.35975408751081, 127.10795402526855), new naver.maps.LatLng(37.359924641705476, 127.11576461791992), new naver.maps.LatLng(37.35931064479073, 127.12211608886719), new naver.maps.LatLng(37.36043630196386, 127.12293148040771), new naver.maps.LatLng(37.36354029942161, 127.12310314178465), new naver.maps.LatLng(37.365211629488016, 127.12456226348876), new naver.maps.LatLng(37.37544345085402, 127.11224555969238) ], [ new naver.maps.LatLng(37.368485964153784, 127.10971355438232), new naver.maps.LatLng(37.368520071054576, 127.11464881896971), new naver.maps.LatLng(37.36350619025713, 127.11473464965819), new naver.maps.LatLng(37.363403862670665, 127.1097993850708), new naver.maps.LatLng(37.368485964153784, 127.10971355438232) ] ], fillColor: '#ff0000', fillOpacity: 0.3, strokeColor: '#ff0000', strokeOpacity: 0.6, strokeWeight: 3 }); Examples: 구멍 난 폴리곤 그리기 동적으로 폴리곤 그리기 Polygon의 paths는 KVOArray 객체이고 paths의 요소인 path 또한 지도 좌표 목록으로 구성된 KVOArray입니다. 따라서 폴리라인과 마찬가지로 KVOArray를 활용하여 폴리곤의 좌표 구성을 동적으로 변경할 수 있습니다. 생성 시 PolygonOptions의 paths를 입력할 때 또는 setPaths 메서드를 이용해 입력할 때에는 [Array]로 입력할 수 있지만 객체 내부적으로는 KVOArray로 저장하고 관리합니다. 따라서 getPaths 메서드를 이용해 반환받은 paths는 KVOArray이고 내부 path 또한 KVOArray입니다. KVOArray에 대한 자세한 설명은 KVO 상태 변경 알림를 참고합니다. 다음은 지도 클릭 시 클릭한 지점의 지도 좌표를 동적으로 반영하여 폴리곤을 그리는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var polygon = new naver.maps.Polygon({ map: map, paths: [[]], fillColor: '#ff0000', fillOpacity: 0.3, strokeColor: '#ff0000', strokeOpacity: 0.6, strokeWeight: 3, clickable: true }); naver.maps.Event.addListener(map, 'click', function(e) { var point = e.latlng; var path = polygon.getPaths().getAt(0); path.push(point); new naver.maps.Marker({ map: map, position: point }); }); Examples: 클릭한 지점 폴리곤 연결하기 사각형 그리기 Rectangle은 지도의 영역을 정의하여 간단하게 직사각형을 그릴 수 있는 객체입니다. 생성자에 RectangleOptions 객체 리터럴을 넘겨 사각형을 그립니다. bounds 속성에 LatLngBounds 또는 PointBounds 객체로 지도 영역을 설정할 수 있습니다. 폴리곤 객체와 마찬가지로 선, 채우기 스타일을 정의하는 옵션이 있습니다. 다음은 Rectangle 객체를 생성하여 지도에 직사각형을 그리는 예제입니다. var map = new naver.maps.Map('map'); var rectangle = new naver.maps.Rectangle({ map: map, bounds: new naver.maps.LatLngBounds( new naver.maps.LatLng(37.565, 126.9761217732253), // sw new naver.maps.LatLng(37.568, 126.980655026774) // ne ), strokeColor: '#5347AA', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#E51D1A', fillOpacity: 0.6 }); Examples: 사각형, 원, 타원 그리기 다음은 지도의 bounds가 변경될 때마다 Rectangle의 bounds도 함께 변경하는 예제입니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3674001, 127.1181196), zoom: 9 }); var rectangle = new naver.maps.Rectangle({ map: map, bounds: map.getBounds(), strokeColor: 'none', fillColor: '#E51D1A', fillOpacity: 0.3 }); naver.maps.Event.addListener(map, 'bounds_changed', function() { rectangle.setBounds(map.getBounds()); }); Examples: 지도 좌표 경계 확인하기 원 그리기 Circle 객체는 원의 중심점과 m 단위의 반지름을 입력하여 지도 위에 원을 그리는 객체입니다. CircleOptions 객체 리터럴을 통해 center 속성에 원의 중심 지도 좌표, radius 속성에 m 단위의 반지름을 설정할 수 있고, 다른 도형 오버레이와 마찬가지로 선, 채우기 스타일을 설정할 수 있습니다. 다음은 그린팩토리에서 반경 500m를 원으로 그린 예제입니다. var GREEN_FACTORY = new naver.maps.LatLng(37.3595953, 127.1053971); var map = new naver.maps.Map('map', { center: GREEN_FACTORY, zoom: 10 }); var circle = new naver.maps.Circle({ map: map, center: GREEN_FACTORY, radius: 500, strokeColor: '#5347AA', strokeOpacity: 0.5, strokeWeight: 2, fillColor: '#E51D1A', fillOpacity: 0.3 }); Examples: 사각형, 원, 타원 그리기 타원 그리기 Ellipse는 지도의 영역을 정의하여 간단하게 타원을 그릴 수 있는 객체입니다. 생성자에 EllipseOptions 객체 리터럴을 넘겨 타원을 그립니다. bounds 속성에 LatLngBounds 또는 PointBounds 객체로 지도 영역을 설정할 수 있습니다. 다른 도형 오버레이와 마찬가지로 선, 채우기 스타일을 설정할 수 있습니다. 다음 예제는 Ellipse 객체를 생성하여 지도에 타원을 그리는 예제입니다. var map = new naver.maps.Map('map'); var ellipse = new naver.maps.Ellipse({ map: map, bounds: new naver.maps.LatLngBounds( new naver.maps.LatLng(37.565, 126.9761217732253), // sw new naver.maps.LatLng(37.568, 126.980655026774) // ne ), strokeColor: '#5347AA', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#E51D1A', fillOpacity: 0.6 }); Examples: 사각형, 원, 타원 그리기 × Search results Close "},"tutorial-4-Submodules.html":{"id":"tutorial-4-Submodules.html","title":"Tutorial: 서브 모듈 시스템","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 서브 모듈 시스템 서브 모듈 시스템 NAVER 지도 API v3은 지도의 기능을 확장하는 서브 모듈 시스템을 지원합니다. 현재 제공하는 서브 모듈의 목록은 다음과 같습니다. panorama - 거리뷰/항공뷰를 사용할 수 있는 panorama 모듈입니다. geocoder - 좌표 체계간 변환 메서드와 특정 좌표계를 지원하는 확장된 투영 객체들을 제공하는 geocoder 모듈입니다. drawing - 지도 위에 도형, 마커를 그릴 수 있는 컨트롤을 배치하고, 이용할 수 있도록 제공하는 drawing 모듈입니다. visualization - 지리 정보를 가지고 있는 데이터를 쉽게 이해할 수 있도록 열지도, 점지도를 제공하는 visualization 모듈입니다. 서브 모듈은 NAVER 지도 API v3이 로드되어 있어야 사용할 수 있으며, 기존의 naver.maps 네임스페이스를 확장합니다. 서브 모듈 로드하기 서브 모듈을 사용하려면 다음과 같이 NAVER 지도 API v3을 로드할 때 submodules URL 파라미터를 사용하여 해당 서브 모듈을 로드해야 합니다. 로드할 서브 모듈이 여러 개일 경우 콤마(,)를 이용해 여러 개의 서브 모듈을 한 번에 불러올 수 있습니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama\"&gt;&lt;/script&gt; 또는 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama,geocoder\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama,geocoder\"&gt;&lt;/script&gt; 비동기 방식으로 실행하기 DOM이 준비(ready)되기 전에 서브 모듈과 NAVER 지도 API v3을 로드했다면, 즉시 서브 모듈과 NAVER 지도 API v3을 사용할 수 있습니다. 또는 다음과 같이 HTML 문서가 모두 로드된 후에 NAVER 지도 API v3을 비동기 방식으로 로드해 사용할 수도 있습니다. 네이버 클라우드 플랫폼 var map = null; $.getScript(\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama\", function() { map = new naver.maps.Map('map-container'); }); 공공기관용 var map = null; $.getScript(\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama\", function() { map = new naver.maps.Map('map-container'); }); 위 예제는 jQuery 구문을 포함하고 있습니다. 이때, 서브 모듈 역시 비동기 방식으로 로드됩니다. 따라서, onJSContentLoaded 이벤트 핸들러를 사용합니다. 이 핸들러는 NAVER 지도 API v3 로드 시 함께 요청한 서브 모듈의 JavaScript 콘텐츠가 웹 브라우저에 모두 로드되었을 때 한 번 호출됩니다. 네이버 클라우드 플랫폼 var map = null, pano = null; $.getScript(\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama\", function() { naver.maps.onJSContentLoaded = function() { map = new naver.maps.Map('map-container'); pano = new naver.maps.Panorama('pano', { position: map.getCenter(), pov: { pan: -135, tilt: 29, fov: 100 } }); }; }); 공공기관용 $.getScript(\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama\", function() { naver.maps.onJSContentLoaded = function() { map = new naver.maps.Map('map-container'); pano = new naver.maps.Panorama('pano', { position: map.getCenter(), pov: { pan: -135, tilt: 29, fov: 100 } }); }; }); 위 예제는 jQuery 구문을 포함하고 있습니다. 또는 NAVER 지도 API v3 로드 시 callback 파라미터를 지정할 수 있습니다. 이 역시 함께 요청한 서브 모듈의 JavaScript 콘텐츠가 웹 브라우저에 모두 로드되었을 때 한 번 호출됩니다. callback 파라미터와 onJSContentLoaded 이벤트 핸들러가 모두 있을 때는 callback 파라미터로 지정한 콜백 함수만 호출합니다. 네이버 클라우드 플랫폼 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; 공공기관용 &lt;body&gt; &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;callback=initMap\"&gt;&lt;/script&gt; &lt;script type=\"text/javascript\"&gt; var map = null; function initMap() { map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); } &lt;/script&gt; &lt;/body&gt; × Search results Close "},"tutorial-5-GroundOverlay.html":{"id":"tutorial-5-GroundOverlay.html","title":"Tutorial: 지상 오버레이","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지상 오버레이 지상 오버레이 지상 오버레이는 특정 이미지를 지도의 특정 위치(좌표 경계)에 타일처럼 배치하는 오버레이입니다. 따라서 사용자가 지도 화면을 드래그하거나 확대/축소하면 타일과 동일하게 동작합니다. 지상 오버레이 추가하기 지상 오버레이를 사용하려면 GroundOverlay 클래스의 객체를 생성해야 합니다. 생성자에는 하나의 이미지 URL과 좌표 경계, GroundOverlayOptions 객체 리터럴을 인수로 전달합니다. 다음 예제는 일반 지도 위에 위성 지도 이미지를 올리는 예제입니다. var bounds = new naver.maps.LatLngBounds( new naver.maps.LatLng(36.634249797, 127.129160067), new naver.maps.LatLng(36.734249797, 127.410516004) ); var map = new naver.maps.Map(\"map\", { zoom: 8, center: new naver.maps.LatLng(36.634249797, 127.129160067), mapTypeId: \"normal\" }); var groundOverlay = new naver.maps.GroundOverlay( \"../images/naver-satellite.png\", bounds, { opacity: 1, clickable: false } ); groundOverlay.setMap(map); Examples: 지상 오버레이 표시하기 지상 오버레이 제거하기 지상 오버레이를 제거하려면 지상 오버레이 객체의 setMap 메서드에 null을 전달합니다. groundOverlay.setMap(null); × Search results Close "},"tutorial-6-CustomOverlay.html":{"id":"tutorial-6-CustomOverlay.html","title":"Tutorial: 사용자 정의 오버레이","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 오버레이 사용자 정의 오버레이 NAVER 지도 API v3은 사용자 정의 오버레이를 생성할 수 있도록 OverlayView 클래스를 제공합니다. 이 클래스는 오버레이를 생성할 때 구현해야 하는 여러 메서드를 제공합니다. 다음은 사용자 정의 오버레이에 꼭 구현해야 하는 메서드입니다. onAdd 메서드는 지도에 오버레이를 추가할 때 호출되는 내용으로 구현해야 합니다. draw 메서드는 지도에 오버레이를 그려야 할 때 호출되는 내용으로 구현해야 합니다. onRemove 메서드는 지도에서 오버레이가 삭제될 때 호출되는 내용으로 구현해야 합니다. 사용자 정의 오버레이 추가 사용자 정의 오버레이 생성 다음 예제는 OverlayView를 상속받는 간단한 DOM 요소 오버레이를 생성합니다. /** * 사용자 정의 오버레이 구현하기 */ var CustomOverlay = function(options) { this._element = $('&lt;div style=\"position:absolute;left:0;top:0;width:120px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:2px solid #f00;\"&gt;커스텀오버레이&lt;/div&gt;') this.setPosition(options.position); this.setMap(options.map || null); }; // CustomOverlay는 OverlayView를 상속받습니다. CustomOverlay.prototype = new naver.maps.OverlayView(); CustomOverlay.prototype.constructor = CustomOverlay; CustomOverlay.prototype.onAdd = function() { var overlayLayer = this.getPanes().overlayLayer; this._element.appendTo(overlayLayer); }; CustomOverlay.prototype.draw = function() { // 지도 객체가 설정되지 않았으면 draw 기능을 하지 않습니다. if (!this.getMap()) { return; } // projection 객체를 통해 LatLng 좌표를 화면 좌표로 변경합니다. var projection = this.getProjection(), position = this.getPosition(); var pixelPosition = projection.fromCoordToOffset(position); this._element.css('left', pixelPosition.x); this._element.css('top', pixelPosition.y); }; CustomOverlay.prototype.onRemove = function() { this._element.remove(); // 이벤트 핸들러를 설정했다면 정리합니다. this._element.off(); }; CustomOverlay.prototype.setPosition = function(position) { this._position = position; this.draw(); }; CustomOverlay.prototype.getPosition = function() { return this._position; }; /** * 사용자 정의 오버레이 사용하기 */ var center = new naver.maps.LatLng(37.358202009037356, 127.10801839828491); var map = new naver.maps.Map(\"map\", { center: center, zoom: 12 }); // 오버레이 생성 var overlay = new CustomOverlay({ position: center, map: map }); // 오버레이 삭제 // overlay.setMap(null); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 사용자 정의 오버레이 표시하기 사용자 정의 오버레이 초기화 사용자 정의 오버레이 객체를 생성하면 지도에 연결해야 합니다. NAVER 지도 API는 setMap(map) 메서드 호출 시(또는 옵션의 map 속성 설정 시) onAdd 메서드를 호출해 오버레이가 지도에 추가되었음을 알립니다. 따라서, 지도 창(pane) 요소 중 적합한 요소에 오버레이 요소를 추가하는 기능을 이 메서드에 구현합니다. CustomOverlay.prototype.onAdd = function() { var overlayLayer = this.getPanes().overlayLayer; this._element.appendTo(overlayLayer); }; 위 예제는 jQuery 구문을 포함하고 있습니다. getPanes 메서드는 지도 창 요소를 나타내는 MapPanes 객체를 반환합니다. 사용자 정의 오버레이 그리기 지도에서 오버레이를 다시 그려야 할 때마다 NAVER 지도 API는 draw 메서드를 호출합니다. 따라서, 오버레이의 위치, 모양 등 현재 오버레이가 보여야 할 모습으로 업데이트하는 기능을 이 메서드에 구현합니다. CustomOverlay.prototype.draw = function() { // 지도 객체가 설정되지 않았으면 draw 기능을 하지 않습니다. if (!this.getMap()) { return; } // projection 객체를 통해 LatLng 좌표를 화면 좌표로 변경합니다. var projection = this.getProjection(), position = this.getPosition(); var pixelPosition = projection.fromCoordToOffset(position); this._element.css('left', pixelPosition.x); this._element.css('top', pixelPosition.y); }; 위 예제는 jQuery 구문을 포함하고 있습니다. getProjection 메서드는 지도 좌표와 화면 좌표를 서로 변환할 수 있는 메서드를 제공하는 MapSystemProjection 객체를 반환합니다. 이를 이용해 오버레이의 지도 좌표를 화면 좌표로 변환하고, 적절한 위치에 오버레이를 배치합니다. 사용자 정의 오버레이 제거 NAVER 지도 API v3은 setMap(null) 메서드 호출 시(또는 옵션의 map 속성을 null로 설정 시) onRemove 메서드를 호출해 오버레이가 지도에서 제거되었음을 알립니다. 따라서, 오버레이 요소를 지도 창 요소에서 제거하는 기능을 이 메서드에 구현합니다. CustomOverlay.prototype.onRemove = function() { this._element.remove(); // 이벤트 핸들러를 설정했다면 정리합니다. this._element.off(); }; 위 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-Controls.html":{"id":"tutorial-Controls.html","title":"Tutorial: 지도 컨트롤","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 컨트롤 지도 컨트롤 컨트롤은 사용자가 지도와 상호작용할 수 있도록 NAVER 지도 API v3에서 제공하는 UI(User Interface) 요소를 말합니다. NAVER 지도 API v3에서 기본적으로 제공하는 컨트롤은 다음과 같습니다. 줌 컨트롤: 지도의 줌 레벨을 조정할 수 있는 슬라이더 또는 +/- 버튼입니다. 이 컨트롤은 기본적으로 사용하지 않도록 되어 있습니다. 축척 컨트롤: 지도의 축척을 표시합니다. 이 컨트롤은 기본적으로 오른쪽 아래에 표시됩니다. 지도 유형 컨트롤: 일반 지도, 위성 지도와 같은 지도 유형을 전환할 수 있는 버튼 또는 드롭다운입니다. 이 컨트롤은 기본적으로 사용하지 않도록 되어 있습니다. 지도 데이터 저작권 컨트롤: 지도 데이터의 저작권을 표시합니다. 이 컨트롤은 기본적으로 왼쪽 아래에 표시됩니다. NAVER 로고 컨트롤: NAVER 로고를 표시합니다. 이 컨트롤은 기본적으로 오른쪽 아래에 표시됩니다. NAVER 지도 API v3에서 제공하는 컨트롤 중 축척, 지도 데이터 저작권, NAVER 로고 컨트롤은 기본적으로 표시됩니다. 그렇지 않은 컨트롤은 사용자가 명시적으로 설정하지 않는 한 표시되지 않습니다. 지도 컨트롤은 직접 접근해 수정할 수 없습니다. 지도 컨트롤의 모양 또는 위치를 수정하려면 MapOptions 객체의 속성을 수정하거나, setOptions 메서드로 지도의 옵션을 변경해 동적으로 수정해야 합니다. 지도에 컨트롤 추가/제거하기 지도에 컨트롤을 추가하거나 제거하려면 MapOptions 객체의 다음 속성을 사용합니다. { scaleControl: true, logoControl: true, mapDataControl: true, mapTypeControl: false, zoomControl: false } 다음 예제는 기본적으로 제공하는 컨트롤을 제거하고, 줌 컨트롤만 추가하는 예제입니다. var mapOptions = { scaleControl: false, logoControl: false, mapDataControl: false, zoomControl: true }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); Examples: 지도 컨트롤 추가/제거하기 컨트롤 옵션 사용하기 NAVER 지도 API v3에서 제공하는 기본 컨트롤 중 일부는 동작 방식이나 스타일을 변경할 수 있는 옵션을 제공합니다. 제공하는 스타일 옵션을 살펴보려면 아래 문서를 참고하세요. MapTypeControl ZoomControl LogoControl MapDataControl ScaleControl 컨트롤 스타일 수정하기 다음은 줌 컨트롤을 확대/축소 버튼과 슬라이드가 함께 있는 스타일로 설정하는 예제입니다. var mapOptions = { zoomControl: true, zoomControlOptions: { style: naver.maps.ZoomControlStyle.LARGE } }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); Examples: 지도 컨트롤 스타일 설정하기 컨트롤 배치하기 각 컨트롤에는 위치를 나타내는 Position 유형의 position 속성이 있습니다. 지원하는 컨트롤 위치는 다음과 같습니다. 다음 예제는 NAVER 지도 API v3에서 제공하는 모든 컨트롤이 서로 다른 위치에서 사용된 지도를 보여줍니다. var mapOptions = { mapTypeControl: true, mapTypeControlOptions: { style: naver.maps.MapTypeControlStyle.BUTTON, position: naver.maps.Position.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: naver.maps.ZoomControlStyle.SMALL, position: naver.maps.Position.RIGHT_CENTER }, scaleControl: true, scaleControlOptions: { position: naver.maps.Position.BOTTOM_RIGHT }, logoControl: true, logoControlOptions: { position: naver.maps.Position.TOP_LEFT }, mapDataControl: true, mapDataControlOptions: { position: naver.maps.Position.BOTTOM_LEFT } }; var map = new naver.maps.Map(document.getElementById('map'), mapOptions); Examples: 지도 컨트롤 위치 설정하기 × Search results Close "},"tutorial-Custom-Control.html":{"id":"tutorial-Custom-Control.html","title":"Tutorial: 사용자 정의 컨트롤","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 컨트롤 사용자 정의 컨트롤 NAVER 지도 API v3은 기본적으로 제공하는 컨트롤을 사용하지 않고, 사용자가 직접 만든 컨트롤을 사용할 수 있도록 API를 제공합니다. 사용자 정의 컨트롤 추가하기 NAVER 지도 API v3은 사용자 정의 컨트롤을 추가할 수 있도록 두 가지 방법을 제공합니다. 첫 번째는 추가할 컨트롤의 HTML을 문자열 형태로 전달하면서 CustomControl 객체를 생성하는 방법입니다. 두 번째 방법은 생성한 Map 객체의 controls 속성에 추가할 컨트롤의 HTML 노드를 설정하는 방법입니다. 다음은 두 가지 방법으로 사용자 정의 컨트롤이 생성된 지도를 보여주는 예제입니다. CustomControl 클래스를 이용한 방법 var locationBtnHtml = '&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;'; var customControl = new naver.maps.CustomControl(locationBtnHtml, { position: naver.maps.Position.TOP_LEFT }); var map = new naver.maps.Map('map', {}); naver.maps.Event.once(map, 'init', function() { customControl.setMap(map); }); Map 객체의 controls 속성을 이용한 방법 var $locationBtn = $('&lt;div style=\"position: absolute; left: 0px; top: 0px;\"&gt;&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;'), locationBtnEl = $locationBtn[0]; var map = new naver.maps.Map(\"map\", {}); naver.maps.Event.once(map, 'init', function() { map.controls[naver.maps.Position.TOP_LEFT].push(locationBtnEl); }); 위 예제는 jQuery 구문을 포함하고 있습니다. 사용자 정의 컨트롤 이벤트 추가하기 컨트롤이 사용자와 상호작용을 하려면 컨트롤이 사용자의 입력에 응답할 수 있어야 합니다. NAVER 지도 API v3에서 제공하는 Event 메서드를 이용해 컨트롤의 DOM 이벤트를 처리합니다. 다음은 버튼을 눌렀을 때 NAVER 그린팩토리의 위치로 중심점을 설정하는 예제입니다. CustomControl 클래스를 이용한 방법 var locationBtnHtml = '&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;'; var customControl = new naver.maps.CustomControl(locationBtnHtml, { position: naver.maps.Position.TOP_LEFT }); var map = new naver.maps.Map('map', {}); naver.maps.Event.once(map, 'init', function() { customControl.setMap(map); naver.maps.Event.addDOMListener(customControl.getElement(), 'click', function() { map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971)); }); }); Examples: 사용자 정의 컨트롤 만들기 Map 객체의 controls 속성을 이용한 방법 var $locationBtn = $('&lt;div style=\"position: absolute; left: 0px; top: 0px;\"&gt;&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;'), locationBtnEl = $locationBtn[0]; var map = new naver.maps.Map(\"map\", {}); naver.maps.Event.once(map, 'init', function() { map.controls[naver.maps.Position.TOP_LEFT].push(locationBtnEl); naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() { map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971)); }); }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 사용자 정의 컨트롤 만들기 × Search results Close "},"tutorial-DOM-Event.html":{"id":"tutorial-DOM-Event.html","title":"Tutorial: DOM 이벤트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API DOM 이벤트 DOM 이벤트 NAVER 지도 API v3은 지도 UI 이벤트 외에 사용자가 DOM(Document Object Model) 이벤트를 수신하고 응답할 수 있도록 메서드를 제공합니다. 이 메서드를 이용하면 사용자는 브라우저마다 다른 DOM 이벤트 모델을 별도로 처리할 필요가 없습니다. naver.maps.Event.addDOMListener( element:HTMLElement, eventName:String, listener:Function ) naver.maps.Event.removeDOMListener( listener:DOMEventListener | listeners:DOMEventListener[] | element:HTMLElement, eventName:String, listener:Function ) 이벤트 리스너 등록하기 이벤트 리스너를 등록하면 DOM 이벤트를 수신할 수 있습니다. addDOMListener 메서드를 이용해 특정 DOM에서 발생한 이벤트를 받아 핸들러를 실행하는 리스너를 등록합니다. 리스너를 등록하면 다음과 같이 DOMEventListener 객체를 받습니다. DOMEventListener = { eventName: String, listener: Function, target: HTMLElement } DOMEventListener 객체는 등록된 리스너의 정보를 담고 있는 객체로 등록된 리스너를 제거할 때 이용합니다. 이벤트 리스너 제거하기 이벤트 리스너를 등록 해제하면 더 이상 DOM 이벤트를 수신하지 않습니다. removeDOMListener 메서드를 이용해 등록한 리스너를 제거합니다. 이때, 인수로 DOMEventListener 객체(또는 객체 배열)를 전달할 수 있습니다. 다음 예제는 지도를 클릭했을 때, 마커가 있는 위치로 이동하며 줌 레벨을 변경하는 예제입니다. var mapOptions = { zoom: 4, center: new naver.maps.LatLng(37.3614483, 127.1114883) }; var map = new naver.maps.Map('map', mapOptions); var markerOptions = { position: map.getCenter(), map: map, title: 'Click to zoom' }; var marker = new naver.maps.Marker(markerOptions); var mapElement = map.getElement(); var listener = naver.maps.Event.addDOMListener(mapElement, 'click', function() { map.setZoom(8); map.setCenter(marker.getPosition()); naver.maps.Event.removeDOMListener(listener); }); × Search results Close "},"tutorial-Drawing.html":{"id":"tutorial-Drawing.html","title":"Tutorial: 그리기 도구 생성 및 기본 동작","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 그리기 도구 생성 및 기본 동작 그리기 도구 생성 및 기본 동작 그리기 도구 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 아래와 같이 사용자가 지도에 폴리곤, 사각형, 폴리라인, 원, 마커를 그릴 수 있는 그래픽 인터페이스를 제공합니다. 서브 모듈 로드하기 그리기 도구 서브 모듈은 NAVER 지도 API v3과는 별개의 라이브러리입니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 URL의 submodules 변수를 이용하여 로드해야 합니다. 그리기 도구 서브 모듈을 사용하려면 NAVER 지도 API v3이 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=drawing\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=drawing\"&gt;&lt;/script&gt; 그리기 도구 서브 모듈을 로드하면 오버레이 클래스들을 확장하여 setEditable 메서드를 추가합니다. 따라서 그리기 도구 모듈로 생성하지 않은 오버레이 객체도 setEditable(true)를 호출하면 일반적인 편집 기능을 사용할 수 있습니다. 시작하기 그리기 도구 서브 모듈의 대부분의 기능을 사용하려면 DrawingManager 객체가 필요합니다. 라이브러리를 로드한 후에 다음과 같이 DrawingManager 객체를 생성할 수 있습니다. var map = new naver.maps.Map('map'); var drawingManager = new naver.maps.drawing.DrawingManager({map: map}); Examples: 그리기 도구 기본 예제 DrawingManager DrawingManager 클래스는 사용자가 지도에 오버레이를 쉽게 그리고 수정할 수 있도록 그래픽 인터페이스를 제공합니다. 그리기 모듈의 오버레이 유형 Rectangle Ellipse: 원(Circle)은 제공하지 않습니다. Polyline Arrowline: PolylineOptions의 startIcon, endIcon을 사용하여 화살표 등을 표시할 수 있는 폴리라인 유형 Polygon Marker 그리기 도구 서브 모듈에서 만들어지는 오버레이는 NAVER 지도 API v3에서 제공하는 오버레이와 동일합니다. DrawingManager 옵션 drawingControl 옵션은 DrawingModenaver.maps.drawing.DrawingMode 상수 배열이고, 그리기 도구 컨트롤에 포함할 오버레이 유형을 정의합니다. naver.maps.drawing.HAND는 그리기 도구를 선택하지 않은 기본 상태로, 지도와 상호작용하거나 도형을 선택할 때의 상태입니다. 따라서 drawingControl 옵션의 기본값은 손 아이콘을 제외한 오버레이 유형 집합입니다. 각 오버레이 유형의 속성은 {overlay}Options 옵션으로 정의됩니다(예: rectangleOptions, polygonOptions). 단순한 스타일 속성만을 반영하고, map 객체나 위치 등은 반영하지 않습니다. NAVER 지도 API v3에서 제공하는 오버레이의 옵션들을 동일하게 사용합니다. DrawingManager 객체가 생성된 후 옵션을 변경하려면 setOptions 메서드를 호출해 새 값을 전달합니다. drawingManager.setOptions('drawingControlOptions', { position: naver.maps.Position.LEFT_CENTER, style: naver.maps.drawing.DrawingStyle.VERTICAL }); 자세한 내용은 drawingOptions를 참고하세요. Examples: 그리기 도구 옵션 활용하기 DrawingManager 이벤트 그리기 도구 서브 모듈을 이용해 만들어진 오버레이는 아래의 이벤트를 발생시킵니다. 오버레이 생성 시: naver.maps.drawing.DrawingEvent.ADD(공통), {overlay}Added(유형별) 오버레이 선택 시: naver.maps.drawing.DrawingEvent.SELECT(공통), {overlay}Selected(유형별) 오버레이 삭제 시: naver.maps.drawing.DrawingEvent.REMOVE(공통), {overlay}Removed(유형별) 아래와 같이 이벤트 리스너를 등록하면 오버레이의 객체가 인수로 전달됩니다. 전달된 오버레이 객체는 id,name 속성을 포함합니다. drawingManager.addListener('ellipseAdded', function(overlay) { console.log(overlay.id); //오버레이의 id console.log(overlay.name); //'ellipse', 오버레이의 유형 }); 그리기 인터랙션 도형 그리기 그리기 도구 컨트롤의 아이콘을 선택하여 그리기 모드로 전환합니다. 지도 위의 한 점을 클릭하여 그리기를 시작합니다. 아직 유효하지 않은 도형은 esc 키로 그리기를 취소할 수 있습니다. shift 키를 누른 상태에서 도형을 그리면 정방형 혹은 직교좌표(사용 중인 Projection 기준)로 스냅이 활성화됩니다. 두 점 이상을 클릭하여 도형을 완성합니다. 폴리라인, 화살표가 있는 폴리라인, 폴리곤은 마우스 오른쪽 버튼을 클릭하거나 esc를 눌러 그리기를 종료할 수 있습니다. 도형 이동하기 도형을 클릭하여 편집 모드로 변경합니다 도형을 드래그하여 이동합니다. 이동할 때 지도의 줌, 패닝은 제공되지 않습니다. 도형 수정하기 도형을 클릭하여 편집 모드로 변경합니다. 도형의 편집점을 드래그하여 수정합니다. 폴리라인, 화살표가 있는 폴리라인, 폴리곤은 선분의 중간에 있는 제어점을 드래그하여 점을 추가할 수 있습니다. 도형 삭제하기 그려진 도형을 마우스 오른쪽 버튼으로 클릭해 삭제 메뉴를 엽니다. 클릭하여 삭제합니다. 마커는 단일점 오버레이이므로 편집 모드를 제공하지 않고, 드래그 가능한 마커로 제공합니다. Examples: 그리기 도구 기본 예제 × Search results Close "},"tutorial-Geocoder-Geocoding.html":{"id":"tutorial-Geocoder-Geocoding.html","title":"Tutorial: Geocoder를 활용한 주소와 좌표 검색 API 호출하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Geocoder를 활용한 주소와 좌표 검색 API 호출하기 Geocoder를 활용한 주소와 좌표 검색 API 호출하기 Geocoder 서브 모듈을 활용하여 주소-&gt;좌표 검색(geocode), 좌표-&gt;주소 검색(reversegeocode) API를 호출할 수 있습니다. 등록된 Client Id와 웹 서비스 URL이 일치하는 페이지에서만 정상적으로 사용할 수 있습니다. Geocoder 서브 모듈은 Geocoding API와 ReverseGeocoding API를 호출합니다. Geocoder 서브 모듈을 사용하고자 할 경우 Module:geocoder의 사전 준비 사항을 참고하세요. Geocoder는 Geocoding와 ReverseGeocoding의 일일 허용량을 사용합니다. 주소 &lt;-&gt; 좌표 변환 API 호출 예제는 주소와 좌표 검색 API 사용하기를 참고합니다. 서브 모듈 로드하기 Geocoder를 사용하려면 Geocoder 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다. Geocoder 서브 모듈을 사용하려면 NAVER 지도 API v3이 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=geocoder\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=geocoder\"&gt;&lt;/script&gt; naver.maps.Service 객체 서버 API 서비스를 활용하려면 naver.maps.Service 정적 객체를 사용합니다. Service 객체는 서버 API를 호출하는 데 필요한 파라미터와 메서드를 제공합니다. NAVER 지도 API v3을 통해 호출하는 서버 API는 호출시 마다 애플리케이션의 API 일일 허용량을 사용합니다. CoordinatesType 객체 CoordinatesType 객체는 서버 API 호출 및 결과로 사용할 좌표 체계명을 나타냅니다. 지원하는 좌표 체계의 목록은 아래와 같습니다. LATLNG: 위/경도(WGS 84) 좌표계를 나타냅니다. 기본값 TM128: TM128(KATECH) 좌표계를 나타냅니다. UTMK: UTMK 좌표계를 나타냅니다. EPSG3857: 구글맵(EPSG3857) 좌표계를 나타냅니다. Status 객체 Status 객체는 서버 API 호출 결과의 상태를 나타냅니다. OK: 요청이 성공한 상태입니다. ERROR: 요청이 실패한 상태입니다. 서버 API 호출 시 전달하는 callback 함수의 첫 번째 파라미터로 Status값이 전달되며, 이 값으로 요청 결과의 성공 및 실패 여부를 확인할 수 있습니다. naver.maps.Service.geocode({ query: '모르는 주소' }, function(status, response) { if (status === naver.maps.Service.Status.ERROR) { return alert('Something wrong!'); } // 성공 시의 response 처리 }); ServiceOptions ServiceOptions는 서버 API 호출 시 전달할 기본 파라미터를 정의합니다. sourcecrs, targetcrs, orders 파라미터를 정의할 수 있으며, 각 파라미터의 값으로 CoordinatesType 및 [OrderType] 객체를 활용할 수 있습니다. 파라미터명 기본값 설명 sourcecrs naver.maps.Service.CoordinatesType.LATLNG 좌표 체계의 이름 targetcrs naver.maps.Service.CoordinatesType.LATLNG 좌표 체계의 이름 orders naver.maps.Service.OrderType.ADDR 변환 작업 이름 주소 -&gt; 좌표 검색(geocode) API 호출 Geocoder 서브 모듈을 이용해, 주소로 좌표를 검색하는 geocode API를 호출할 수 있습니다. naver.maps.Service.geocode 또는 naver.maps.Service.fromAddrToCoord 메서드를 사용하여 호출할 수 있습니다. 첫 번째 파라미터로 ServiceOptions 객체에 query 파라미터를 추가한 options를 전달하며, query 옵션은 필수로 전달해야 합니다. query 파라미터는 검색할 주소의 문자열입니다. 두 번째 파라미터는 요청의 결과를 처리할 callback 함수입니다. fromAddrToCoord 편의 메서드는 내부적으로 geocode 메서드를 호출하며, 동일하게 동작합니다. naver.maps.Service.geocode({ query: '불정로 6' }, function(status, response) { if (status !== naver.maps.Service.Status.OK) { return alert('Something wrong!'); } var result = response.v2, // 검색 결과의 컨테이너 items = result.addresses; // 검색 결과의 배열 // do Something }); 요청이 성공하면 callback 함수의 두 번째 파라미터로 아래와 같은 형태의 json 객체 response가 전달됩니다. { \"v2\": { \"status\": \"OK\", \"meta\": { \"totalCount\": 1, \"page\": 1, \"count\": 1 }, \"addresses\": [ { \"roadAddress\": \"경기도 성남시 분당구 불정로 6 그린팩토리\", \"jibunAddress\": \"경기도 성남시 분당구 정자동 178-1 그린팩토리\", \"englishAddress\": \"6, Buljeong-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea\", \"addressElements\": [ { \"types\": [ \"POSTAL_CODE\" ], \"longName\": \"13561\", \"shortName\": \"\", \"code\": \"\" } ], \"x\": \"127.10522081658463\", \"y\": \"37.35951219616309\", \"distance\": 20.925857741585514 } ], \"errorMessage\": \"\" } } response 형태에 대한 자세한 내용은 GeocodeResponse를 참조합니다. Geocode의 상세 설명은 Geocoding API를 참조합니다. NAVER 지도 API v3을 이용해 호출하는 서버 API는 호출할 때마다 애플리케이션의 API 일일 허용량을 사용합니다. 좌표 -&gt; 주소 검색(reversegeocode) API 호출 Geocoder 서브 모듈을 이용해, 좌표로 주소를 검색하는 reversegeocode API를 호출할 수 있습니다. naver.maps.Service.reverseGeocode 또는 naver.maps.Service.fromCoordToAddr 메서드를 사용하여 호출할 수 있습니다. 첫 번째 파라미터로 ServiceOptions 객체에 coords 파라미터를 추가한 options를 전달하며, coords 옵션은 필수로 전달해야 합니다. coords 파라미터는 검색할 좌표이며, 경도,위도로 된 문자열(예: 128.12345,37.98776) 또는 Coord 객체 형태로 전달합니다. 두 번째 파라미터는 요청의 결과를 처리할 callback 함수입니다. fromCoordToAddr 편의 메서드는 내부적으로 reverseGeocode 메서드를 호출하며, 동일하게 동작합니다. naver.maps.Service.reverseGeocode({ coords: new naver.maps.LatLng(37.3595316, 127.1052133), }, function(status, response) { if (status !== naver.maps.Service.Status.OK) { return alert('Something wrong!'); } var result = response.v2, // 검색 결과의 컨테이너 items = result.results, // 검색 결과의 배열 address = result.address; // 검색 결과로 만든 주소 // do Something }); 요청이 성공하면 callback 함수의 두 번째 파라미터로 아래와 같은 형태의 json 객체 response가 전달됩니다. { \"v2\":{ \"status\":{ \"code\": 0, \"name\": \"ok\", \"message\": \"done\" }, \"results\":[ { \"name\": \"legalcode\", \"code\": { \"id\": \"2641010100\", \"type\": \"L\", \"mappingId\": \"08410101\" }, \"region\": { \"area0\": { \"name\": \"kr\", \"coords\": { \"center\": { \"crs\": \"\", \"x\": 0.0, \"y\": 0.0 } } }, \"area1\": { \"name\": \"부산광역시\", \"coords\": { \"center\": { \"crs\": \"EPSG:4326\", \"x\": 129.0750222, \"y\": 35.1798159 } } }, \"area2\": { \"name\": \"금정구\", \"coords\": { \"center\": { \"crs\": \"EPSG:4326\", \"x\": 129.0921, \"y\": 35.243068 } } }, \"area3\": { \"name\": \"두구동\", \"coords\": { \"center\": { \"crs\": \"EPSG:4326\", \"x\": 129.1133567, \"y\": 35.2982641 } } }, \"area4\": { \"name\": \"\", \"coords\": { \"center\": { \"crs\": \"\", \"x\": 0.0, \"y\": 0.0 } } } } } ], \"address\": { \"jibunAddress\": \"경기도 성남시 분당구 정자동 178-1\", \"roadAddress\": \"경기도 성남시 분당구 불정로 6 NAVER그린팩토리\" } } } response 형태에 대한 자세한 내용은 ReverseGeocodeResponse를 참조합니다. ReverseGeocode의 상세 설명은 ReverseGeocoding API를 참조합니다. NAVER 지도 API v3을 이용해 호출하는 서버 API는 호출할 때마다 애플리케이션의 API 일일 허용량을 사용합니다. Examples: 주소와 좌표 검색 API 사용하기 × Search results Close "},"tutorial-Geocoder.html":{"id":"tutorial-Geocoder.html","title":"Tutorial: Geocoder를 활용한 좌표 변환","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Geocoder를 활용한 좌표 변환 Geocoder를 활용한 좌표 변환 Geocoder 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 좌표 체계 간 변환 메서드와 특정 좌표계를 지원하는 투영 객체들을 제공합니다. Geocoder에 대한 다양한 예제는 Geocoder 예제를 참고합니다. 서브 모듈 로드하기 Geocoder를 사용하려면 Geocoder 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다. Geocoder 서브 모듈을 사용하려면 NAVER 지도 API v3이 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=geocoder\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=geocoder\"&gt;&lt;/script&gt; 좌표 체계 변환하기 Geocoder 서브 모듈을 사용하면 좌표 체계 변환 메서드를 사용할 수 있습니다. 현재 변환할 수 있는 좌표 체계의 목록은 아래와 같습니다. 지원되는 좌표 체계는 지속적으로 추가될 예정입니다. LatLng: 위/경도로 나타내는 좌표계입니다. UTMK: UTMK 좌표계입니다. NAVER: NAVER의 자체 좌표계입니다. TM128: TM128 좌표계입니다. 좌표계를 변환하려면 naver.maps.TransCoord 정적 객체를 사용합니다. var latlng = new naver.maps.LatLng(37.5666103, 126.9783882); // 서울시청 위/경도 좌표 var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -&gt; UTMK var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk); // UTMK -&gt; TM128 var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -&gt; NAVER Examples: 좌표계 변환하기 × Search results Close "},"tutorial-KVO-State-Changes.html":{"id":"tutorial-KVO-State-Changes.html","title":"Tutorial: KVO 상태 변경 알림","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVO 상태 변경 알림 KVO 상태 변경 알림 KVO(Key-Value Observing) 상태 변경 알림은 NAVER 지도 API v3 객체의 상태 변경을 알려주는 이벤트입니다. KVO 또는 KVOArray 클래스를 상속받은 NAVER 지도 API v3의 일부 객체는 자신의 상태를 가지고 있으며, 속성이 변경될 때마다 NAVER 지도 API v3은 속성이 변경되었다는 이벤트를 시작합니다. KVO: 속성(키)이 변경되면 알려줍니다. KVOArray: 배열 형태의 KVO로 배열의 요소가 변경되면 알려줍니다. KVO 상태 변경 알림은 다음과 같은 규칙에 따라 이름이 지정됩니다. {key}_changed 이벤트 리스너 등록하기 이벤트 리스너를 등록하면 객체의 상태 변경 알림을 수신할 수 있습니다. addListener 메서드를 이용해 특정 객체에서 발생한 알림을 받아 핸들러를 실행하는 리스너를 등록합니다. 다음은 지도의 줌 레벨이 변경되었을 때 줌 레벨을 정보 창에 표시하는 예제입니다. var map = new naver.maps.Map('map', { zoom: 4, center: new naver.maps.LatLng(37.3614483, 127.1114883), padding: { top: 100 }, zoomControl:true, zoomControlOptions: { style: naver.maps.ZoomControlStyle.SMALL } }); var contentEl = $('&lt;div class=\"iw_inner\" style=\"width:350px;position:absolute;top:0;right:0;z-index:1000;background-color:#fff;border:solid 1px #333;\"&gt;' + '&lt;h3&gt;Map States&lt;/h3&gt;' + '&lt;p style=\"font-size:14px;\"&gt;zoom : &lt;em class=\"zoom\"&gt;'+ map.getZoom() +'&lt;/em&gt;&lt;/p&gt;' + '&lt;p style=\"font-size:14px;\"&gt;center : &lt;em class=\"center\"&gt;'+ map.getCenter() +'&lt;/em&gt;&lt;/p&gt;' + '&lt;p style=\"font-size:14px;\"&gt;bounds : &lt;em class=\"bounds\"&gt;'+ map.getBounds() +'&lt;/em&gt;&lt;/p&gt;' + '&lt;/div&gt;'); contentEl.appendTo(map.getElement()); naver.maps.Event.addListener(map, 'zoom_changed', function(zoom) { contentEl.find('.zoom').text(zoom); }); naver.maps.Event.addListener(map, 'bounds_changed', function(bounds) { contentEl.find('.center').text(map.getCenter()); contentEl.find('.bounds').text(bounds); }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: KVO 이벤트 리스너를 등록하면 다음과 같이 MapEventListener 객체를 받습니다. MapEventListener = { eventName: String, listener: Function, listenerId: String, target:Object } MapEventListener 객체는 등록된 리스너의 정보를 담고 있는 객체로 등록된 리스너를 제거할 때 이용합니다. 이벤트 리스너 제거하기 이벤트 리스너를 등록 해제하면 더 이상 KVO 상태 변경 알림을 수신하지 않습니다. removeListener 메서드를 이용해 등록한 리스너를 제거합니다. 이벤트 인수에 접근하기 KVO 상태 변경 알림이 발생하면 NAVER 지도 API는 일반적으로 이벤트 인수를 전달하며, 등록한 리스너를 이용해 이벤트 인수에 접근할 수 있습니다. 예를 들어, 이벤트 리스너 등록하기에서 살펴본 예제에서 zoom_changed 알림이 발생하면 변경된 줌 레벨값에 접근해 사용하는 것을 볼 수 있습니다. × Search results Close "},"tutorial-Map.html":{"id":"tutorial-Map.html","title":"Tutorial: 지도 생성 및 기본 동작","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 생성 및 기본 동작 지도 생성 및 기본 동작 Map 객체는 특정 DOM 요소에 지도를 표현합니다. 지도 기본 예제를 참고하시기 바랍니다. 지도 초기화하기 지도를 초기화하려면 지도가 표현될 DOM 요소 또는 DOM 요소의 id를 명시해야 합니다. var map = new naver.maps.Map(document.getElementById('map')); 또는 var map = new naver.maps.Map('map'); 지도 유형 설정하기 Map 객체는 지도 유형을 저장하고 있습니다. 지도 유형을 설정하려면 지도 초기화 시 MapOptions를 이용하거나, setMapTypeId 메서드를 이용합니다. var map = new naver.maps.Map('map', { mapTypeId: naver.maps.MapTypeId.HYBRID }); 또는 var maps = new naver.maps.Map('map'); map.setMapTypeId(naver.maps.MapTypeId.HYBRID); 지도 이동하기 지도는 중심 좌표와 줌 레벨, 좌표 경계를 이용해 이동할 수 있습니다. 또한, 화면의 픽셀 좌표를 이용해 원하는 화면 좌표만큼 이동할 수도 있습니다. var jeju = new naver.maps.LatLng(33.3590628, 126.534361); map.setCenter(jeju); // 중심 좌표 이동 map.setZoom(13); // 줌 레벨 변경 var seoul = new naver.maps.LatLngBounds( new naver.maps.LatLng(37.42829747263545, 126.76620435615891), new naver.maps.LatLng(37.7010174173061, 127.18379493229875)); map.fitBounds(seoul); // 좌표 경계 이동 map.panBy(new naver.maps.Point(10, 10)); // 오른쪽 아래로 10 픽셀 이동 fitBounds 메서드를 이용하면, NAVER 지도 API는 내부적으로 좌표 경계를 화면에 표시할 수 있는 최적의 중심 좌표와 줌 레벨을 계산해 지도를 이동합니다. × Search results Close "},"tutorial-MapTypes.html":{"id":"tutorial-MapTypes.html","title":"Tutorial: 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 유형 지도 유형 지도 유형(MapTypes)은 지도의 정보를 말하는 것으로 지도 타일을 어떻게 표시할지, 좌표계를 어떻게 변환할지를 정의하고 있습니다. NAVER 지도 API v3은 네 가지 지도 유형을 기본적으로 제공합니다. 기본 지도 유형 일반 일반 이미지 지도 유형입니다. MapTypeId 객체의 NORMAL 상숫값을 사용합니다. 위성 위성 이미지 지도 유형입니다. MapTypeId 객체의 SATELLITE 상숫값을 사용합니다. 겹침 위성 이미지 지도 위에 주요 도로와 지명을 함께 보여주는 겹침 지도 유형입니다. MapTypeId 객체의 HYBRID 상숫값을 사용합니다. 지형도 지형의 높낮이를 함께 보여주는 지도 유형입니다. MapTypeId 객체의 TERRAIN 상숫값을 사용합니다. 지도 유형 설정하기 지도를 초기화할 때 지도 유형을 설정하려면 다음과 같이 MapOptions 객체의 mapTypeId 속성을 설정합니다. var map = new naver.maps.Map('map', { mapTypeId: naver.maps.MapTypeId.HYBRID }); 지도 유형을 동적으로 설정하려면 다음과 같이 Map 객체의 setMapTypeId 메서드를 이용합니다. map.setMapTypeId(naver.maps.MapTypeId.NORMAL); Examples: 지도 유형 설정하기 사용자 지도 유형 NAVER 지도 API v3은 지도 유형을 만들 때 구현해야 할 메서드와 속성을 정의한 MapType 추상 인터페이스를 제공합니다. 이 인터페이스를 구현한 MapType 객체는 좌표계를 어떻게 변환할 것인지를 결정하기 위해 지도 좌표와 세계 좌표 간의 변환 방식을 정의하는 Projection 객체를 포함하며, 투영 객체를 이용해 표시할 타일의 인덱스를 계산하고 해당 인덱스의 타일을 반환하는 역할을 합니다. 지도 좌표란 실세계의 고유한 지점을 가리키는 좌표로 일반적인 위/경도 좌표입니다. 세계 좌표란 API에서 지도 위의 고유한 한 점을 가리키는 좌표로 내부적으로 사용하는 좌표입니다. 좌표 체계에 관한 자세한 내용은 지도 투영과 좌표 체계를 참고합니다. 즉, 새로운 타일이 필요할 때마다 NAVER 지도 API v3은 MapType 객체의 인터페이스를 호출해 현재 좌표와 줌 레벨에 맞는 새로운 타일을 가져와 표시합니다. MapType 인터페이스를 구현하는 방법은 사용자 지도 유형 만들기를 참고합니다. 지도 유형 저장소 사용하기 앞서 일반, 위성 등의 다양한 지도 유형을 설명했습니다. NAVER 지도 API v3은 이와 같은 지도 유형을 관리하기 위해 지도 유형 저장소라고 불리는 MapTypeRegistry 객체를 이용합니다. 지도 유형 저장소는 MapType 객체를 컬렉션으로 관리하고 있으며, NAVER 지도 API v3에서 기본적으로 제공하는 지도 유형은 NaverStyleMapTypeOptions 객체에서 제공하는 팩토리 메서드를 이용해 접근할 수 있습니다. naver.maps.NaverStyleMapTypeOptions.getNormalMap(); 다음은 원하는 지도 유형(위성, 겹침보기)만 등록하는 예제입니다. 등록되지 않은 지도 유형을 사용하려고 하면 오류가 발생합니다. var registry = new naver.maps.MapTypeRegistry(); var map = new naver.maps.Map('map', { mapTypes: registry, mapTypeId: naver.maps.MapTypeId.SATELLITE }); map.mapTypes.set(naver.maps.MapTypeId.SATELLITE, naver.maps.NaverStyleMapTypeOptions.getSatelliteMap()); map.mapTypes.set(naver.maps.MapTypeId.HYBRID, naver.maps.NaverStyleMapTypeOptions.getHybridMap()); map.setMapTypeId(naver.maps.MapTypeId.NORMAL); // error thrown 사용자 지도 유형 만들기 사용자 지도 유형을 만들려면 앞서 설명한 MapType 인터페이스를 구현하고, 지도 유형 저장소에 추가해야 합니다. MapType 인터페이스를 구현하려면 다음 메서드와 속성을 정의해야 합니다. getTile (필수): 중심 세계 좌표와 투영법에 따라 표시할 x축과 y축 인덱스, 줌 레벨 z를 전달받아 화면에 표시할 타일 요소를 반환합니다. minZoom: 지도 유형이 타일을 표시할 수 있는 최소 줌 레벨을 지정합니다. maxZoom: 지도 유형이 타일을 표시할 수 있는 최대 줌 레벨을 지정합니다. tileSize: 타일의 크기를 지정합니다. 기본값은 256 x 256입니다. projection: 지도 유형이 사용할 투영법입니다. 지정하지 않으면 지도 좌표와 세계 좌표가 일치하는 기본 투영법을 사용합니다. name: 지도 유형의 이름입니다. 지도 유형의 이름은 지도 유형 컨트롤 등에서 사용합니다. 다음은 MapType 인터페이스를 구현한 사용자 지도 유형의 예제입니다. var MyMapType = { name: \"Alphabet\", minZoom: 0, maxZoom: 22, projection: naver.maps.EPSG3857, tileSize: new naver.maps.Size(50, 50), getTile: function(x, y, z) { var w = this.tileSize.width, h = this.tileSize.height; var ascii = parseInt(Math.abs(x + y) % 26, 10) + 65; alphabet = String.fromCharCode(ascii); var tile = document.createElement('div'); tile.style.width = w +'px'; tile.style.height = w +'px'; return tile; } }; var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10, mapTypeId: 'mine', mapTypes: new naver.maps.MapTypeRegistry({ 'mine': MyMapType }), mapTypeControl: true, mapTypeControlOptions: { style: naver.maps.MapTypeControlStyle.DROPDOWN } }); Examples: 사용자 지도 유형 만들기 이미지 지도 유형 만들기 NAVER 지도 API v3은 이미지 타일 방식의 지도 유형을 빠르고, 쉽게 만들 수 있는 ImageMapType 클래스를 제공합니다. 이 클래스를 활용하면 NAVER 지도 API v3에서 제공하는 기본 지도 유형과 유사한 이미지 지도 유형을 만들 수 있습니다. ImageMapType 클래스를 이용해 이미지 지도 유형을 만들 때는 ImageMapTypeOptions 객체를 전달해야 합니다. 이 객체는 다음과 같은 메서드와 속성을 정의하고 있습니다. getTile (필수): 중심 세계 좌표와 투영법에 따라 표시할 x축과 y축 인덱스, 줌 레벨 z를 전달받아 화면에 표시할 이미지 타일의 URL 또는 URL의 배열을 반환합니다. minZoom: 지도 유형이 타일을 표시할 수 있는 최소 줌 레벨을 지정합니다. maxZoom: 지도 유형이 타일을 표시할 수 있는 최대 줌 레벨을 지정합니다. tileSize: 타일의 크기를 지정합니다. 기본값은 256 x 256입니다. projection: 지도 유형이 사용할 투영법입니다. 지정하지 않으면 지도 좌표와 세계 좌표가 일치하는 기본 투영법을 사용합니다. name: 지도 유형의 이름입니다. 지도 유형의 이름은 지도 유형 컨트롤 등에서 사용합니다. repeatX: 현재 화면에서 지도 유형이 줌 레벨에 따라 표현할 수 있는 타일의 범위를 넘어섰을 때 타일의 반복 여부입니다. 이 옵션은 다음과 같이 세계 지도의 최소 레벨에서 지형을 연속적으로 표현하고자 할 때 주로 사용합니다. 이미지 지도 유형의 옵션을 동적으로 변경하기 앞의 예제와 같이 ImageMapTypeOptions 객체를 지정해 ImageMapType 인스턴스를 생성하면 getMapTypeOptions 메서드를 이용해 지정한 ImageMapTypeOptions 객체를 가져올 수 있습니다. 이 객체를 동적으로 수정한 다음, setMapTypeOptions 메서드를 이용해 설정하면 지도 유형을 변경할 수 있습니다. 이때 지도를 새로 고쳐야 변경된 지도 유형이 반영됩니다. 다음은 지도의 타일 크기를 동적으로 변경하는 예제입니다. map.setMapTypeId(naver.maps.MapTypeId.NORMAL); var normalType = map.getMapType(); var normalTypeOption = normalType.getMapTypeOptions(); normalTypeOption.tileSize = new naver.maps.Size(512, 512); normalType.setMapTypeOptions(normalTypeOption); map.refresh(); Examples: 투영법과 타일의 크기를 동적으로 변경하기 캔버스 지도 유형 만들기 NAVER 지도 API v3은 캔버스 타일 방식의 지도 유형을 빠르고, 쉽게 만들 수 있는 CanvasMapType 클래스를 제공합니다. CanvasMapType 클래스를 이용해 캔버스 지도 유형을 만들 때는 CanvasMapTypeOptions 객체를 전달해야 합니다. 이 객체는 다음과 같은 메서드와 속성을 정의하고 있습니다. getTile (필수): 중심 세계 좌표와 투영법에 따라 표시할 x축과 y축 인덱스, 줌 레벨 z를 전달받아 화면에 표시할 CanvasTile 객체를 반환합니다. minZoom: 지도 유형이 타일을 표시할 수 있는 최소 줌 레벨을 지정합니다. maxZoom: 지도 유형이 타일을 표시할 수 있는 최대 줌 레벨을 지정합니다. tileSize: 타일의 크기를 지정합니다. 기본값은 256 x 256입니다. projection: 지도 유형이 사용할 투영법입니다. 지정하지 않으면 지도 좌표와 세계 좌표가 일치하는 기본 투영법을 사용합니다. name: 지도 유형의 이름입니다. 지도 유형의 이름은 지도 유형 컨트롤 등에서 사용합니다. repeatX: 현재 화면에서 지도 유형이 줌 레벨에 따라 표현할 수 있는 타일의 범위를 넘어섰을 때 타일의 반복 여부입니다. 이 옵션은 다음과 같이 세계 지도의 최소 레벨에서 지형을 연속적으로 표현하고자 할 때 주로 사용합니다. 다음은 CanvasMapType 클래스를 이용해 알파벳 사용자 지도 유형을 만든 예제입니다. var MyMapType = { name: \"Alphabet\", minZoom: 0, maxZoom: 22, tileSize: new naver.maps.Size(50, 50), getTileData: function(x, y, z) { var w = this.tileSize.width, h = this.tileSize.height, canvas = document.createElement(\"canvas\"), ctx = canvas.getContext(\"2d\"); var ascii = parseInt(Math.abs(x + y) % 26, 10) + 65; alphabet = String.fromCharCode(ascii); canvas.width = w; canvas.height = h; ctx.globalAlpha = 1 - ((ascii - 65) * 0.04); ctx.rect(0, 0, w, h); ctx.fillStyle = \"#000\"; ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = \"#aaa\"; ctx.stroke(); ctx.font = \"bold \" + (Math.min(w, h) - 10) + \"px Arial\"; ctx.textBaseline = \"middle\"; ctx.textAlign = \"center\"; ctx.fillStyle = \"#fff\"; ctx.fillText(alphabet, w / 2, h / 2); return ctx.getImageData(0, 0, w, h); } }; var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(28.084179775000003, 25.216796875), zoom: 10, mapTypeId: 'Alphabet', mapTypes: new naver.maps.PaneTypeRegistry({ \"Alphabet\": new naver.maps.CanvasMapType(MyMapType) }) }); Examples: 캔버스 타일 지도 유형 기타 사용자 지도 유형 예제 위에서 설명한 사용자 지도 유형 외에도 다음과 같이 다양한 사용자 지도 유형 예제를 참고할 수 있습니다. Examples: 지도의 타일 인덱스 그리드 지도 유형 Examples: 이미지 타일 지도 유형 Examples: 두 가지의 지도 유형을 함께 사용하기 Examples: Starcraft The Hunters 지도 유형 Examples: NAVER 그린팩토리 지도 유형 × Search results Close "},"tutorial-Migrate-To-StyleMap.html":{"id":"tutorial-Migrate-To-StyleMap.html","title":"Tutorial: 기존 맵 타일에서 신규 맵 타일(StyleMap)으로 전환하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 기존 맵 타일에서 신규 맵 타일(StyleMap)으로 전환하기 기존 맵 타일에서 신규 맵 타일(StyleMap)으로 전환하기 이 문서는 NAVER 지도 API v3 기존 맵 타일에서 신규 맵 타일 (StyleMap)로 전환하는 사용자를 위해 NAVER 지도 API v3의 주요 인터페이스 중 신규 맵 타일에서 변경된 내용을 중심으로 설명합니다. 주의 현재 버전은 useStyleMap: true로 설정하지 않아도 신규 타일로 노출됩니다. 주요 변경 내용 기본 투영 변경 기존 맵 타일: NAVER 지도 API v3에서 기본적으로 제공하는 지도 유형(MapType)은 UTMK 투영법을 변조한 네이버 자체 투영법인 UTMK_NAVER를 사용합니다. 신규 맵 타일: StyleMap에서 기본적으로 제공하는 지도 유형은 웹 기반 지도 서비스에서 일반적으로 사용하는 EPSG:3857 을 기본 투영으로 사용합니다. 기본 줌 레벨 기존 맵 타일: 11. 신규 맵 타일: 16. 기존 줌 레벨과 +5 차이가 있습니다. 줌 레벨 지원 범위 기존 맵 타일: 1~14 레벨을 지원하고 있으며, 14 레벨이 최대 확대 레벨입니다. 신규 맵 타일: 0레벨이 세계지도 전도가 보이는 레벨이며, 21 레벨이 최대 확대 레벨입니다. minZoom 제한 기존 맵: minZoom 초기 지도 유형의 최저 줌 레벨. 신규 맵: minZoom 6. 지도를 국내로 제한하면서 6으로 제한합니다. 줌 레벨 범례 기존 맵 타일 레벨 범례 1 ~ 2 국가 3 ~ 5 시도 6 ~ 8 시군구 9 ~ 10 읍면동 11 ~ 12 거리 13 ~ 14 부동산 신규 맵 타일 레벨 범례 5 ~ 6 국가 7 ~ 9 시도 10 ~ 12 시군구 13 ~ 14 읍면동 15 ~ 16 거리 17 ~ 20 부동산 기본 줌 변경 기존 맵 타일: 11을 기본 줌 레벨로 사용 신규 맵 타일: 16을 기본 줌 레벨로 사용 신규 타일은 기존 타일 줌레벨 보다 5 레벨 높습니다. 기존 타일 11 레벨이 v5 타일에서는 16 레벨입니다. StyleMap 서브 모듈 제거 기존 맵 타일: stylemap 서브 모듈을 이용하여 신규 스타일 지도 표시 신규 맵 타일: 지도 생성 시 옵션으로 신규 스타일 지도 표시 전환 방법 지도 초기화하기 기존 맵 타일 var map = new naver.maps.Map('map', { size: new naver.maps.Size(300, 400) }); 신규 맵 타일 옵션에 useStyleMap: true 을 설정합니다. var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, size: new naver.maps.Size(300, 400) }); Examples: 1-map-stylemap.example 지도 옵션 설정 및 참조하기 기존 맵 타일 var map = new naver.maps.Map('map', { zoom: 11, center: new naver.maps.LatLng(37.5666103, 126.9783882) }); map.setOptions('minZoom', 10); console.log(map.getOptions('minZoom') === 10); 신규 맵 타일 init 이벤트 시점에 옵션 값을 참조합니다. var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, zoom: 16, center: new naver.maps.LatLng(37.5666103, 126.9783882) }); map.setOptions('minZoom', 10); console.log('잘못된 참조 시점', map.getOptions('minZoom') === 10); /* 변경점 */ naver.maps.Event.once(map, 'init', function () { console.log('올바른 참조 시점', map.getOptions('minZoom') === 10); }); Examples: 10-stylemap-options.example NaverStyleMapTypeOptions 사용 기존 맵 타일 var registry = new naver.maps.MapTypeRegistry(); var map = new naver.maps.Map('map', { mapTypes: registry, mapTypeId: naver.maps.MapTypeId.SATELLITE }); map.mapTypes.set(naver.maps.MapTypeId.SATELLITE, naver.maps.NaverMapTypeOptions.getSatelliteMap()); map.mapTypes.set(naver.maps.MapTypeId.HYBRID, naver.maps.NaverMapTypeOptions.getHybridMap()); 신규 맵 타일 NaverStyleMapTypeOptions 사용 var registry = new naver.maps.MapTypeRegistry(); var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, mapTypes: registry, mapTypeId: naver.maps.MapTypeId.SATELLITE }); /* 변경점 */ map.mapTypes.set(naver.maps.MapTypeId.SATELLITE, naver.maps.NaverStyleMapTypeOptions.getSatelliteMap()); map.mapTypes.set(naver.maps.MapTypeId.HYBRID, naver.maps.NaverStyleMapTypeOptions.getHybridMap()); 기본 레이어 표시하기 기존 맵 타일 var cadastralLayer = new naver.maps.CadastralLayer(); var streetLayer = new naver.maps.StreetLayer(); var bicycleLayer = new naver.maps.BicycleLayer(); var trafficLayer = new naver.maps.TrafficLayer(); cadastralLayer.setMap(map); streetLayer.setMap(map); bicycleLayer.setMap(map); trafficLayer.setMap(map); 신규 맵 타일 레이어 생성 시 useStyleMap: true 을 설정합니다. /* 변경점 */ var cadastralLayer = new naver.maps.CadastralLayer({ useStyleMap: true }); var streetLayer = new naver.maps.StreetLayer({ useStyleMap: true }); var bicycleLayer = new naver.maps.BicycleLayer({ useStyleMap: true }); var trafficLayer = new naver.maps.TrafficLayer({ useStyleMap: true }); cadastralLayer.setMap(map); streetLayer.setMap(map); bicycleLayer.setMap(map); trafficLayer.setMap(map); Examples: 2-stylemap-cadastral.example 사용자 정의 레이어 만들기 기존 맵 타일 var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverMapTypeOptions.getVectorMap() }) }); var labelMapType = new naver.maps.NaverMapTypeOptions.getNormalLabelLayer(); var labelMapTypeRegistry = new naver.maps.MapTypeRegistry({ 'label': labelMapType }); var labelLayer = new naver.maps.Layer('label', labelMapTypeRegistry); labelLayer.setMap(map); 신규 맵 타일 NaverStyleMapTypeOptions 사용, init 이벤트 시점에 layer 설정 var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, center: new naver.maps.LatLng(37.3595704, 127.105399), mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverStyleMapTypeOptions.getVectorMap() }) }); /* 변경점 */ naver.maps.Event.once(map, 'init', function () { var labelMapType = new naver.maps.NaverStyleMapTypeOptions.getNormalLabelLayer(); var labelMapTypeRegistry = new naver.maps.MapTypeRegistry({ 'label': labelMapType }); var labelLayer = new naver.maps.Layer('label', labelMapTypeRegistry); labelLayer.setMap(map); }); Examples: 3-stylemap-custom.example 그리기 도구 서브 모듈 사용하기 기존 맵 타일 var map = new naver.maps.Map('map'); var drawingManager = new naver.maps.drawing.DrawingManager({map: map}); 신규 맵 타일 onJSContentLoaded 이벤트 핸들러 시점에 생성 var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true }); naver.maps.onJSContentLoaded = function() { var drawingManager = new naver.maps.drawing.DrawingManager({map: map}); }; 데이터 시각화 서브 모듈 사용하기 기존 맵 타일 var data = [ new naver.maps.LatLng(37.75,125.4), new naver.maps.LatLng(35.42,128.56), new naver.maps.LatLng(35.57,128.34), // (생략) new naver.maps.LatLng(36.30,125.9), new naver.maps.LatLng(35.80,128.2), new naver.maps.LatLng(38.70,127.9) ]; var heatmap = new naver.maps.visualization.HeatMap({ map: map, data: data }); 신규 맵 타일 onJSContentLoaded 이벤트 핸들러 시점에 생성 var data = [ new naver.maps.LatLng(37.75,125.4), new naver.maps.LatLng(35.42,128.56), new naver.maps.LatLng(35.57,128.34), // (생략) new naver.maps.LatLng(36.30,125.9), new naver.maps.LatLng(35.80,128.2), new naver.maps.LatLng(38.70,127.9) ]; /* 변경점 */ naver.maps.onJSContentLoaded = function() { var heatmap = new naver.maps.visualization.HeatMap({ map: map, data: data }); }; Examples: 4-stylemap-submodule-heatmap.example 사용자 정의 컨트롤 기존 맵 타일 var locationBtnHtml = '&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;'; var map = new naver.maps.Map('map', {zoom: 8}); //customControl 객체 이용하기 var customControl = new naver.maps.CustomControl(locationBtnHtml, { position: naver.maps.Position.TOP_LEFT }); customControl.setMap(map); var domEventListener = 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); var domEventListener = naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() { map.setCenter(new naver.maps.LatLng(37.3595953, 127.1553971)); }); 신규 맵 타일 init 이벤트 시점에 생성 var locationBtnHtml = '&lt;a href=\"#\" class=\"btn_mylct\"&gt;&lt;span class=\"spr_trff spr_ico_mylct\"&gt;NAVER 그린팩토리&lt;/span&gt;&lt;/a&gt;'; var map = new naver.maps.Map('map', { /* 변경점 */ useStyleMap: true, zoom: 13 }); /* 변경점 */ naver.maps.Event.once(map, 'init', function () { //customControl 객체 이용하기 var customControl = new naver.maps.CustomControl(locationBtnHtml, { position: naver.maps.Position.TOP_LEFT }); customControl.setMap(map); var domEventListener = 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); var domEventListener = naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() { map.setCenter(new naver.maps.LatLng(37.3595953, 127.1553971)); }); }); Examples: 6-stylemap-custom-control.example × Search results Close "},"tutorial-Panorama.html":{"id":"tutorial-Panorama.html","title":"Tutorial: 파노라마 생성 및 기본 동작","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 생성 및 기본 동작 파노라마 생성 및 기본 동작 파노라마 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 지정한 DOM 요소에 파노라마 이미지를 표시할 수 있는 뷰어를 삽입하여 거리뷰, 항공뷰 등의 서비스(이하 파노라마)를 제공할 수 있도록 합니다. 파노라마에 대한 다양한 예제는 파노라마 예제를 참고합니다. 서브 모듈 로드하기 파노라마를 사용하려면 파노라마 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다. 파노라마 서브 모듈을 사용하려면 NAVER 지도 API v3이 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=panorama\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=panorama\"&gt;&lt;/script&gt; 파노라마 DOM 요소 지정하기 웹 페이지에 지도를 삽입할 DOM 요소를 지정합니다. 일반적으로 &lt;div&gt;&lt;/div&gt; 요소를 사용합니다. &lt;div id=\"pano\" style=\"width:100%;height:400px;\"&gt;&lt;/div&gt; 지도를 초기화할 때 PanoramaOptions의 size를 지정하지 않으면 초기화 시점의 지도 DOM 컨테이너의 크기로 지도 크기를 설정합니다. 이후 setSize 메서드를 이용해 지도 크기를 변경하기 전까지 지도 크기는 고정됩니다. 파노라마 옵션 설정하기 파노라마 옵션은 파노라마를 생성할 때 파노라마의 속성을 초기화하는 데 사용되며, 객체 리터럴로 만듭니다. 파노라마 옵션에 대한 자세한 설명은 PanoramaOptions 명세를 참고합니다. var panoramaOptions = { position: new naver.maps.LatLng(37.3599605, 127.1058814), size: new naver.maps.Size(800, 600), pov: { pan: -135, tilt: 29, fov: 100 } }; 파노라마 생성하기 Panorama 클래스는 파노라마를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. 파노라마를 표시하려면 파노라마 뷰어가 삽입될 DOM 요소 또는 DOM 요소의 id를 명시해야 합니다. var pano = new naver.maps.Panorama(document.getElementById(\"pano\"), { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); 또는 var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); 새 인스턴스를 만들 때 두 가지 인수를 전달합니다. 파노라마를 표현할 컨테이너 요소. 반드시 전달해야 합니다. 앞서 파노라마를 표현하기 위해 지정한 DOM 요소의 id 문자열을 직접 전달하거나, document.getElementById 메서드를 이용해 해당 DOM 요소의 참조를 전달할 수 있습니다. 파노라마의 속성을 초기화하는 데 이용하는 파노라마 옵션. 반드시 전달해야 합니다. panoId와 position 속성 중 하나는 반드시 설정해야 합니다. 파노라마 위치와 시야(POV) 파노라마 위치 PanoramaLocation 객체는 파노라마의 위치 정보를 나타냅니다. var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); naver.maps.Event.addListener(pano, \"pano_changed\", function() { console.log(\"PanoramaLocation\", pano.getLocation()); // panoId, title, address, coord, photodate }); 파노라마 시야(Pov) PanoramaPov 객체는 파노라마의 시야(POV, Point of View) 정보를 나타냅니다. var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814) }); naver.maps.Event.addListener(pano, \"pov_changed\", function() { console.log(\"PanoramaPov\", pano.getPov()); // pan, tilt, fov }); 파노라마 이벤트 Panorama 객체는 상태 변경에 대한 알림 및 이벤트를 제공합니다. 상태 변경 알림 pano_changed: 파노라마 id가 변경되면 발생하는 이벤트입니다. 이 이벤트는 시야가 변경되었을 때는 발생하지 않습니다. 파노라마 id 또는 파노라마 위치가 변경되어 새로운 파노라마를 조회한 다음 파노라마 id가 변경되었을 때 발생합니다. pov_changed: 파노라마 시야가 변경되면 발생하는 이벤트입니다. 이 이벤트는 파노라마 id와 파노라마 위치가 변경되었을 때는 발생하지 않습니다. 이벤트 init: 파노라마 초기화를 끝내면 발생하는 이벤트입니다. 따라서 파노라마 위에 마커 등의 오버레이를 올리려면 이 이벤트가 발생한 다음에 수행해야 정상적으로 동작합니다. pano_status: 파노라마 조회를 끝내면 발생하는 이벤트입니다. 파노라마 조회를 정상적으로 마치면 OK 상태이며, 파노라마 조회를 비정상적으로 마치거나 파노라마가 없으면 ERROR 상태입니다. var pano = new naver.maps.Panorama(\"pano\", { position: new naver.maps.LatLng(37.3599605, 127.1058814), pov: { pan: -135, tilt: 29, fov: 100 }, visible: false }); naver.maps.Event.addListener(pano, \"init\", function() { pano.setVisible(true); }); naver.maps.Event.addListener(pano, \"pano_status\", function(status) { $(\"#pano_status_cell\").text(status + \", \" + pano.getPanoId()); }); naver.maps.Event.addListener(pano, \"pano_changed\", function() { $(\"#id_cell\").text(pano.getPanoId()); $(\"#position_cell\").text(pano.getPosition()); $(\"#roadname_cell\").text(pano.getLocation().title); $(\"#address_cell\").text(pano.getLocation().address); $(\"#photodate_cell\").text(pano.getLocation().photodate); }); naver.maps.Event.addListener(pano, \"pov_changed\", function() { $(\"#pan_cell\").text(pano.getPov().pan); $(\"#tilt_cell\").text(pano.getPov().tilt); $(\"#fov_cell\").text(pano.getPov().fov); $(\"#zoom_cell\").text(pano.getZoom()); $(\"#min_zoom_cell\").text(pano.getMinZoom()); $(\"#max_zoom_cell\").text(pano.getMaxZoom()); }); 위 예제는 jQuery 구문을 포함하고 있습니다. Examples: 파노라마 이벤트 처리하기 × Search results Close "},"tutorial-Projection.html":{"id":"tutorial-Projection.html","title":"Tutorial: 지도 투영과 좌표 체계","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 투영과 좌표 체계 지도 투영과 좌표 체계 지도 투영(Projection)은 둥근 지구를 평면으로 전개하는 것을 말하며, 투영법은 위/경도 좌표를 투영된 지도의 좌표로 옮기는 방법을 정의하고 있습니다. NAVER 지도 API v3은 투영과 관련된 두 가지 객체를 제공합니다. Projection: 지도 좌표계를 평면 좌표계로 변환하는 방법을 정의 MapSystemProjection: Projection 객체를 이용해 지도의 타일 배치, 좌표 변환, 두 좌표의 거리 계산 방법을 정의 NAVER 지도 API v3에서 기본적으로 제공하는 지도 유형(MapType)은 UTMK 투영법을 변조한 네이버 자체 투영법인 UTMK_NAVER를 사용합니다. 좌표 체계 NAVER 지도 API v3은 다음 3가지 좌표계를 사용합니다. 지도 좌표 (coord) - 실세계의 고유한 지점을 가리키는 좌표입니다. 일반적으로 위도와 경도로 표시하는 WGS84 표준을 사용합니다. 세계 좌표 (point) - API에서 지도 위의 고유한 한 점을 가리키는 좌표입니다. 화면 좌표 (offset) - 현재 지도 화면에서의 특정 지점에 해당하는 CSS 픽셀 좌표입니다. 이 좌표는 지도의 DOM 컨테이너에서의 오프셋으로, 각종 오버레이를 지도 위에 배치하는 데 사용합니다. 지도 좌표 지도 좌표(Map Coordinate)는 실세계에서 특정 위치를 가리키는 데 사용하는 좌표입니다. 일반적으로 위도와 경도로 표시하는 WGS84 표준을 사용하며, UTMK와 같은 다른 좌표계를 사용할 수도 있습니다. 지도 좌표는 위도와 경도를 정의하는 LatLng 클래스를 사용하거나, 다른 좌표계를 위해 Point 클래스를 사용하여 정의할 수 있습니다. 예를 들어, 다음과 같이 정의한 지도 좌표는 위도 37.5666805, 경도 126.9784147인 지점이며, 지리적으로는 서울 시청의 위치를 가리킵니다. new naver.maps.LatLng(37.5666805, 126.9784147) UTMK 투영법과 좌표계를 이용할 때는 서울 시청 지도 좌표를 다음과 같이 정의할 수 있습니다. new naver.maps.Point(953937.9, 1952051.9) 세계 좌표 세계 좌표(World Coordinate)는 NAVER 지도 API v3에서 지도 위의 고유한 한 점을 가리키는 데 사용하는 좌표입니다. NAVER 지도 API v3은 지도 좌표를 일정한 범위 내의 세계 좌표로 변환합니다. 예를 들어, 위도와 경도를 사용하는 WGS84 지도 좌표는 구면 좌표계이며, UTMK와 같은 좌표계는 평면 좌표계입니다. 이런 다양한 지도 좌표를 NAVER 지도 API v3이 이해할 수 있는 세계 좌표로 변환하여 지도를 실제 화면에 표시합니다. NAVER 지도 API v3은 지도 유형이 표시할 수 있는 최소 레벨에서 타일의 개수는 항상 1개라고 가정합니다. 세계 좌표는 이 타일 1개의 수평축 x와 수직축 y의 좌표를 정의하며, 좌표의 범위는 타일의 수평/수직축 크기 사이의 값입니다. 즉, 다음 그림과 같이 기본적인 256 x 256 크기의 타일을 사용하는 지도 유형에서는 세계 좌표의 값이 x축, y축 모두 0~256입니다. 그러나 다음 그림과 같이 256 x 64와 같은 비대칭형 크기의 타일을 사용하는 지도 유형에서는 세계 좌표의 값이 x축은 0~256이지만, y축은 0~64입니다. NAVER 지도 API v3은 현재 선택된 지도 유형의 tileSize 속성을 참조해 세계 좌표 범위를 MapSystemProjection이 자동으로 계산하도록 설계되었습니다. MapSystemProjection은 지도 유형에 설정된 투영 객체를 내부적으로 참조하고 있습니다. 따라서, 지도 유형에 설정하는 투영 객체는 세계 좌표의 범위를 x축과 y축 모두 0~1의 값으로 계산되도록 구현되어야 합니다. MapSystemProjection 인스턴스는 Map 객체의 getProjection 메서드를 이용해 접근할 수 있습니다. 지도 유형에 설정한 본래의 투영 객체는 Map 객체의 getPrimitiveProjection 메서드를 이용해 접근할 수 있습니다. 다음은 MapSystemProjection 인스턴스와 지도 유형의 투영 객체의 세계 좌표 변환을 보여줍니다. 이 예제의 결과를 살펴보면 본래의 투영 객체로 변환한 세계 좌표에서 타일 크기를 곱한 결과가 실제 API에서 사용하는 세계 좌표라는 것을 알 수 있습니다. map.getProjection() === map.getMapType().projection; // false map.getPrimitiveProjection() === map.getMapType().projection; // true var cityHall = new naver.maps.LatLng(37.5666805, 126.9784147); var systemWorldPoint = map.getProjection().fromCoordToPoint(cityHall); // 105.44749755859375, 163.32960205078126 var worldPoint = map.getPrimitiveProjection().fromCoordToPoint(cityHall); // 0.41190428733825685, 0.6380062580108643 systemWorldPoint.equals( worldPoint.mul(256, 256) ); // true 화면 좌표 화면 좌표(Offset Coordinate)는 NAVER 지도 API v3이 삽입한 지도 화면의 DOM 컨테이너에서의 오프셋입니다. 이 좌표는 픽셀 단위의 값을 나타내므로 각종 오버레이를 지도 위에 위치시키는 데 주로 사용합니다. 화면 좌표는 지도의 이동, 줌 레벨 변경 등으로 인한 DOM 컨테이너의 위치에 따라 변동될 수 있는 좌표이므로 어느 한 지점을 고유하게 가리키는 절대 좌표로 사용할 수는 없습니다. 다음은 화면 좌표를 이용해 사용자 컨텍스트 메뉴를 표시하는 코드입니다. var myMenu = document.createElement('div'); myMenu.style.position = 'absolute'; myMenu.style.zIndex = 10000; map.getPanes().overlayLayer.appendChild(myMenu); naver.maps.Event.addListener(map, 'rightclick', function(e) { var offset = e.offset; myMenu.style.left = offset.x +'px'; myMenu.style.top = offset.y +'px'; }); × Search results Close "},"tutorial-StyleMap-Custom-OverlayType.html":{"id":"tutorial-StyleMap-Custom-OverlayType.html","title":"Tutorial: 사용자 정의 OverlayType 설정","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 OverlayType 설정 사용자 정의 OverlayType 설정 사용자 타일 세부 유형 설정 하기 마침표(.)을 구분자로 원하는 세부 지도 유형을 조합할 수 있습니다. 세부 지도 유형 세부 지도 유형 (overlayType) 설명 bg 해당하는 지도 유형의 배경 표시 ol 실폭 도로, 실선 도로, 행정 경계, 공원 상세, 도로시설물, 시설, 역과 같이 세밀한 요소 표현 ts 지하철 노선도(sw), 버스 정류장(bs)과 같이 대중교통 관련 요소 표현 sw 지하철 노선도만 별도 표시하고 싶을 때 bs 버스 정류장만 별도 표시하고 싶을 때 pr 거리뷰, 항공뷰, 수중뷰와 같이 파노라마 촬영 위치 관련 요소 표현 br 자전거 관련 요소 표현 ar 등산로 관련 요소 표현 lp 지적편집도 표현 ctt 혼잡 교통정보 표현 lko 한국어 라벨 표현 일반 지도 배경 요청 var map = new naver.maps.Map('map', { zoom: 11, mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverStyleMapTypeOptions.getNormalMap( { overlayType: 'bg' } ) }) }); 실행결과 Examples: 사용자 정의 OverlayType 설정 예제 위성 지도 배경에 자전거 도로 요청 var map = new naver.maps.Map('map', { zoom: 11, mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverStyleMapTypeOptions.getSatelliteMap( { overlayType: 'bg.br' } ) }) }); 실행결과 일반 지도 배경에 실시간 혼잡 교통 정보 요청 var map = new naver.maps.Map('map', { zoom: 11, mapTypes: new naver.maps.MapTypeRegistry({ 'normal': naver.maps.NaverStyleMapTypeOptions.getNormalMap( { overlayType: 'bg.ol.ts.ctt.lko' } ) }) }); 실행결과 × Search results Close "},"tutorial-UI-Event.html":{"id":"tutorial-UI-Event.html","title":"Tutorial: UI 이벤트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API UI 이벤트 UI 이벤트 지도 UI 이벤트는 지도와 사용자의 상호작용으로 발생하는 이벤트입니다. NAVER 지도 API v3의 일부 객체는 다음과 같은 지도 UI 이벤트에 응답하도록 설계되었습니다. mousedown, mouseup, click, dblclick, rightclick, mouseover, mouseout, mousemove dragstart, drag, dragend touchstart, touchmove, touchend, pinchstart, pinch, pinchend, tap, longtap, twofingertap, doubletap 이 이벤트는 표준 DOM(Document Object Model) 이벤트처럼 보이나 실제로는 NAVER 지도 API v3의 이벤트입니다. 따라서 브라우저 간 특성차를 사용자가 별도로 처리할 필요 없이 DOM 이벤트를 수신하거나 응답할 수 있습니다. 이벤트 리스너 등록하기 이벤트 리스너를 등록하면 지도 UI 이벤트를 수신할 수 있습니다. addListener 메서드를 이용해 특정 객체에서 발생한 이벤트를 받아 핸들러를 실행하는 리스너를 등록합니다. 다음은 지도를 클릭했을 때 해당 위치를 console.log 메서드로 출력하는 예제입니다. var 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); }); 리스너를 등록하면 다음과 같이 MapEventListener 객체를 받습니다. MapEventListener = { eventName: String, listener: Function, listenerId: String, target:Object } MapEventListener 객체는 등록된 리스너의 정보를 담고 있는 객체로 등록된 리스너를 제거할 때 이용합니다. 이벤트 리스너 제거하기 이벤트 리스너를 등록 해제하면 더 이상 지도 UI 이벤트를 수신하지 않습니다. removeListener 메서드를 이용해 등록한 리스너를 제거합니다. 다음 예제는 마커에 등록한 리스너를 제거하는 예제입니다. var mapOptions = { zoom: 4, center: new naver.maps.LatLng(37.3614483, 127.1114883) }; var map = new naver.maps.Map('map', mapOptions); var markerOptions = { position: map.getCenter(), map: map }; var marker = new naver.maps.Marker(markerOptions); var listener = naver.maps.Event.addListener(marker, 'click', function() { map.setZoom(8); map.setCenter(marker.getPosition()); naver.maps.Event.removeListener(listener); }); 이벤트 인수에 접근하기 지도 UI 이벤트가 발생되면 NAVER 지도 API v3은 일반적으로 이벤트 인수를 전달하며, 등록한 리스너를 이용해 이벤트 인수에 접근할 수 있습니다 예를 들어, Map 객체는 click 이벤트 등 몇 가지 이벤트에 대해 PointerEvent 객체의 인수를 전달합니다. 다음은 지도를 클릭했을 때 해당 위치에 마커를 올리는 예제입니다. var mapOptions = { zoom: 4, center: new naver.maps.LatLng(37.3614483, 127.1114883) }; var map = new naver.maps.Map('map', mapOptions); var listener = naver.maps.Event.addListener(map, 'click', function(e) { var marker = new naver.maps.Marker({ position: e.coord, map: map }); }); +Examples: 이벤트 기본 예제 +Examples: 오버레이의 이벤트 × Search results Close "},"tutorial-Visualization.html":{"id":"tutorial-Visualization.html","title":"Tutorial: 데이터 시각화","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 데이터 시각화 데이터 시각화 시각화 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 지리 정보를 포함한 데이터를 쉽게 이해할 수 있도록 시각적으로 표현하는 클래스를 제공합니다. 클라이언트에서 데이터를 렌더링하므로 데이터가 많으면 성능이 저하될 수 있습니다. 다음은 지원하는 웹 브라우저 및 플랫폼 범위입니다. PC: Internet Explorer 9 이상, Chrome, Safari 5 이상, Firefox Mobile: Android 5 이상, iOS 9 이상 현재 제공하는 시각화 클래스는 다음과 같습니다. 열지도 점지도 시각화에 대한 다양한 예제는 시각화 예제를 참고합니다. 서브 모듈 로드하기 지리 정보를 포함한 데이터를 시각적으로 표현하려면 시각화 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다. 시각화 서브 모듈을 사용하려면 NAVER 지도 API v3이 이미 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다. NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다. 네이버 클라우드 플랫폼 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&amp;submodules=visualization\"&gt;&lt;/script&gt; 공공기관용 &lt;script type=\"text/javascript\" src=\"https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&amp;submodules=visualization\"&gt;&lt;/script&gt; 열지도 사용하기 열지도는 지리 정보를 포함한 데이터의 강도를 색상으로 표현하는 시각화 방식입니다. 기본적으로는 강도가 높은 영역은 붉은색으로, 강도가 낮은 영역은 파란색으로 표현됩니다. HeatMap 클래스는 열지도를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. 이때 열지도 속성을 초기화하는 데 열지도 옵션을 사용합니다. 객체 리터럴로 만들며 열지도 옵션에 대한 자세한 설명은 HeatMapOptions 명세를 참고합니다. var data = [ new naver.maps.LatLng(37.75,125.4), new naver.maps.LatLng(35.42,128.56), new naver.maps.LatLng(35.57,128.34), // (생략) new naver.maps.LatLng(36.30,125.9), new naver.maps.LatLng(35.80,128.2), new naver.maps.LatLng(38.70,127.9) ]; naver.maps.onJSContentLoaded = function() { var heatmap = new naver.maps.visualization.HeatMap({ map: map, data: data }); }; Examples: 열지도 시각화하기 점지도 사용하기 점지도는 지리 정보를 포함한 데이터의 위치를 하나의 점으로 표현하는 시각화 방식입니다. DotMap 클래스는 점지도를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. 이때 점지도 속성을 초기화하는 데 점지도 옵션을 사용합니다. 객체 리터럴로 만들며 점지도 옵션에 대한 자세한 설명은 DotMapOptions 명세를 참고합니다. var data = [ new naver.maps.LatLng(37.75,125.4), new naver.maps.LatLng(35.42,128.56), new naver.maps.LatLng(35.57,128.34), // (생략) new naver.maps.LatLng(36.30,125.9), new naver.maps.LatLng(35.80,128.2), new naver.maps.LatLng(38.70,127.9) ]; naver.maps.onJSContentLoaded = function() { var dotmap = new naver.maps.visualization.DotMap({ map: map, data: data }); }; Examples: 점지도 시각화하기 가중치 사용하기 WeightedLocation 클래스는 지리 정보뿐만 아니라 가중치가 있는 데이터를 시각적으로 표현하는 데 사용하는 클래스입니다. 데이터의 가중치는 최댓값과 최솟값을 기준으로 0~1로 정규화해 사용합니다. 시각화 서브 모듈은 내부적으로 모든 데이터를 WeightedLocation 인스턴스로 관리합니다. 데이터에 가중치가 없으면 기본값인 1을 사용합니다. 정규화된 가중치는 시각화 서브 모듈에서 제공하는 시각화 유형에 따라 아래와 같이 사용됩니다. HeatMap: 열지도에서 가중치는 점의 영향력 강도(세기)로 사용됩니다. 강도의 범위는 0.1~1입니다. 가중치가 없을 때 강도는 1입니다. DotMap: 점지도에서 가중치는 점의 반지름으로 사용됩니다. 반지름의 범위는 1~{사용자가 설정한 반지름}입니다. 가중치가 없을 때 반지름은 사용자가 설정한 반지름입니다. 지리 정보에 가중치가 있는 데이터를 생성하는 방법은 여러 가지가 있습니다. 아래와 같이 직접 new 연산자를 이용하여 새 인스턴스를 생성할 수 있습니다. var data = [ new naver.maps.visualization.WeightedLocation(36.95, 129.92, 3.1), // (생략) new naver.maps.visualization.WeightedLocation(33.36, 127.12, 2.1) ]; 또는 아래와 같이 리터럴 형태의 데이터를 이용할 수 있습니다. 이때에는 시각화 서브 모듈 내부적으로 WeightedLocation으로 변환합니다. var data = [ {\"weight\":2.0, \"location\": [126.58,36.90]}, // (생략) {\"weight\":2.9, \"location\": [127.12,33.36]} ]; // (또는) var data = [ {\"weight\":2.0, \"location\": new naver.maps.LatLng(36.90,126.58)}, // (생략) {\"weight\":2.9, \"location\": new naver.maps.LatLng(33.36,127.12)} ]; // (또는) var data = [ {\"weight\":2.0, \"location\": {\"lat\": 33.36, \"lng\": 127.12}}, // (생략) {\"weight\":2.9, \"location\": {\"lat\": 33.36, \"lng\": 127.12}} ]; Examples: 열지도 가중치 사용하기 Examples: 점지도 가중치 사용하기 × Search results Close "},"tutorial-1-control-simple.example.html":{"id":"tutorial-1-control-simple.example.html","title":"Example: 지도 컨트롤 추가/제거하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 컨트롤 추가/제거하기 지도 컨트롤 추가/제거하기 지도 줌 컨트롤 지도의 줌 컨트롤을 생성하는 예제입니다. × Search results Close "},"tutorial-2-control-options.example.html":{"id":"tutorial-2-control-options.example.html","title":"Example: 지도 컨트롤 스타일 설정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 컨트롤 스타일 설정하기 지도 컨트롤 스타일 설정하기 지도 줌 컨트롤 스타일 설정 지도의 줌 컨트롤 옵션을 이용하는 예제입니다. × Search results Close "},"tutorial-3-control-positioning.example.html":{"id":"tutorial-3-control-positioning.example.html","title":"Example: 지도 컨트롤 위치 설정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 컨트롤 위치 설정하기 지도 컨트롤 위치 설정하기 컨트롤 위치 설정하기 Position과 스타일(MapTypeControlStyle, ZoomControlStyle)을 이용하여 컨트롤의 위치와 스타일을 설정하는 예제입니다. × Search results Close "},"tutorial-4-control-custom-p1.example.html":{"id":"tutorial-4-control-custom-p1.example.html","title":"Example: 사용자 정의 컨트롤 만들기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 컨트롤 만들기 사용자 정의 컨트롤 만들기 사용자 정의 컨트롤 사용자 정의 컨트롤을 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-1-datalayer.example.html":{"id":"tutorial-1-datalayer.example.html","title":"Example: GeoJSON 데이터 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API GeoJSON 데이터 레이어 표시하기 GeoJSON 데이터 레이어 표시하기 GeoJSON 데이터 레이어 표시하기 GeoJSON 데이터를 지도에 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-2-datalayer-region.example.html":{"id":"tutorial-2-datalayer-region.example.html","title":"Example: 행정구역 GeoJSON 데이터 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 행정구역 GeoJSON 데이터 레이어 표시하기 행정구역 GeoJSON 데이터 레이어 표시하기 행정구역 GeoJSON 데이터 레이어 표시하기 행정구역 GeoJSON 데이터를 지도에 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-datalayer-kml.example.html":{"id":"tutorial-3-datalayer-kml.example.html","title":"Example: KML 데이터 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KML 데이터 레이어 표시하기 KML 데이터 레이어 표시하기 KML 데이터 레이어 표시하기 KML 데이터를 지도에 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-4-datalayer-gpx.example.html":{"id":"tutorial-4-datalayer-gpx.example.html","title":"Example: GPX 데이터 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API GPX 데이터 레이어 표시하기 GPX 데이터 레이어 표시하기 GPX 데이터 레이어 표시하기 GPX 데이터를 지도에 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-5-mantle-properties.example.html":{"id":"tutorial-5-mantle-properties.example.html","title":"Example: 데이터 레이어 autoStyle 활용","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 데이터 레이어 autoStyle 활용 데이터 레이어 autoStyle 활용 데이터 레이어 autoStyle 활용 예제입니다. autoStyle과 mantle-properties를 적용하여 스타일 적용하는 예제입니다. × Search results Close "},"tutorial-digest.example.html":{"id":"tutorial-digest.example.html","title":"Example: 예제 모아보기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 예제 모아보기 예제 모아보기 네이버 지도 API v3의 다양한 예제를 살펴보세요. #지도 지도 기본 예제 지도 옵션 조정하기 지도 유형 설정하기 지도 좌표 경계 확인하기 지도 이동하기 HTML5 Geolocation API 활용하기 전체 화면 지도와 미니 맵 지도 영역 제한하기 #지도 유형 지도의 타일 인덱스 그리드 지도 유형 이미지 타일 지도 유형 사용자 지도 유형 만들기 투영법과 타일의 크기를 동적으로 변경하기 두 가지의 지도 유형을 함께 사용하기 Starcraft The Hunters 지도 유형 NAVER 그린팩토리 지도 유형 캔버스 타일 지도 유형 #프로젝션 좌표를 픽셀로 변환하기 타일 INDEX 확인하기 #이벤트 이벤트 기본 예제 KVO 이벤트 오버레이의 이벤트 이벤트 테스트 #컨트롤 지도 컨트롤 추가/제거하기 지도 컨트롤 스타일 설정하기 지도 컨트롤 위치 설정하기 사용자 정의 컨트롤 만들기 #레이어 네이버 자전거 레이어 표시하기 사용자 정의 OverlayType 설정 예제 네이버 지적도 레이어 표시하기 네이버 실시간 교통상황 레이어 표시하기 네이버 거리뷰 레이어 표시하기 사용자 정의 레이어 만들기 #데이터 레이어 GeoJSON 데이터 레이어 표시하기 행정구역 GeoJSON 데이터 레이어 표시하기 KML 데이터 레이어 표시하기 GPX 데이터 레이어 표시하기 데이터 레이어 autoStyle 활용 #시각화 열지도 시각화하기 점지도 시각화하기 열지도 스펙트럼 변경하기 열지도 가중치 사용하기 점지도 가중치 사용하기 #오버레이 사용자 정의 오버레이 표시하기 #마커 마커 표시하기 이미지 아이콘 사용하기 스프라이트 이미지 아이콘 사용하기 HTML 아이콘 사용하기 심벌 아이콘 사용하기 이미지 아이콘 레티나 대응하기 스프라이트 이미지 아이콘 레티나 대응하기 클릭한 지점으로 마커 옮기기 애니메이션 마커 표시하기 마커 클러스터화하기 겹침 마커 처리하기 마커 인터랙션 영역 설정하기 보이는 지도 영역의 마커만 표시하기 다수의 마커에 이벤트 핸들러 사용하기 #정보 창 정보 창 표시하기 정보 창 옵션 사용하기 #도형 사각형, 원, 타원 그리기 폴리곤, 폴리라인 그리기 구멍 난 폴리곤 그리기 폴리곤 옵션 사용하기 폴리라인 옵션 사용하기 폴리라인에 화살표 표시하기 클릭한 지점 폴리곤 연결하기 클릭한 지점 폴리라인 연결하기 멀티 폴리라인 성능 테스트 폴리라인, 폴리곤의 거리/면적 재기 #지상 오버레이 지상 오버레이 표시하기 #파노라마 파노라마 기본 예제 파노라마 크기 변경하기 파노라마 이벤트 처리하기 파노라마 마커 표시하기 파노라마 요약 정보 레이어 표시하기 파노라마 줌 컨트롤 표시하기 거리/항공뷰 전환하기 지도에 항공뷰 아이콘 표시하기 지도와 파노라마 연동하기 #좌표-주소-변환 좌표계 변환하기 주소와 좌표 검색 API 사용하기 #그리기 도구 그리기 도구 기본 예제 그리기 도구 옵션 활용하기 오버레이 데이터 추출 및 복원하기 × Search results Close "},"tutorial-1-drawing-simple.example.html":{"id":"tutorial-1-drawing-simple.example.html","title":"Example: 그리기 도구 기본 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 그리기 도구 기본 예제 그리기 도구 기본 예제 그리기 도구 기본 예제 기본 옵션을 적용한 그리기 도구를 생성하는 예제입니다. 도형을 생성, 선택, 삭제 시 발생하는 이벤트가 왼쪽 아래에 표시됩니다. 그리기 아이콘이 선택된 상태에서 지도 위에 클릭합니다. - shift를 누르고 있는 경우 정방형/직교좌표로 스냅이 제공됩니다. - polygon, polyline: 마우스 오른쪽 버튼 클릭/Esc로 그리기 종료. 이동 그려진 도형을 클릭하여 편집 모드로 변경합니다. 그려진 도형을 드래그하여 이동합니다. 수정 그려진 도형을 클릭하여 편집 모드로 변경합니다. 그려진 도형의 제어점을 드래그하여 수정합니다. - polygon, polyline: 중간 제어점을 클릭하면 점을 추가합니다. 삭제 그려진 도형을 마우스 오른쪽 버튼으로 클릭해 삭제합니다. Occurred Events × Search results Close "},"tutorial-2-drawing-options.example.html":{"id":"tutorial-2-drawing-options.example.html","title":"Example: 그리기 도구 옵션 활용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 그리기 도구 옵션 활용하기 그리기 도구 옵션 활용하기 그리기 도구 모듈 옵션 활용하기 그리기 도구 모듈의 다양한 옵션을 활용하는 예제입니다. 위치 LEFT_TOP LEFT_CENTER LEFT_BOTTOM RIGHT_TOP RIGHT_CENTER RIGHT_BOTTOM TOP_LEFT TOP_CENTER TOP_RIGHT BOTTOM_LEFT BOTTOM_CENTER BOTTOM_RIGHT 스타일 horizontal vertical horizontal_2 vertical_2 아이콘 HAND RECTANGLE ELLIPSE POLYLINE ARROWLINE POLYGON MARKER 모두제거 모두추가 × Search results Close "},"tutorial-3-drawing-restore.example.html":{"id":"tutorial-3-drawing-restore.example.html","title":"Example: 오버레이 데이터 추출 및 복원하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 오버레이 데이터 추출 및 복원하기 오버레이 데이터 추출 및 복원하기 지리 형상 정보 추출 및 복원 예제 그리기 도구를 이용해 지도 위에 올린 오버레이의 지리 형상 정보를 추출하고, 추출한 GeoJSON 데이터를 데이터 레이어를 이용해 복원합니다. 그리기 도구를 이용해 지도 위에 오버레이를 그린 후, 추출 및 복원 버튼을 눌러 보세요. × Search results Close "},"tutorial-1-event-simple.example.html":{"id":"tutorial-1-event-simple.example.html","title":"Example: 이벤트 기본 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이벤트 기본 예제 이벤트 기본 예제 지도 이벤트 지도의 클릭 이벤트를 이용하는 예제입니다. 클릭 위치에 마커를 표시하고, 마우스 오른쪽 버튼을 클릭하면 정보 레이어를 표시합니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-2-event-kvo.example.html":{"id":"tutorial-2-event-kvo.example.html","title":"Example: KVO 이벤트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API KVO 이벤트 KVO 이벤트 KVO 이벤트 지도 객체의 KVO 이벤트를 이용하는 예제입니다. 지도의 줌 레벨을 변경하면 변경된 줌 레벨을 정보 창에 표시합니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-event-overlay.example.html":{"id":"tutorial-3-event-overlay.example.html","title":"Example: 오버레이의 이벤트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 오버레이의 이벤트 오버레이의 이벤트 오버레이 이벤트 오버레이 객체의 이벤트를 이용하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-4-event-test.example.html":{"id":"tutorial-4-event-test.example.html","title":"Example: 이벤트 테스트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이벤트 테스트 이벤트 테스트 이벤트 테스트 isTouchStarted true 이면 mousemove 시 drag (mouse) 가 발생하지 않습니다. draggable false 또는 pinching true 라면 swipe (touch) 가 발생하지 않습니다. pinchZoom false 또는 tilting true 라면 pinch 가 발생하지 않습니다. × Search results Close "},"tutorial-1-geocoder-transcoord.example.html":{"id":"tutorial-1-geocoder-transcoord.example.html","title":"Example: 좌표계 변환하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 좌표계 변환하기 좌표계 변환하기 좌표계 변환하기 Geocoder 서브 모듈의 TransCoord 객체를 사용한 좌표계 변환 예제입니다. × Search results Close "},"tutorial-3-geocoder-geocoding.example.html":{"id":"tutorial-3-geocoder-geocoding.example.html","title":"Example: 주소와 좌표 검색 API 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 주소와 좌표 검색 API 사용하기 주소와 좌표 검색 API 사용하기 주소와 좌표 검색 API 사용하기 Geocoder 서브 모듈의 Service 객체를 사용하여 주소로 좌표를 검색하거나(Geocode) 좌표로 주소를 검색하는(Reversegeocode) 예제입니다. 입력 창에 주소를 입력하여 검색하면 해당 주소의 좌표로 이동하며, 지도를 클릭하면 해당 지점의 경위도 좌표로 주소를 검색합니다. Geocode API의 자세한 응답값은 Geocode API를 참고하세요. Reversegeocode API의 자세한 응답값은 ReverseGeocode API를 참고하세요. × Search results Close "},"tutorial-1-bicycle.example.html":{"id":"tutorial-1-bicycle.example.html","title":"Example: 네이버 자전거 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 네이버 자전거 레이어 표시하기 네이버 자전거 레이어 표시하기 네이버 자전거 레이어 표시하기 네이버 자전거 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-14-stylemap-overlaytype.example.html":{"id":"tutorial-14-stylemap-overlaytype.example.html","title":"Example: 사용자 정의 OverlayType 설정 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 OverlayType 설정 예제 사용자 정의 OverlayType 설정 예제 사용자 정의 OverlayType 설정 예제 일반 지도 배경에 실시간 혼잡 교통 정보 요청 예제입니다. overlayType은 사용자 타일 세부 유형 설정 하기를 참고하세요. × Search results Close "},"tutorial-2-cadastral.example.html":{"id":"tutorial-2-cadastral.example.html","title":"Example: 네이버 지적도 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 네이버 지적도 레이어 표시하기 네이버 지적도 레이어 표시하기 네이버 지적도 레이어 표시하기 네이버 지적도 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-traffic.example.html":{"id":"tutorial-3-traffic.example.html","title":"Example: 네이버 실시간 교통상황 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 네이버 실시간 교통상황 레이어 표시하기 네이버 실시간 교통상황 레이어 표시하기 네이버 실시간 교통상황 레이어 표시하기 네이버 실시간 교통상황 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 자동 새로고침 × Search results Close "},"tutorial-4-street.example.html":{"id":"tutorial-4-street.example.html","title":"Example: 네이버 거리뷰 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 네이버 거리뷰 레이어 표시하기 네이버 거리뷰 레이어 표시하기 네이버 거리뷰 레이어 표시하기 네이버 거리뷰 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-5-custom.example.html":{"id":"tutorial-5-custom.example.html","title":"Example: 사용자 정의 레이어 만들기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 레이어 만들기 사용자 정의 레이어 만들기 사용자 정의 레이어 만들기 사용자 정의 레이어를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-1-map-simple.example.html":{"id":"tutorial-1-map-simple.example.html","title":"Example: 지도 기본 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 기본 예제 지도 기본 예제 간단한 지도 표시하기 지도를 생성하는 가장 기본적인 예제입니다. 지도 옵션을 설정하지 않으면 다음과 같이 서울 시청을 중심으로 하는 지도가 생성됩니다. × Search results Close "},"tutorial-2-map-options.example.html":{"id":"tutorial-2-map-options.example.html","title":"Example: 지도 옵션 조정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 옵션 조정하기 지도 옵션 조정하기 지도 옵션 조정하기 지도의 옵션(지도 인터랙션, 관성 드래깅, 타일 fadeIn 효과, 지도 컨트롤, 최소/최대 줌 레벨)을 설정, 해제하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 지도 초기화 시 지도의 인터랙션과 타일 fadeIn 효과는 기본적으로 활성화되어 있습니다. 지도 옵션에 대한 자세한 내용은 MapOptions를 참고하세요. × Search results Close "},"tutorial-3-map-types.example.html":{"id":"tutorial-3-map-types.example.html","title":"Example: 지도 유형 설정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 유형 설정하기 지도 유형 설정하기 지도 유형 설정하기 지도의 유형을 설정하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-4-map-bounds.example.html":{"id":"tutorial-4-map-bounds.example.html","title":"Example: 지도 좌표 경계 확인하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 좌표 경계 확인하기 지도 좌표 경계 확인하기 지도의 좌표 경계 확인하기 지도의 bounds 객체를 이용하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-5-map-moves.example.html":{"id":"tutorial-5-map-moves.example.html","title":"Example: 지도 이동하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 이동하기 지도 이동하기 지도 이동하기 지도를 이동하는 여러 가지 방법에 대한 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 지도 이동 메서드에 대한 자세한 내용은 Map을 참고하세요. × Search results Close "},"tutorial-6-map-geolocation.example.html":{"id":"tutorial-6-map-geolocation.example.html","title":"Example: HTML5 Geolocation API 활용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API HTML5 Geolocation API 활용하기 HTML5 Geolocation API 활용하기 Geolocation HTML5 API 활용하기 Geolocation HTML5 API를 통해 얻은 좌표로 지도를 이동하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. navigator.geolocation 은 Chrome 50 버젼 이후로 HTTP 환경에서 사용이 Deprecate 되어 HTTPS 환경에서만 사용 가능 합니다. http://localhost 에서는 사용이 가능하며, 테스트 목적으로, Chrome 의 바로가기를 만들어서 아래와 같이 설정하면 접속은 가능합니다. chrome.exe --unsafely-treat-insecure-origin-as-secure=\"http://example.com\" × Search results Close "},"tutorial-7-map-fullsize-minimap.example.html":{"id":"tutorial-7-map-fullsize-minimap.example.html","title":"Example: 전체 화면 지도와 미니 맵","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 전체 화면 지도와 미니 맵 전체 화면 지도와 미니 맵 전체 화면 지도와 미니 맵을 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 지도 초기화 시 `MapOptions`의 `size` 속성을 생략하면 지도의 크기가 DOM 요소의 HTML 렌더링 크기대로 자동으로 조정됩니다. 전체 화면으로 지도를 표시하는 예제이므로 새창으로 열기를 눌러서 확인할 수 있습니다. // size 옵션이 생략되면 map DOM 요소의 HTML 렌더링 크기로 자동으로 조정됩니다. var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.5666805, 126.9784147), zoom: 13, minZoom: 6, mapTypeId: naver.maps.MapTypeId.HYBRID, zoomControl: true, zoomControlOptions: { position: naver.maps.Position.TOP_RIGHT }, mapDataControl: false, logoControlOptions: { position: naver.maps.Position.LEFT_BOTTOM }, disableKineticPan: false }); var semaphore = false; naver.maps.Event.once(map, 'init', function() { map.setOptions({ mapTypeControl: true, scaleControl: false, logoControl: false }); // 미니 맵이 들어갈 HTML 요소를 controls 객체에 추가합니다. 가장 오른쪽 아래에 위치하도록 다른 옵션들을 잠시 끕니다. map.controls[naver.maps.Position.BOTTOM_RIGHT].push($(\"#minimap\")[0]); map.setOptions({ scaleControl: true, logoControl: true, }); var minimap = new naver.maps.Map('minimap', { //미니 맵 지도를 생성합니다. bounds: map.getBounds(), scrollWheel: false, scaleControl: false, mapDataControl: false, logoControl: false }); naver.maps.Event.addListener(map, 'bounds_changed', function(bounds) { if (semaphore) return; minimap.fitBounds(bounds); }); naver.maps.Event.addListener(map, 'mapTypeId_changed', function(mapTypeId) { var toTypes = { \"normal\": \"hybrid\", \"terrain\": \"satellite\", \"satellite\": \"terrain\", \"hybrid\": \"normal\" }; minimap.setMapTypeId(toTypes[mapTypeId]); }); naver.maps.Event.addListener(minimap, 'drag', function() { semaphore = true; map.panTo(minimap.getCenter()); naver.maps.Event.once(map, 'idle', function() { semaphore = false; }); }); }); × Search results Close "},"tutorial-8-map-maxbounds.example.html":{"id":"tutorial-8-map-maxbounds.example.html","title":"Example: 지도 영역 제한하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도 영역 제한하기 지도 영역 제한하기 minZoom, maxBounds 설정하기 minZoom과 maxBounds를 이용하여 지도 영역을 독도로 설정하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-1-maptypes-tilecheck.example.html":{"id":"tutorial-1-maptypes-tilecheck.example.html","title":"Example: 지도의 타일 인덱스 그리드 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도의 타일 인덱스 그리드 지도 유형 지도의 타일 인덱스 그리드 지도 유형 지도의 타일 인덱스 그리드 지도 유형 네이버 지도의 타일 그리드를 살펴볼 수 있는 예제입니다.(타일 그리드를 표시하기 위해 레이어를 사용합니다) 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-2-maptypes-imagemaptype.example.html":{"id":"tutorial-2-maptypes-imagemaptype.example.html","title":"Example: 이미지 타일 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이미지 타일 지도 유형 이미지 타일 지도 유형 이미지 타일 지도 유형 만들기 OSM의 이미지 타일을 이용해 지도를 생성하는 예제입니다. × Search results Close "},"tutorial-3-maptypes-basic.example.html":{"id":"tutorial-3-maptypes-basic.example.html","title":"Example: 사용자 지도 유형 만들기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 지도 유형 만들기 사용자 지도 유형 만들기 사용자 DOM 요소를 활용하는 지도 유형 만들기 사용자의 DOM 요소를 활용한 지도 유형 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-4-maptypes-dynamic.example.html":{"id":"tutorial-4-maptypes-dynamic.example.html","title":"Example: 투영법과 타일의 크기를 동적으로 변경하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 투영법과 타일의 크기를 동적으로 변경하기 투영법과 타일의 크기를 동적으로 변경하기 투영법과 타일 크기를 동적으로 변경하기 투영법과 타일 크기를 동적으로 변경하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. 투영법 변경 (오른쪽 위 버튼 메뉴) 타일 크기 변경 64 x 64 128 x 128 256 x 256 512 x 512 256 x 128 256 x 64 × Search results Close "},"tutorial-5-maptypes-naver_osm.example.html":{"id":"tutorial-5-maptypes-naver_osm.example.html","title":"Example: 두 가지의 지도 유형을 함께 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 두 가지의 지도 유형을 함께 사용하기 두 가지의 지도 유형을 함께 사용하기 네이버 / OpenStreetMap 매시업 지도 다른 지도 유형을 함께 사용하는 예제입니다. 지도 화면이 한국 경계를 넘어 표시되는 경우 OSM 지도 유형이 표시됩니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-7-maptypes-the-hunters.example.html":{"id":"tutorial-7-maptypes-the-hunters.example.html","title":"Example: Starcraft The Hunters 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API Starcraft The Hunters 지도 유형 Starcraft The Hunters 지도 유형 Starcraft The Hunters map MapType 인터페이스를 구현해 Starcraft The Hunters 지도 유형을 만드는 예제입니다. × Search results Close "},"tutorial-8-maptypes-greenfactory.example.html":{"id":"tutorial-8-maptypes-greenfactory.example.html","title":"Example: NAVER 그린팩토리 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API NAVER 그린팩토리 지도 유형 NAVER 그린팩토리 지도 유형 Naver Greenfactory map ImageMapType을 이용해 네이버 그린팩토리 실내 지도 유형을 만드는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-9-maptypes-canvasmaptype.example.html":{"id":"tutorial-9-maptypes-canvasmaptype.example.html","title":"Example: 캔버스 타일 지도 유형","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 캔버스 타일 지도 유형 캔버스 타일 지도 유형 캔버스 타일 지도 유형 만들기 캔버스 타일을 이용해 지도를 생성하는 예제입니다. × Search results Close "},"tutorial-1-infowindow-simple.example.html":{"id":"tutorial-1-infowindow-simple.example.html","title":"Example: 정보 창 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 정보 창 표시하기 정보 창 표시하기 정보 창 표시하기 마커에 정보 창을 표시하는 예제입니다. × Search results Close "},"tutorial-1-marker-simple.example.html":{"id":"tutorial-1-marker-simple.example.html","title":"Example: 마커 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 마커 표시하기 마커 표시하기 마커 표시하기 네이버 그린팩토리 위치에 기본 마커를 표시하는 예제입니다. × Search results Close "},"tutorial-1-shape-simple.example.html":{"id":"tutorial-1-shape-simple.example.html","title":"Example: 사각형, 원, 타원 그리기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사각형, 원, 타원 그리기 사각형, 원, 타원 그리기 사각형, 원, 타원 그리기 지도 위에 좌표를 기반으로 사각형, 원, 타원을 생성하는 예제입니다. × Search results Close "},"tutorial-3-marker-image-icon.example.html":{"id":"tutorial-3-marker-image-icon.example.html","title":"Example: 이미지 아이콘 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이미지 아이콘 사용하기 이미지 아이콘 사용하기 이미지 아이콘 사용하기 특정 이미지를 마커 아이콘으로 사용하는 예제입니다. × Search results Close "},"tutorial-3-polygon-simple.example.html":{"id":"tutorial-3-polygon-simple.example.html","title":"Example: 폴리곤, 폴리라인 그리기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리곤, 폴리라인 그리기 폴리곤, 폴리라인 그리기 폴리곤, 폴리라인 그리기 지도 위에 좌표를 기반으로 폴리곤과 폴리라인을 생성하는 예제입니다. × Search results Close "},"tutorial-4-marker-sprite-image-icon.example.html":{"id":"tutorial-4-marker-sprite-image-icon.example.html","title":"Example: 스프라이트 이미지 아이콘 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 스프라이트 이미지 아이콘 사용하기 스프라이트 이미지 아이콘 사용하기 스프라이트 이미지 아이콘 사용하기 하나의 이미지에 여러 모양의 아이콘을 합친 스프라이트 이미지를 마커 아이콘으로 사용하는 예제입니다. 마커에 마우스 포인터를 올리거나 마커 위에 있던 마우스 포인터를 다른 곳으로 이동하면 아이콘이 변경됩니다. × Search results Close "},"tutorial-4-polygon-hole.example.html":{"id":"tutorial-4-polygon-hole.example.html","title":"Example: 구멍 난 폴리곤 그리기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 구멍 난 폴리곤 그리기 구멍 난 폴리곤 그리기 구멍 난 폴리곤 그리기 구멍 난 폴리곤을 생성하는 예제입니다. × Search results Close "},"tutorial-5-marker-html-icon.example.html":{"id":"tutorial-5-marker-html-icon.example.html","title":"Example: HTML 아이콘 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API HTML 아이콘 사용하기 HTML 아이콘 사용하기 HTML 아이콘 사용하기 HTML 콘텐츠를 마커 아이콘으로 사용하는 예제입니다. × Search results Close "},"tutorial-5-polygon-options.example.html":{"id":"tutorial-5-polygon-options.example.html","title":"Example: 폴리곤 옵션 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리곤 옵션 사용하기 폴리곤 옵션 사용하기 폴리곤 옵션 사용하기 폴리곤에 마우스 포인터를 올리면 폴리곤의 선 스타일이 변경되는 예제입니다. × Search results Close "},"tutorial-6-marker-symbol-icon.example.html":{"id":"tutorial-6-marker-symbol-icon.example.html","title":"Example: 심벌 아이콘 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 심벌 아이콘 사용하기 심벌 아이콘 사용하기 심벌 아이콘 사용하기 폴리곤, 폴리라인을 마커 아이콘으로 사용하는 예제입니다. × Search results Close "},"tutorial-6-polyline-options.example.html":{"id":"tutorial-6-polyline-options.example.html","title":"Example: 폴리라인 옵션 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리라인 옵션 사용하기 폴리라인 옵션 사용하기 폴리라인 옵션 사용하기 폴리라인에 마우스 포인터를 올리면 폴리라인의 스타일이 변경되는 예제입니다. × Search results Close "},"tutorial-7-marker-retina.example.html":{"id":"tutorial-7-marker-retina.example.html","title":"Example: 이미지 아이콘 레티나 대응하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 이미지 아이콘 레티나 대응하기 이미지 아이콘 레티나 대응하기 이미지 아이콘 레티나 대응하기 scaledSize 속성을 이용해 레티나 디스플레이에 대응하도록 마커의 이미지 아이콘 크기를 조절하는 예제입니다. × Search results Close "},"tutorial-8-marker-retina-sprite.example.html":{"id":"tutorial-8-marker-retina-sprite.example.html","title":"Example: 스프라이트 이미지 아이콘 레티나 대응하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 스프라이트 이미지 아이콘 레티나 대응하기 스프라이트 이미지 아이콘 레티나 대응하기 스프라이트 이미지 아이콘 레티나 대응하기 scaledSize 속성을 이용해 레티나 디스플레이에 대응하도록 마커의 스프라이트 이미지 아이콘 크기를 조절하는 예제입니다. × Search results Close "},"tutorial-9-marker-position.example.html":{"id":"tutorial-9-marker-position.example.html","title":"Example: 클릭한 지점으로 마커 옮기기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 클릭한 지점으로 마커 옮기기 클릭한 지점으로 마커 옮기기 클릭한 지점으로 마커 옮기기 마커의 setPosition 메서드를 이용해 마커의 위치를 설정하는 예제입니다. × Search results Close "},"tutorial-custom-overlay.example.html":{"id":"tutorial-custom-overlay.example.html","title":"Example: 사용자 정의 오버레이 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 오버레이 표시하기 사용자 정의 오버레이 표시하기 사용자 정의 오버레이 표시하기 사용자 정의 오버레이를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-ground-overlay.example.html":{"id":"tutorial-ground-overlay.example.html","title":"Example: 지상 오버레이 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지상 오버레이 표시하기 지상 오버레이 표시하기 지상 오버레이 표시하기 위도/경도 좌표에 연동된 이미지 오버레이를 생성하는 예제입니다. × Search results Close "},"tutorial-infowindow-options.example.html":{"id":"tutorial-infowindow-options.example.html","title":"Example: 정보 창 옵션 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 정보 창 옵션 사용하기 정보 창 옵션 사용하기 정보 창 옵션 사용하기 스타일 옵션을 지정해 정보 창의 모양을 설정하는 예제입니다. × Search results Close "},"tutorial-marker-animation.example.html":{"id":"tutorial-marker-animation.example.html","title":"Example: 애니메이션 마커 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 애니메이션 마커 표시하기 애니메이션 마커 표시하기 애니메이션 마커 표시하기 지도 위에서 움직이는 마커를 생성하는 예제입니다. × Search results Close "},"tutorial-marker-cluster.example.html":{"id":"tutorial-marker-cluster.example.html","title":"Example: 마커 클러스터화하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 마커 클러스터화하기 마커 클러스터화하기 마커 클러스터화하기 지도 위에 많은 마커가 표시될 때 마커를 그룹화하여 나타냅니다. 이 예제의 소스 코드는 GitHub 저장소에 공개되어 있습니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-marker-intersect.example.html":{"id":"tutorial-marker-intersect.example.html","title":"Example: 겹침 마커 처리하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 겹침 마커 처리하기 겹침 마커 처리하기 겹침 마커 처리하기 지도 위에 많은 마커가 표시될 때 겹쳐지는 마커를 판별하는 예제입니다. 이 예제의 소스 코드는 GitHub 저장소에 공개되어 있습니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-marker-shape.example.html":{"id":"tutorial-marker-shape.example.html","title":"Example: 마커 인터랙션 영역 설정하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 마커 인터랙션 영역 설정하기 마커 인터랙션 영역 설정하기 마커 인터랙션 영역 설정하기 shape 속성을 이용해 마커의 사용자 인터랙션 영역(마우스, 터치 이벤트)을 정의하는 예제입니다. × Search results Close "},"tutorial-marker-viewport.example.html":{"id":"tutorial-marker-viewport.example.html","title":"Example: 보이는 지도 영역의 마커만 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 보이는 지도 영역의 마커만 표시하기 보이는 지도 영역의 마커만 표시하기 보이는 지도 영역의 마커만 표시하기 표시되지 않는 부분의 마커는 지도에서 제거하여 최적화하는 예제입니다. × Search results Close "},"tutorial-marker-viewportevents.example.html":{"id":"tutorial-marker-viewportevents.example.html","title":"Example: 다수의 마커에 이벤트 핸들러 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 다수의 마커에 이벤트 핸들러 사용하기 다수의 마커에 이벤트 핸들러 사용하기 다수의 마커에 이벤트 핸들러 사용하기 다수의 마커를 배열로 관리하고, 개별 마커에서 이벤트가 발생하면 적절한 데이터를 조회할 수 있도록 하는 예제입니다. 마커를 클릭하면 정보 창이 열립니다. × Search results Close "},"tutorial-pointing-icon.example.html":{"id":"tutorial-pointing-icon.example.html","title":"Example: 폴리라인에 화살표 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리라인에 화살표 표시하기 폴리라인에 화살표 표시하기 폴리라인의 시작/끝점에 아이콘을 표시하는 예제입니다 × Search results Close "},"tutorial-polygon-dynamic.example.html":{"id":"tutorial-polygon-dynamic.example.html","title":"Example: 클릭한 지점 폴리곤 연결하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 클릭한 지점 폴리곤 연결하기 클릭한 지점 폴리곤 연결하기 클릭한 지점 폴리곤으로 연결하기 지도에서 클릭한 지점을 폴리곤으로 연결하는 예제입니다. × Search results Close "},"tutorial-polyline-dynamic.example.html":{"id":"tutorial-polyline-dynamic.example.html","title":"Example: 클릭한 지점 폴리라인 연결하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 클릭한 지점 폴리라인 연결하기 클릭한 지점 폴리라인 연결하기 클릭한 지점 폴리라인으로 연결하기 지도에서 클릭한 지점을 폴리라인으로 연결하는 예제입니다. × Search results Close "},"tutorial-polyline-route.example.html":{"id":"tutorial-polyline-route.example.html","title":"Example: 멀티 폴리라인 성능 테스트","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 멀티 폴리라인 성능 테스트 멀티 폴리라인 성능 테스트 폴리라인 성능 테스트 멀티 폴리라인 생성 테스트 단일 폴리라인으로 그리기 멀티 폴리라인으로 그리기 폴리라인 삭제 × Search results Close "},"tutorial-shape-measures.example.html":{"id":"tutorial-shape-measures.example.html","title":"Example: 폴리라인, 폴리곤의 거리/면적 재기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 폴리라인, 폴리곤의 거리/면적 재기 폴리라인, 폴리곤의 거리/면적 재기 폴리라인, 폴리곤의 거리/면적 재기 폴리라인, 폴리곤의 거리와 면적을 재는 방법을 설명하기 위한 컴포넌트 개발 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-1-panorama-simple.example.html":{"id":"tutorial-1-panorama-simple.example.html","title":"Example: 파노라마 기본 예제","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 기본 예제 파노라마 기본 예제 파노라마 기본 예제 기본 파노라마를 생성하는 예제입니다. × Search results Close "},"tutorial-2-panorama-resize.example.html":{"id":"tutorial-2-panorama-resize.example.html","title":"Example: 파노라마 크기 변경하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 크기 변경하기 파노라마 크기 변경하기 파노라마 크기 변경하기 파노라마의 크기를 동적으로 변경하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-3-panorama-event.example.html":{"id":"tutorial-3-panorama-event.example.html","title":"Example: 파노라마 이벤트 처리하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 이벤트 처리하기 파노라마 이벤트 처리하기 파노라마 이벤트 처리하기 파노라마의 이벤트를 이용하여 파노라마 객체의 속성을 살펴보는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. Pano ID Title Address Photodate POV Pan POV Tilt POV Fov Zoom Min Zoom Max Zoom Scale Min Scale Max Scale Pano Status × Search results Close "},"tutorial-4-panorama-image-marker.example.html":{"id":"tutorial-4-panorama-image-marker.example.html","title":"Example: 파노라마 마커 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 마커 표시하기 파노라마 마커 표시하기 파노라마 마커 표시하기 마커 위치로 파노라마 시야를 조정하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-5-panorama-html-infowindow.example.html":{"id":"tutorial-5-panorama-html-infowindow.example.html","title":"Example: 파노라마 요약 정보 레이어 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 요약 정보 레이어 표시하기 파노라마 요약 정보 레이어 표시하기 파노라마 요약 정보 레이어 표시하기 파노라마 위에 정보 창을 표시하는 예제입니다. × Search results Close "},"tutorial-6-panorama-zoomcontrol.example.html":{"id":"tutorial-6-panorama-zoomcontrol.example.html","title":"Example: 파노라마 줌 컨트롤 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 파노라마 줌 컨트롤 표시하기 파노라마 줌 컨트롤 표시하기 파노라마 줌 컨트롤 표시하기 파노라마 위에 줌 컨트롤를 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-7-panorama-aroundcontrol.example.html":{"id":"tutorial-7-panorama-aroundcontrol.example.html","title":"Example: 거리/항공뷰 전환하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 거리/항공뷰 전환하기 거리/항공뷰 전환하기 거리/항공뷰 전환 컨트롤 옵션 거리뷰/항공뷰를 전환하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-8-panorama-flightspot.example.html":{"id":"tutorial-8-panorama-flightspot.example.html","title":"Example: 지도에 항공뷰 아이콘 표시하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도에 항공뷰 아이콘 표시하기 지도에 항공뷰 아이콘 표시하기 지도에 항공뷰 아이콘 표시하기 네이버 지도에서 제공하는 항공뷰를 지도에 표시하는 예제입니다. 자세한 내용은 FlightSpot을 참고하세요. 이 예제는 jQuery 구문을 포함하고 있습니다. × Search results Close "},"tutorial-9-panorama-map.example.html":{"id":"tutorial-9-panorama-map.example.html","title":"Example: 지도와 파노라마 연동하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 지도와 파노라마 연동하기 지도와 파노라마 연동하기 파노라마 지도 연동 예제 파노라마와 지도를 연동하는 예제입니다. × Search results Close "},"tutorial-1-projection-coord-to-pixel.example.html":{"id":"tutorial-1-projection-coord-to-pixel.example.html","title":"Example: 좌표를 픽셀로 변환하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 좌표를 픽셀로 변환하기 좌표를 픽셀로 변환하기 좌표를 픽셀로 변환하여 Bounds를 설정하는 예제 프로젝션을 활용하여 좌표를 픽셀로 변환하여 Bounds 를 확대 / 축소하는 예제입니다. × Search results Close "},"tutorial-tile-index.example.html":{"id":"tutorial-tile-index.example.html","title":"Example: 타일 INDEX 확인하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 타일 INDEX 확인하기 타일 INDEX 확인하기 중심좌표의 타일 인덱스 확인하기 좌표를 타일 인덱스로 변환하는 예제입니다. × Search results Close "},"tutorial-1-visualization-heatmap.example.html":{"id":"tutorial-1-visualization-heatmap.example.html","title":"Example: 열지도 시각화하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 열지도 시각화하기 열지도 시각화하기 열지도 표시하기 열지도를 생성하는 가장 기본적인 예제입니다. 국내에서 지진이 발생한 지점을 나타냅니다. × Search results Close "},"tutorial-2-visualization-dotmap.example.html":{"id":"tutorial-2-visualization-dotmap.example.html","title":"Example: 점지도 시각화하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 점지도 시각화하기 점지도 시각화하기 점지도 표시하기 점지도를 생성하는 가장 기본적인 예제입니다. 국내에서 지진이 발생한 지점을 나타냅니다. × Search results Close "},"tutorial-3-visualization-spectrum.example.html":{"id":"tutorial-3-visualization-spectrum.example.html","title":"Example: 열지도 스펙트럼 변경하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 열지도 스펙트럼 변경하기 열지도 스펙트럼 변경하기 열지도 표시하기 열지도를 생성하는 가장 기본적인 예제입니다. × Search results Close "},"tutorial-4-visualization-heatmap-w.example.html":{"id":"tutorial-4-visualization-heatmap-w.example.html","title":"Example: 열지도 가중치 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 열지도 가중치 사용하기 열지도 가중치 사용하기 가중치 사용하기 가중치를 사용하는 예제입니다. 국내에서 지진이 발생한 지점을 나타내며, 지진의 규모를 가중치로 사용합니다. 열지도 예제와 비교해 보세요. × Search results Close "},"tutorial-5-visualization-dotmap-w.example.html":{"id":"tutorial-5-visualization-dotmap-w.example.html","title":"Example: 점지도 가중치 사용하기","body":" 포크하기 문의하기 네이버 클라우드 플랫폼 바로가기 공지사항 바로가기 Tutorials Examples naver map js api v3 네이버 지도 API 점지도 가중치 사용하기 점지도 가중치 사용하기 가중치 사용하기 가중치를 사용하는 예제입니다. 국내에서 지진이 발생한 지점을 나타내며, 지진의 규모를 가중치로 사용합니다. 점지도 예제와 비교해 보세요. × Search results Close "}}
     </script>
 
     <script type="text/javascript">
diff --git a/sitemap.xml b/sitemap.xml
index d99f74a7..5c2773f6 100755
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -21,7 +21,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/classes.list.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.062Z</lastmod>
+        <lastmod>2022-05-26T07:15:48.300Z</lastmod>
     
     </url>
     <url>
@@ -29,7 +29,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/global.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:36.882Z</lastmod>
+        <lastmod>2022-05-26T07:15:47.763Z</lastmod>
     
     </url>
     <url>
@@ -37,7 +37,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.294Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.263Z</lastmod>
     
     </url>
     <url>
@@ -45,7 +45,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/interfaces.list.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.235Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.050Z</lastmod>
     
     </url>
     <url>
@@ -53,7 +53,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/mixins.list.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.179Z</lastmod>
+        <lastmod>2022-05-26T07:15:48.796Z</lastmod>
     
     </url>
     <url>
@@ -61,7 +61,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/module-drawing.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.311Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.306Z</lastmod>
     
     </url>
     <url>
@@ -69,7 +69,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/module-geocoder.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.322Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.383Z</lastmod>
     
     </url>
     <url>
@@ -77,7 +77,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/module-panorama.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.328Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.397Z</lastmod>
     
     </url>
     <url>
@@ -85,7 +85,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/module-visualization.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.334Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.404Z</lastmod>
     
     </url>
     <url>
@@ -93,7 +93,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/modules.list.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:36.993Z</lastmod>
+        <lastmod>2022-05-26T07:15:48.127Z</lastmod>
     
     </url>
     <url>
@@ -101,7 +101,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/namespaces.list.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.120Z</lastmod>
+        <lastmod>2022-05-26T07:15:48.552Z</lastmod>
     
     </url>
     <url>
@@ -109,7 +109,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.341Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.421Z</lastmod>
     
     </url>
     <url>
@@ -117,7 +117,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.AroundControl.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.372Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.493Z</lastmod>
     
     </url>
     <url>
@@ -125,7 +125,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.BicycleLayer.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.398Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.528Z</lastmod>
     
     </url>
     <url>
@@ -133,7 +133,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.CadastralLayer.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.425Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.564Z</lastmod>
     
     </url>
     <url>
@@ -141,7 +141,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.CanvasMapType.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.473Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.609Z</lastmod>
     
     </url>
     <url>
@@ -149,7 +149,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.CanvasTile.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.543Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.676Z</lastmod>
     
     </url>
     <url>
@@ -157,7 +157,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Circle.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.597Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.731Z</lastmod>
     
     </url>
     <url>
@@ -165,7 +165,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.CustomControl.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.638Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.779Z</lastmod>
     
     </url>
     <url>
@@ -173,7 +173,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Data.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.735Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.868Z</lastmod>
     
     </url>
     <url>
@@ -181,7 +181,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.EPSG3857.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.810Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.067Z</lastmod>
     
     </url>
     <url>
@@ -189,7 +189,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.EPSG3857Coord.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.820Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.116Z</lastmod>
     
     </url>
     <url>
@@ -197,7 +197,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Ellipse.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.794Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.994Z</lastmod>
     
     </url>
     <url>
@@ -205,7 +205,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Event.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.842Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.227Z</lastmod>
     
     </url>
     <url>
@@ -213,7 +213,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Feature.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.867Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.361Z</lastmod>
     
     </url>
     <url>
@@ -221,7 +221,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.FlightSpot.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.879Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.372Z</lastmod>
     
     </url>
     <url>
@@ -229,7 +229,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Geometry.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.893Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.383Z</lastmod>
     
     </url>
     <url>
@@ -237,7 +237,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.GroundOverlay.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.903Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.398Z</lastmod>
     
     </url>
     <url>
@@ -245,7 +245,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.ImageMapType.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.918Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.418Z</lastmod>
     
     </url>
     <url>
@@ -253,7 +253,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.ImageTile.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.938Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.464Z</lastmod>
     
     </url>
     <url>
@@ -261,7 +261,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.InfoWindow.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.956Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.494Z</lastmod>
     
     </url>
     <url>
@@ -269,7 +269,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.KVO.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.975Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.564Z</lastmod>
     
     </url>
     <url>
@@ -277,7 +277,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.KVOArray.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.000Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.628Z</lastmod>
     
     </url>
     <url>
@@ -285,7 +285,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.LabelLayer.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.012Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.682Z</lastmod>
     
     </url>
     <url>
@@ -293,7 +293,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.LatLng.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.027Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.697Z</lastmod>
     
     </url>
     <url>
@@ -301,7 +301,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.LatLngBounds.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.041Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.754Z</lastmod>
     
     </url>
     <url>
@@ -309,7 +309,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Layer.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.053Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.797Z</lastmod>
     
     </url>
     <url>
@@ -317,7 +317,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.LogoControl.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.066Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.826Z</lastmod>
     
     </url>
     <url>
@@ -325,7 +325,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Map.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.101Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.891Z</lastmod>
     
     </url>
     <url>
@@ -333,7 +333,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.MapDataControl.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.123Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.942Z</lastmod>
     
     </url>
     <url>
@@ -341,7 +341,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.MapSystemProjection.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.139Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.970Z</lastmod>
     
     </url>
     <url>
@@ -349,7 +349,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.MapType.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.147Z</lastmod>
+        <lastmod>2022-05-26T07:15:50.998Z</lastmod>
     
     </url>
     <url>
@@ -357,7 +357,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.MapTypeControl.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.158Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.036Z</lastmod>
     
     </url>
     <url>
@@ -365,7 +365,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.MapTypeRegistry.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.168Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.056Z</lastmod>
     
     </url>
     <url>
@@ -373,7 +373,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Marker.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.194Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.107Z</lastmod>
     
     </url>
     <url>
@@ -381,7 +381,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.NaverMapTypeOptions.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.218Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.142Z</lastmod>
     
     </url>
     <url>
@@ -389,7 +389,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.NaverStyleMapTypeOptions.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.233Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.166Z</lastmod>
     
     </url>
     <url>
@@ -397,7 +397,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.OverlayView.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.246Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.202Z</lastmod>
     
     </url>
     <url>
@@ -405,7 +405,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Panorama.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.265Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.299Z</lastmod>
     
     </url>
     <url>
@@ -413,7 +413,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.PanoramaProjection.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.278Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.325Z</lastmod>
     
     </url>
     <url>
@@ -421,7 +421,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Point.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.289Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.337Z</lastmod>
     
     </url>
     <url>
@@ -429,7 +429,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.PointBounds.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.301Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.357Z</lastmod>
     
     </url>
     <url>
@@ -437,7 +437,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Polygon.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.329Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.410Z</lastmod>
     
     </url>
     <url>
@@ -445,7 +445,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Polyline.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.349Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.444Z</lastmod>
     
     </url>
     <url>
@@ -453,7 +453,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Projection.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.364Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.462Z</lastmod>
     
     </url>
     <url>
@@ -461,7 +461,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Rectangle.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.381Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.487Z</lastmod>
     
     </url>
     <url>
@@ -469,7 +469,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.ScaleControl.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.402Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.513Z</lastmod>
     
     </url>
     <url>
@@ -477,7 +477,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Service.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.442Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.622Z</lastmod>
     
     </url>
     <url>
@@ -485,7 +485,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Size.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.465Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.667Z</lastmod>
     
     </url>
     <url>
@@ -493,7 +493,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.StreetLayer.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.477Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.680Z</lastmod>
     
     </url>
     <url>
@@ -501,7 +501,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.TM128.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.530Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.776Z</lastmod>
     
     </url>
     <url>
@@ -509,7 +509,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.TM128Coord.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.546Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.798Z</lastmod>
     
     </url>
     <url>
@@ -517,7 +517,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.Tile.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.509Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.738Z</lastmod>
     
     </url>
     <url>
@@ -525,7 +525,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.TrafficLayer.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.578Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.825Z</lastmod>
     
     </url>
     <url>
@@ -533,7 +533,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.TransCoord.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.618Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.850Z</lastmod>
     
     </url>
     <url>
@@ -541,7 +541,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.UTMK.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.638Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.870Z</lastmod>
     
     </url>
     <url>
@@ -549,7 +549,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.UTMKCoord.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.688Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.923Z</lastmod>
     
     </url>
     <url>
@@ -557,7 +557,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.UTMK_NAVER.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.662Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.890Z</lastmod>
     
     </url>
     <url>
@@ -565,7 +565,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.UTMK_NAVERCoord.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.677Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.903Z</lastmod>
     
     </url>
     <url>
@@ -573,7 +573,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.ZoomControl.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.806Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.006Z</lastmod>
     
     </url>
     <url>
@@ -581,7 +581,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.drawing.DrawingManager.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.773Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.972Z</lastmod>
     
     </url>
     <url>
@@ -589,7 +589,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.drawing.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.751Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.921Z</lastmod>
     
     </url>
     <url>
@@ -597,7 +597,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.360Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.463Z</lastmod>
     
     </url>
     <url>
@@ -605,7 +605,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.visualization.DotMap.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.747Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.959Z</lastmod>
     
     </url>
     <url>
@@ -613,7 +613,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.visualization.HeatMap.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.764Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.975Z</lastmod>
     
     </url>
     <url>
@@ -621,7 +621,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.visualization.SpectrumStyle.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.774Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.983Z</lastmod>
     
     </url>
     <url>
@@ -629,7 +629,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.visualization.WeightedLocation.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.792Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.995Z</lastmod>
     
     </url>
     <url>
@@ -637,7 +637,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/naver.maps.visualization.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.700Z</lastmod>
+        <lastmod>2022-05-26T07:15:51.928Z</lastmod>
     
     </url>
     <url>
@@ -645,7 +645,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-Conceptual-Overview.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.841Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.029Z</lastmod>
     
     </url>
     <url>
@@ -653,7 +653,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-Getting-Client-ID.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.850Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.034Z</lastmod>
     
     </url>
     <url>
@@ -661,7 +661,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-Layers.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.854Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.073Z</lastmod>
     
     </url>
     <url>
@@ -669,7 +669,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-Overlay-Overview.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.857Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.076Z</lastmod>
     
     </url>
     <url>
@@ -677,7 +677,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-bicycle.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.094Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.405Z</lastmod>
     
     </url>
     <url>
@@ -685,7 +685,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-control-simple.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.022Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.323Z</lastmod>
     
     </url>
     <url>
@@ -693,7 +693,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-datalayer.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.034Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.335Z</lastmod>
     
     </url>
     <url>
@@ -701,7 +701,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-drawing-simple.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.069Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.369Z</lastmod>
     
     </url>
     <url>
@@ -709,7 +709,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-event-simple.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.077Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.381Z</lastmod>
     
     </url>
     <url>
@@ -717,7 +717,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-geocoder-transcoord.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.086Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.392Z</lastmod>
     
     </url>
     <url>
@@ -725,7 +725,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-infowindow-simple.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.137Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.462Z</lastmod>
     
     </url>
     <url>
@@ -733,7 +733,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-map-simple.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.105Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.421Z</lastmod>
     
     </url>
     <url>
@@ -741,7 +741,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-maptypes-tilecheck.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.120Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.445Z</lastmod>
     
     </url>
     <url>
@@ -749,7 +749,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-marker-simple.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.144Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.464Z</lastmod>
     
     </url>
     <url>
@@ -757,7 +757,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-panorama-simple.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.200Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.558Z</lastmod>
     
     </url>
     <url>
@@ -765,7 +765,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-projection-coord-to-pixel.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.217Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.582Z</lastmod>
     
     </url>
     <url>
@@ -773,7 +773,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-shape-simple.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.145Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.474Z</lastmod>
     
     </url>
     <url>
@@ -781,7 +781,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-1-visualization-heatmap.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.221Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.586Z</lastmod>
     
     </url>
     <url>
@@ -789,7 +789,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-14-stylemap-overlaytype.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.096Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.407Z</lastmod>
     
     </url>
     <url>
@@ -797,7 +797,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-Abbreviation.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.863Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.087Z</lastmod>
     
     </url>
     <url>
@@ -805,7 +805,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-DataLayer.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.874Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.126Z</lastmod>
     
     </url>
     <url>
@@ -813,7 +813,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-Getting-Started.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.879Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.131Z</lastmod>
     
     </url>
     <url>
@@ -821,7 +821,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-Marker.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.892Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.159Z</lastmod>
     
     </url>
     <url>
@@ -829,7 +829,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-cadastral.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.098Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.409Z</lastmod>
     
     </url>
     <url>
@@ -837,7 +837,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-control-options.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.024Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.325Z</lastmod>
     
     </url>
     <url>
@@ -845,7 +845,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-datalayer-region.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.038Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.340Z</lastmod>
     
     </url>
     <url>
@@ -853,7 +853,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-drawing-options.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.074Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.376Z</lastmod>
     
     </url>
     <url>
@@ -861,7 +861,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-event-kvo.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.079Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.383Z</lastmod>
     
     </url>
     <url>
@@ -869,7 +869,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-map-options.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.107Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.424Z</lastmod>
     
     </url>
     <url>
@@ -877,7 +877,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-maptypes-imagemaptype.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.122Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.447Z</lastmod>
     
     </url>
     <url>
@@ -885,7 +885,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-panorama-resize.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.202Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.560Z</lastmod>
     
     </url>
     <url>
@@ -893,7 +893,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-2-visualization-dotmap.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.223Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.589Z</lastmod>
     
     </url>
     <url>
@@ -901,7 +901,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-InfoWindow.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.897Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.166Z</lastmod>
     
     </url>
     <url>
@@ -909,7 +909,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-KVO-Mechanism.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.901Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.170Z</lastmod>
     
     </url>
     <url>
@@ -917,7 +917,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-control-positioning.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.028Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.330Z</lastmod>
     
     </url>
     <url>
@@ -925,7 +925,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-datalayer-kml.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.042Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.343Z</lastmod>
     
     </url>
     <url>
@@ -933,7 +933,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-drawing-restore.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.076Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.379Z</lastmod>
     
     </url>
     <url>
@@ -941,7 +941,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-event-overlay.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.082Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.385Z</lastmod>
     
     </url>
     <url>
@@ -949,7 +949,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-geocoder-geocoding.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.093Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.394Z</lastmod>
     
     </url>
     <url>
@@ -957,7 +957,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-map-types.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.109Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.430Z</lastmod>
     
     </url>
     <url>
@@ -965,7 +965,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-maptypes-basic.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.124Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.449Z</lastmod>
     
     </url>
     <url>
@@ -973,7 +973,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-marker-image-icon.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.147Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.476Z</lastmod>
     
     </url>
     <url>
@@ -981,7 +981,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-panorama-event.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.204Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.563Z</lastmod>
     
     </url>
     <url>
@@ -989,7 +989,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-polygon-simple.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.149Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.478Z</lastmod>
     
     </url>
     <url>
@@ -997,7 +997,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-traffic.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.100Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.411Z</lastmod>
     
     </url>
     <url>
@@ -1005,7 +1005,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-3-visualization-spectrum.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.224Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.591Z</lastmod>
     
     </url>
     <url>
@@ -1013,7 +1013,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-Shape.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.914Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.183Z</lastmod>
     
     </url>
     <url>
@@ -1021,7 +1021,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-Submodules.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.919Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.188Z</lastmod>
     
     </url>
     <url>
@@ -1029,7 +1029,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-control-custom-p1.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.031Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.332Z</lastmod>
     
     </url>
     <url>
@@ -1037,7 +1037,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-datalayer-gpx.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.044Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.351Z</lastmod>
     
     </url>
     <url>
@@ -1045,7 +1045,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-event-test.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.084Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.390Z</lastmod>
     
     </url>
     <url>
@@ -1053,7 +1053,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-map-bounds.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.111Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.432Z</lastmod>
     
     </url>
     <url>
@@ -1061,7 +1061,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-maptypes-dynamic.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.126Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.451Z</lastmod>
     
     </url>
     <url>
@@ -1069,7 +1069,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-marker-sprite-image-icon.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.150Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.480Z</lastmod>
     
     </url>
     <url>
@@ -1077,7 +1077,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-panorama-image-marker.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.206Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.565Z</lastmod>
     
     </url>
     <url>
@@ -1085,7 +1085,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-polygon-hole.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.152Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.482Z</lastmod>
     
     </url>
     <url>
@@ -1093,7 +1093,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-street.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.102Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.414Z</lastmod>
     
     </url>
     <url>
@@ -1101,7 +1101,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-4-visualization-heatmap-w.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.226Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.594Z</lastmod>
     
     </url>
     <url>
@@ -1109,7 +1109,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-5-GroundOverlay.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.922Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.191Z</lastmod>
     
     </url>
     <url>
@@ -1117,7 +1117,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-5-custom.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.104Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.418Z</lastmod>
     
     </url>
     <url>
@@ -1125,7 +1125,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-5-mantle-properties.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.059Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.357Z</lastmod>
     
     </url>
     <url>
@@ -1133,7 +1133,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-5-map-moves.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.113Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.435Z</lastmod>
     
     </url>
     <url>
@@ -1141,7 +1141,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-5-maptypes-naver_osm.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.128Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.453Z</lastmod>
     
     </url>
     <url>
@@ -1149,7 +1149,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-5-marker-html-icon.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.154Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.484Z</lastmod>
     
     </url>
     <url>
@@ -1157,7 +1157,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-5-panorama-html-infowindow.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.208Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.567Z</lastmod>
     
     </url>
     <url>
@@ -1165,7 +1165,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-5-polygon-options.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.156Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.488Z</lastmod>
     
     </url>
     <url>
@@ -1173,7 +1173,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-5-visualization-dotmap-w.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.228Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.596Z</lastmod>
     
     </url>
     <url>
@@ -1181,7 +1181,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-6-CustomOverlay.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.927Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.200Z</lastmod>
     
     </url>
     <url>
@@ -1189,7 +1189,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-6-map-geolocation.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.115Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.438Z</lastmod>
     
     </url>
     <url>
@@ -1197,7 +1197,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-6-marker-symbol-icon.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.158Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.501Z</lastmod>
     
     </url>
     <url>
@@ -1205,7 +1205,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-6-panorama-zoomcontrol.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.210Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.569Z</lastmod>
     
     </url>
     <url>
@@ -1213,7 +1213,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-6-polyline-options.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.160Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.507Z</lastmod>
     
     </url>
     <url>
@@ -1221,7 +1221,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-7-map-fullsize-minimap.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.116Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.441Z</lastmod>
     
     </url>
     <url>
@@ -1229,7 +1229,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-7-maptypes-the-hunters.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.131Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.456Z</lastmod>
     
     </url>
     <url>
@@ -1237,7 +1237,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-7-marker-retina.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.161Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.509Z</lastmod>
     
     </url>
     <url>
@@ -1245,7 +1245,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-7-panorama-aroundcontrol.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.212Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.572Z</lastmod>
     
     </url>
     <url>
@@ -1253,7 +1253,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-8-map-maxbounds.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.118Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.442Z</lastmod>
     
     </url>
     <url>
@@ -1261,7 +1261,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-8-maptypes-greenfactory.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.133Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.458Z</lastmod>
     
     </url>
     <url>
@@ -1269,7 +1269,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-8-marker-retina-sprite.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.163Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.511Z</lastmod>
     
     </url>
     <url>
@@ -1277,7 +1277,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-8-panorama-flightspot.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.213Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.578Z</lastmod>
     
     </url>
     <url>
@@ -1285,7 +1285,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-9-maptypes-canvasmaptype.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.135Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.460Z</lastmod>
     
     </url>
     <url>
@@ -1293,7 +1293,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-9-marker-position.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.165Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.513Z</lastmod>
     
     </url>
     <url>
@@ -1301,7 +1301,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-9-panorama-map.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.215Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.580Z</lastmod>
     
     </url>
     <url>
@@ -1309,7 +1309,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Controls.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.930Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.205Z</lastmod>
     
     </url>
     <url>
@@ -1317,7 +1317,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Custom-Control.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.934Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.208Z</lastmod>
     
     </url>
     <url>
@@ -1325,7 +1325,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-DOM-Event.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.937Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.212Z</lastmod>
     
     </url>
     <url>
@@ -1333,7 +1333,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Drawing.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.942Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.217Z</lastmod>
     
     </url>
     <url>
@@ -1341,7 +1341,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Geocoder-Geocoding.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.954Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.241Z</lastmod>
     
     </url>
     <url>
@@ -1349,7 +1349,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Geocoder.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.957Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.246Z</lastmod>
     
     </url>
     <url>
@@ -1357,7 +1357,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-KVO-State-Changes.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.961Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.253Z</lastmod>
     
     </url>
     <url>
@@ -1365,7 +1365,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Map.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.964Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.258Z</lastmod>
     
     </url>
     <url>
@@ -1373,7 +1373,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-MapTypes.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.979Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.274Z</lastmod>
     
     </url>
     <url>
@@ -1381,7 +1381,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Migrate-To-StyleMap.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.985Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.282Z</lastmod>
     
     </url>
     <url>
@@ -1389,7 +1389,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Panorama.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.990Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.288Z</lastmod>
     
     </url>
     <url>
@@ -1397,7 +1397,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Projection.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.993Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.292Z</lastmod>
     
     </url>
     <url>
@@ -1405,7 +1405,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-StyleMap-Custom-OverlayType.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:38.997Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.296Z</lastmod>
     
     </url>
     <url>
@@ -1413,7 +1413,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-UI-Event.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.007Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.307Z</lastmod>
     
     </url>
     <url>
@@ -1421,7 +1421,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-Visualization.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.011Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.312Z</lastmod>
     
     </url>
     <url>
@@ -1429,7 +1429,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-custom-overlay.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.166Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.515Z</lastmod>
     
     </url>
     <url>
@@ -1437,7 +1437,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-digest.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.067Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.366Z</lastmod>
     
     </url>
     <url>
@@ -1445,7 +1445,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-ground-overlay.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.168Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.517Z</lastmod>
     
     </url>
     <url>
@@ -1453,7 +1453,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-infowindow-options.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.170Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.519Z</lastmod>
     
     </url>
     <url>
@@ -1461,7 +1461,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-marker-animation.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.172Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.524Z</lastmod>
     
     </url>
     <url>
@@ -1469,7 +1469,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-marker-cluster.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.174Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.527Z</lastmod>
     
     </url>
     <url>
@@ -1477,7 +1477,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-marker-intersect.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.177Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.530Z</lastmod>
     
     </url>
     <url>
@@ -1485,7 +1485,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-marker-shape.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.178Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.532Z</lastmod>
     
     </url>
     <url>
@@ -1493,7 +1493,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-marker-viewport.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.180Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.535Z</lastmod>
     
     </url>
     <url>
@@ -1501,7 +1501,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-marker-viewportevents.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.182Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.538Z</lastmod>
     
     </url>
     <url>
@@ -1509,7 +1509,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-pointing-icon.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.184Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.541Z</lastmod>
     
     </url>
     <url>
@@ -1517,7 +1517,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-polygon-dynamic.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.186Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.543Z</lastmod>
     
     </url>
     <url>
@@ -1525,7 +1525,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-polyline-dynamic.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.193Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.544Z</lastmod>
     
     </url>
     <url>
@@ -1533,7 +1533,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-polyline-route.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.195Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.547Z</lastmod>
     
     </url>
     <url>
@@ -1541,7 +1541,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-shape-measures.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.197Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.556Z</lastmod>
     
     </url>
     <url>
@@ -1549,7 +1549,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorial-tile-index.example.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:39.219Z</lastmod>
+        <lastmod>2022-05-26T07:15:52.584Z</lastmod>
     
     </url>
     <url>
@@ -1557,7 +1557,7 @@
         <loc>https://github.com/navermaps/maps.js.ncp/docs/tutorials.list.html</loc>
     
         
-        <lastmod>2022-05-12T08:27:37.290Z</lastmod>
+        <lastmod>2022-05-26T07:15:49.243Z</lastmod>
     
     </url>
 </urlset>
\ No newline at end of file