index.html
3.28 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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=af5d8081362feb3d8c7f7f5a242af361&libraries=clusterer"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.4010573010236, 126.97627592909265), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
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 resturant_location = [
[37.402191246171625, 126.97679939968889,'<div style="padding:5px;">my location!</div>'], //여유가 된다면 파이썬 tele_chatbot_code의 resturant_location을 txt파일로 만들어서 파싱한 후 연결하기
[37.400679329216, 126.975117015358,'<div style="padding:5px;">통나무집춘천닭갈비!</div>'],
[37.4015081640269, 126.974624316623,'<div style="padding:5px;">2.5닭갈비</div>'],
[37.3925702184301, 126.975530754058,'<div style="padding:5px;">박가네춘천닭갈비</div>'],
[37.4072019010901, 126.971491422795,'<div style="padding:5px;">오투닭갈비 안양동편점</div>'],
[37.4008234217854, 126.974782664092,'<div style="padding:5px;">뚝섬 일호돼지갈비</div>'],
[37.3990432726191, 126.962256206429,'<div style="padding:5px;">아라숯불닭갈비&쭈꾸미 평촌점</div>'],
[37.4010635562687, 126.969135544977,'<div style="padding:5px;">홍춘천치즈닭갈비 관양점</div>'],
[37.399328060253, 126.976400439734,'<div style="padding:5px;">백암집</div>'],
[37.4013678110587, 126.975604693829,'<div style="padding:5px;">와라와라 인덕원점</div>']
[37.4027305288161, 126.963135314606,'<div style="padding:5px;">춘천닭갈비</div>']
]
var markers = [];
for (var i =0; i < resturant_location.length; i++)
{
// 지도에 마커를 생성하고 표시한다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(resturant_location[i][0],resturant_location[i][1]), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : resturant_location[i][2]
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
markers.push(marker);
}
clusterer.addMarkers(markers);
</script>
</body>
</html>