Toggle navigation
Toggle navigation
This project
Loading...
Sign in
김재웅
/
TFT
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hellowhales
2021-11-15 18:16:50 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
6886985bb0ae590b617b760dbe1e792d0e967e99
6886985b
1 parent
b7dd0b18
Add MapAPI template
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
48 additions
and
0 deletions
src/index.html
src/index.html
0 → 100644
View file @
6886985
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<script
src=
"http://code.jquery.com/jquery-3.6.0.min.js"
></script>
<title>
다음 지도 API
</title>
</head>
<body>
<div
id=
"map"
style=
"width:100%;height:100vh;"
></div>
<script
src=
"https://dapi.kakao.com/v2/maps/sdk.js?appkey=9bb9a71480b6cd2d7fa98fb256053acf"
></script>
<script>
var
url
=
"http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json"
;
$
.
getJSON
(
url
,
function
(
data
){
console
.
log
(
data
);
var
mapContainer
=
document
.
getElementById
(
'map'
),
// 지도를 표시할 div
mapOption
=
{
center
:
new
kakao
.
maps
.
LatLng
(
37.56682
,
126.97865
),
// 지도의 중심좌표
level
:
10
,
// 지도의 확대 레벨
mapTypeId
:
kakao
.
maps
.
MapTypeId
.
ROADMAP
// 지도종류
};
var
markers
=
[];
// 지도를 생성한다
var
map
=
new
kakao
.
maps
.
Map
(
mapContainer
,
mapOption
);
for
(
var
i
=
0
;
i
<
data
.
response
.
body
.
items
.
item
.
length
;
i
++
){
// 지도에 마커를 생성하고 표시한다
var
marker
=
new
kakao
.
maps
.
Marker
({
position
:
new
kakao
.
maps
.
LatLng
(
data
.
response
.
body
.
items
.
item
[
i
].
mapy
,
data
.
response
.
body
.
items
.
item
[
i
].
mapx
),
// 마커의 좌표
map
:
map
// 마커를 표시할 지도 객체
});
markers
.
push
(
marker
);
// 마커 위에 표시할 인포윈도우를 생성한다
};
for
(
var
i
=
0
;
i
<
9
;
i
++
){
// 왜 9까지 밖에 안되누 ㅠㅠ
var
infowindow
=
new
kakao
.
maps
.
InfoWindow
({
content
:
'<div style="padding:5px;">'
+
data
.
response
.
body
.
items
.
item
[
i
].
title
+
'</div>'
// 인포윈도우에 표시할 내용
});
infowindow
.
open
(
map
,
markers
[
i
]);
}
})
</script>
</body>
</html>
\ No newline at end of file
Please
register
or
login
to post a comment