Showing
1 changed file
with
86 additions
and
0 deletions
index.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | + | ||
4 | +<head> | ||
5 | + <meta charset="utf-8"> | ||
6 | + <title>다음 지도 API</title> | ||
7 | +</head> | ||
8 | + | ||
9 | +<body> | ||
10 | + <div id="map" style="width:100%;height:100vh;"></div> | ||
11 | + | ||
12 | + <script | ||
13 | + src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=9e4f94c8089b558cf9d25a267a86eea9&libraries=clusterer"></script> | ||
14 | + <script> | ||
15 | + var mapContainer = document.getElementById('map'), // 지도를 표시할 div | ||
16 | + mapOption = { | ||
17 | + center: new kakao.maps.LatLng(37.350040, 127.108901), // 지도의 중심좌표 | ||
18 | + level: 3, // 지도의 확대 레벨 | ||
19 | + mapTypeId: kakao.maps.MapTypeId.ROADMAP // 지도종류 | ||
20 | + }; | ||
21 | + | ||
22 | + // 지도를 생성한다 | ||
23 | + var map = new kakao.maps.Map(mapContainer, mapOption); | ||
24 | + | ||
25 | + // 마커 클러스터러를 생성합니다 | ||
26 | + var clusterer = new kakao.maps.MarkerClusterer({ | ||
27 | + map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 | ||
28 | + averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 | ||
29 | + minLevel: 10 // 클러스터 할 최소 지도 레벨 | ||
30 | + }); | ||
31 | + var data = [ | ||
32 | + [37.350040, 127.108901, '<div style="padding: 5px;">Hello World!</div>'], | ||
33 | + [37.366090, 127.108056, '<div style="padding: 5px;">Hello World!</div>'], | ||
34 | + [37.378040, 127.108245, '<div style="padding: 5px;">Hello World!</div>'] | ||
35 | + ] | ||
36 | + | ||
37 | + var markers = []; | ||
38 | + | ||
39 | + for (var i = 0; i < data.length; i++) { | ||
40 | + //지도에 마커를 생성하고 표시한다 | ||
41 | + var marker = new kakao.maps.Marker({ | ||
42 | + position: new kakao.maps.LatLng(data[i][0], data[i][1]), | ||
43 | + map: map // 마커를 표시할 지도 객체 | ||
44 | + }); | ||
45 | + | ||
46 | + var iwContent = data[i][2], // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다 | ||
47 | + iwPosition = new kakao.maps.LatLng(data[i][0], data[i][1]), //인포윈도우 표시 위치입니다 | ||
48 | + iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다 | ||
49 | + | ||
50 | + // 인포윈도우를 생성하고 지도에 표시합니다 | ||
51 | + var infowindow = new kakao.maps.InfoWindow({ | ||
52 | + map: map, // 인포윈도우가 표시될 지도 | ||
53 | + position: iwPosition, | ||
54 | + content: iwContent, | ||
55 | + removable: iwRemoveable | ||
56 | + }); | ||
57 | + | ||
58 | + infowindow.open(map, marker); | ||
59 | + markers.push(marker); | ||
60 | + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow)); | ||
61 | + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow)); | ||
62 | + } | ||
63 | + | ||
64 | + // 클러스터러에 마커들을 추가합니다 | ||
65 | + clusterer.addMarkers(markers); | ||
66 | + | ||
67 | + function makeOverListener(map, marker, infowindow) { | ||
68 | + return function () { | ||
69 | + infowindow.open(map, marker); | ||
70 | + }; | ||
71 | + } | ||
72 | + | ||
73 | + // 인포윈도우를 닫는 클로저를 만드는 함수입니다 | ||
74 | + function makeOutListener(infowindow) { | ||
75 | + return function () { | ||
76 | + infowindow.close(); | ||
77 | + }; | ||
78 | + } | ||
79 | + | ||
80 | + | ||
81 | +// 아래 코드는 인포윈도우를 지도에서 제거합니다 | ||
82 | +// infowindow.close(); | ||
83 | + </script> | ||
84 | +</body> | ||
85 | + | ||
86 | +</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment