index.html
4.78 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>다음 지도 API</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=9e4f94c8089b558cf9d25a267a86eea9&libraries=clusterer"></script>
</head>
<body>
<div id="map" style="width:100%;height:100vh;"></div>
<script>
$.get("https://openapi.gg.go.kr/RegionMnyFacltStus?Type=json", function (data) {
alert("Data: " + data);
});
var myJson = "{\"lat\":37, \"lng\":130}";
var parsedJson = JSON.parse(myJson);
console.log("originalJson: " + myJson);
console.log(parsedJson);
// document.querySelector('#find-me').addEventListener('click', geoFindMe);
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('Your current position is:');
console.log('Latitude : ' + crd.latitude);
console.log('Longitude: ' + crd.longitude);
console.log('More or less ' + crd.accuracy + ' meters.');
setLocation(crd.latitude, crd.longitude);
};
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
function setLocation(lat, lng) {
// 이동할 위도 경도 위치를 생성합니다
var moveLatLon = new kakao.maps.LatLng(lat, lng);
// 지도 중심을 이동 시킵니다
map.setCenter(moveLatLon);
}
console.log(navigator.geolocation.getCurrentPosition(success, error, options));
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.350040, 127.108901), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
mapTypeId: kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
var data = [
[37.350040, 127.108901, '<div style="padding: 5px;">Hello World!</div>'],
[37.366090, 127.108056, '<div style="padding: 5px;">Hello World!</div>'],
[37.378040, 127.108245, '<div style="padding: 5px;">Hello World!</div>']
]
var markers = [];
for (var i = 0; i < data.length; i++) {
//지도에 마커를 생성하고 표시한다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(data[i][0], data[i][1]),
map: map // 마커를 표시할 지도 객체
});
var iwContent = data[i][2], // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new kakao.maps.LatLng(data[i][0], data[i][1]), //인포윈도우 표시 위치입니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성하고 지도에 표시합니다
var infowindow = new kakao.maps.InfoWindow({
map: map, // 인포윈도우가 표시될 지도
position: iwPosition,
content: iwContent,
removable: iwRemoveable
});
infowindow.open(map, marker);
markers.push(marker);
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
function makeOverListener(map, marker, infowindow) {
return function () {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function () {
infowindow.close();
};
}
// 아래 코드는 인포윈도우를 지도에서 제거합니다
// infowindow.close();
</script>
</body>
</html>