Showing
1 changed file
with
66 additions
and
0 deletions
index.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | +<head> | ||
4 | + <meta charset="utf-8"> | ||
5 | + <title>다음 지도 API</title> | ||
6 | +</head> | ||
7 | +<body> | ||
8 | + <div id="map" style="width:100%;height:100vh;"></div> | ||
9 | + | ||
10 | + <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=af5d8081362feb3d8c7f7f5a242af361&libraries=clusterer"></script> | ||
11 | + <script> | ||
12 | + var mapContainer = document.getElementById('map'), // 지도를 표시할 div | ||
13 | + mapOption = { | ||
14 | + center: new kakao.maps.LatLng(37.4010573010236, 126.97627592909265), // 지도의 중심좌표 | ||
15 | + level: 4, // 지도의 확대 레벨 | ||
16 | + mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류 | ||
17 | + }; | ||
18 | + | ||
19 | + // 지도를 생성한다 | ||
20 | + var map = new kakao.maps.Map(mapContainer, mapOption); | ||
21 | + | ||
22 | + // 마커 클러스터러를 생성합니다 | ||
23 | + var clusterer = new kakao.maps.MarkerClusterer({ | ||
24 | + map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 | ||
25 | + averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 | ||
26 | + minLevel: 10 // 클러스터 할 최소 지도 레벨 | ||
27 | + }); | ||
28 | + | ||
29 | + var resturant_location = [ | ||
30 | + [37.402191246171625, 126.97679939968889,'<div style="padding:5px;">my location!</div>'], //여유가 된다면 파이썬 tele_chatbot_code의 resturant_location을 txt파일로 만들어서 파싱한 후 연결하기 | ||
31 | + [37.400679329216, 126.975117015358,'<div style="padding:5px;">통나무집춘천닭갈비!</div>'], | ||
32 | + [37.4015081640269, 126.974624316623,'<div style="padding:5px;">2.5닭갈비</div>'], | ||
33 | + [37.3925702184301, 126.975530754058,'<div style="padding:5px;">박가네춘천닭갈비</div>'], | ||
34 | + [37.4072019010901, 126.971491422795,'<div style="padding:5px;">오투닭갈비 안양동편점</div>'], | ||
35 | + [37.4008234217854, 126.974782664092,'<div style="padding:5px;">뚝섬 일호돼지갈비</div>'], | ||
36 | + [37.3990432726191, 126.962256206429,'<div style="padding:5px;">아라숯불닭갈비&쭈꾸미 평촌점</div>'], | ||
37 | + [37.4010635562687, 126.969135544977,'<div style="padding:5px;">홍춘천치즈닭갈비 관양점</div>'], | ||
38 | + [37.399328060253, 126.976400439734,'<div style="padding:5px;">백암집</div>'], | ||
39 | + [37.4013678110587, 126.975604693829,'<div style="padding:5px;">와라와라 인덕원점</div>'] | ||
40 | + [37.4027305288161, 126.963135314606,'<div style="padding:5px;">춘천닭갈비</div>'] | ||
41 | + ] | ||
42 | + | ||
43 | + var markers = []; | ||
44 | + | ||
45 | + | ||
46 | + for (var i =0; i < resturant_location.length; i++) | ||
47 | + { | ||
48 | + // 지도에 마커를 생성하고 표시한다 | ||
49 | + var marker = new kakao.maps.Marker({ | ||
50 | + position: new kakao.maps.LatLng(resturant_location[i][0],resturant_location[i][1]), // 마커의 좌표 | ||
51 | + map: map // 마커를 표시할 지도 객체 | ||
52 | + }); | ||
53 | + | ||
54 | + // 인포윈도우를 생성합니다 | ||
55 | + var infowindow = new kakao.maps.InfoWindow({ | ||
56 | + content : resturant_location[i][2] | ||
57 | + }); | ||
58 | + // 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다 | ||
59 | + infowindow.open(map, marker); | ||
60 | + markers.push(marker); | ||
61 | + } | ||
62 | + clusterer.addMarkers(markers); | ||
63 | + | ||
64 | + </script> | ||
65 | +</body> | ||
66 | +</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment