이준용

index.html

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