-
Notifications
You must be signed in to change notification settings - Fork 63
/
Copy pathindex.html
264 lines (253 loc) · 13.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="ko">
<head>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="/favicon.ico" rel="icon" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta content="origin-when-cross-origin" name="referrer">
<title>네이버 지도 API v3</title>
<link rel="manifest" href="https://navermaps.github.io/map.js.ncp/manifest.json">
<link rel="apple-touch-icon" sizes="200x200" href="https://navermaps.github.io/maps.js.ncp/docs/img/logo_200x200.png">
<link rel="canonical" href="https://navermaps.github.io/maps.js.ncp">
<meta name="description" content="네이버 지도 API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="NAVER Maps API v3 바로가기">
<meta property="og:title" content="NAVER Maps API v3">
<meta property="og:description" content="NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.">
<meta property="og:image" content="https://navermaps.github.io/maps.js.ncp/docs/img/NAVERMaps.png">
<meta property="og:url" content="https://navermaps.github.io/maps.js.ncp/index.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="NAVER Maps API v3">
<meta name="twitter:description" content="NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.">
<meta name="twitter:image" content="https://navermaps.github.io/maps.js.ncp/docs/img/NAVERMaps.png">
<meta name="twitter:url" content="https://navermaps.github.io/maps.js.ncp/index.html">
<link rel="stylesheet" type="text/css" href="./docs/css/main.css">
</head>
<body>
<div id="wrap">
<!-- header -->
<div id="header">
<div class="inner_header">
<h1><a href="./index.html"><span class="logo">NAVER Maps</span><span class="sub_logo">Java Script API V3</span></a></h1>
<a id="btn-header-menu" href="#" class="btn_menu">메뉴</a>
<div id="header-menu" class="header_menu">
<ul>
<li><a href="./docs"><span>Documents</span></a></li>
<li><a href="./docs/tutorial-digest.example.html"><span>Examples</span></a></li>
<li><a href="https://www.ncloud.com/support/notice/all" target="_blank"><span>Notice</span></a></li>
</ul>
</div>
</div>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<div class="ly_ribbon">
<a href="https://github.com/navermaps/maps.js.ncp" target="_blank">fork me on github</a>
</div>
<div class="spot">
<div class="inner_spot">
<h2><span>naver maps javascript api for mobile & web</span></h2>
<p class="blind">네이버 지도 api를 활용해 자신의 사이트에 맞는 지도를 만들어 보세요.</p>
<a href="./docs/tutorial-2-Getting-Started.html" target="_blank" class="btn_start"><span class="blind">시작하기</span></a>
</div>
</div>
<div class="section">
<div class="inner_section interaction">
<div class="api_area">
<div id="map" class="api_position"></div>
</div>
<div class="info_area">
<p>부드럽고, 빠른 인터렉션, 데스크탑은 물론 모바일 환경까지 최적화된 인터랙션을 제공할 수 있습니다.</p>
</div>
</div>
<div class="inner_section panorama">
<div class="api_area">
<div id="panorama" class="api_position"></div>
</div>
<div class="info_area">
<p>360도 파노라마, 지정된 도로부터 국내 주요 장소까지 360도 파노라마를 쉽게 이용할 수 있습니다.</p>
</div>
</div>
</div>
<div class="section2">
<div class="inner_section2">
<h3>자유로운 표현</h3>
<p class="blind">편리해진 인터페이스를 이용해 원하는 데이터를 지도에 쉽게 표현할 수 있습니다.</p>
<div class="interface_list">
<ul>
<li class="interface">
<a href="./docs/tutorial-2-cadastral.example.html" class="vlist one" target="_blank">
<div class="info_area">
<p class="hashtag">지적편집도</p>
</div>
</a>
</li>
<li class="interface02">
<a href="./docs/tutorial-3-traffic.example.html" class="vlist two" target="_blank">
<div class="info_area">
<p class="hashtag">교통상황</p>
</div>
</a>
</li>
<li class="interface03">
<a href="./docs/tutorial-3-event-overlay.example.html" class="vlist three" target="_blank">
<div class="info_area">
<p class="hashtag">도형</p>
</div>
</a>
</li>
<li class="interface04">
<a href="./docs/tutorial-infowindow-options.example.html" class="vlist2 one" target="_blank">
<div class="info_area">
<p class="hashtag">마커&인포윈도우</p>
</div>
</a>
</li>
<li class="interface05">
<a href="./docs/tutorial-6-panorama-zoomcontrol.example.html" class="vlist2 two" target="_blank">
<div class="info_area">
<p class="hashtag">파노라마</p>
</div>
</a>
</li>
<li class="interface06">
<a href="./docs/tutorial-2-datalayer-region.example.html" class="vlist3 one" target="_blank">
<div class="info_area">
<p class="hashtag">데이터레이어</p>
</div>
</a>
</li>
<li class="interface07">
<a href="./docs/tutorial-8-maptypes-greenfactory.example.html" class="vlist3 two" target="_blank">
<div class="info_area">
<p class="hashtag">사용자 지정 타일</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="section3">
<div class="inner_section3">
<h3 class="blind">쇼케이스</h3>
<p class="blind">네이버의 다양한 서비스에서 네이버 지도 API를 사용하고 있습니다. 어떻게 사용하는지 살펴보세요.</p>
<div class="api_use_list">
<ul>
<li><a href="./showcase.html#naver_land" class="land" target="_blank">네이버 부동산</a></li>
<li><a href="./showcase.html#naver_map" class="map" target="_blank">네이버 지도</a></li>
<li><a href="./showcase.html#naver_modoo" class="modoo" target="_blank">네이버 modoo</a></li>
<li><a href="./showcase.html#naver_post" class="post" target="_blank">네이버 포스트</a></li>
</ul>
</div>
<div class="api_use_srvice">
<ul>
<li class="land"><a href="./showcase.html#naver_land">네이버 부동산</a></li>
<li class="map"><a href="./showcase.html#naver_map">네이버 지도</a></li>
<li class="modoo"><a href="./showcase.html#naver_modoo">네이버 modoo</a></li>
<li class="post"><a href="./showcase.html#naver_post">네이버 포스트</a></li>
</ul>
</div>
</div>
</div>
<div class="section4">
<div class="inner_section4">
<h3 class="blind">함께 사용할 수 있는 지도 API</h3>
<p class="blind">다양한 데이터를 지도 서비스와 결합해 위치 기반 서비스를 만들어 보세요.</p>
<dl>
<dt><a href="https://apidocs.ncloud.com/ko/ai-naver/maps_geocoding/geocode/" target="_blank">주소 좌표 변환</a></dt>
<dd class="blind">주소를 입력하면 좌표 값을 알 수 있습니다. 반대로 좌표 값을 입력하면 해당 위치의 주소를 알 수 있습니다. 주소는 도로명 주소도 지원합니다.</dd>
</dl>
</div>
</div>
<div class="section5">
<div class="inner_section5">
<h3><span class="blind">웹 브라우져 호환성</span></h3>
<p class="blind">다양한 플랫폼의 웹 브라우저에서 네이버 지도를 사용할 수 있습니다.</p>
<div class="web_spec">
<h4 class="blind">web browser</h4>
<dl class="blind">
<dt>pc</dt>
<dd>
<ul>
<li>Exploer 8+</li>
<li>Chrome</li>
<li>Safari 5+</li>
<li>Firefox</li>
</ul>
</dd>
<dt>mobile</dt>
<dd>
<ul>
<li>Android 3+</li>
<li>iOS 7+</li>
<li>Chrome</li>
<li>Safari 5+</li>
<li>Firefox</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="section6">
<div class="bg_layer"></div>
<div class="inner_section6">
<h3 class="blind">Hello, NAVER Maps API</h3>
<p class="blind">클라이언트 ID를 등록하고, 지금 바로 사용해 보세요.</p>
<a href="https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-Getting-Client-ID.html" class="btn_id" target="_blank"><span class="blind">클라이언트 ID 발급받기</span></a>
<div class="map_api_info">
<ul>
<li><a href="./docs" target="_blank" class="go reference"><span class="blind">기술문서 - 튜토리얼,API레퍼런스 등 유용한 기술문서를 읽어 보세요.</span></a></li>
<li><a href="https://github.com/navermaps/maps.js.ncp" target="_blank" class="go github"><span class="blind">GitHub - 예제 코드를 직접 사용해 보세요</span></a></li>
<li><a href="https://www.ncloud.com/support/question/service" target="_blank" class="go issue"><span class="blind">Issue - 버그는 신고해 주시고, 궁금한 것은 바로 문의해 주세요</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- container -->
<!-- footer -->
<div id="footer">
<div class="inner_footer">
<div class="footer_copright">
<a href="https://developers.naver.com" target="_blank">NAVER Developers</a>
<span>Copyright ⓒ NAVER Corp. All Rights Reserved.</span>
</div>
</div>
</div>
<!-- //footer -->
</div>
<!-- ncpClientId는 등록 환경에 따라 일반(ncpClientId), 공공(govClientId), 금융(finClientId)으로 나뉩니다. 사용하는 환경에 따라 키 이름을 변경하여 사용하세요. 참고: clientId(네이버 개발자 센터)는 지원 종료 -->
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=83bfuniegk&submodules=panorama,geocoder,drawing,visualization"></script>
<script type="text/javascript" src="./docs/js/main.js"></script>
<script type="text/javascript" src="https://wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
app.Animation.speed = 0.5;
app.boot('map', 'panorama');
if (!wcs_add) var wcs_add = {};
wcs_add["wa"] = "dcca09e8c0dc78";
wcs_do();
(function() {
var headerMenu = document.getElementById('header-menu'),
headerMenuBtn = document.getElementById('btn-header-menu');
headerMenuBtn.onclick = function(e) {
e.returnValue = false;
if (e.preventDefault) {
e.preventDefault();
}
var classNames = headerMenu.className;
if (classNames.indexOf('on') === -1) {
classNames += ' on';
} else {
classNames = 'header_menu';
}
headerMenu.className = classNames;
return false;
};
})();
</script>
</body>
</html>