이준용 / oss_term_project

Go to a project
Toggle navigation Toggle navigation pinning
이준용
4638e91a 1 parent 345a33f4

경기도 지역화폐 사용가능편의점 지도에 표시

Inline Side-by-side
Showing 1 changed file with 10 additions and 57 deletions
...@@ -5,22 +5,14 @@ ...@@ -5,22 +5,14 @@
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <title>다음 지도 API</title> 6 <title>다음 지도 API</title>
7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
8 - <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=9e4f94c8089b558cf9d25a267a86eea9&libraries=clusterer"></script> 8 + <script
9 + src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=9e4f94c8089b558cf9d25a267a86eea9&libraries=clusterer"></script>
9 </head> 10 </head>
10 11
11 <body> 12 <body>
12 <div id="map" style="width:100%;height:100vh;"></div> 13 <div id="map" style="width:100%;height:100vh;"></div>
13 14
14 <script> 15 <script>
15 - $.get("https://openapi.gg.go.kr/RegionMnyFacltStus?Type=json", function (data) {
16 - alert("Data: " + data);
17 - });
18 - var myJson = "{\"lat\":37, \"lng\":130}";
19 - var parsedJson = JSON.parse(myJson);
20 -
21 - console.log("originalJson: " + myJson);
22 - console.log(parsedJson);
23 -
24 // document.querySelector('#find-me').addEventListener('click', geoFindMe); 16 // document.querySelector('#find-me').addEventListener('click', geoFindMe);
25 17
26 var options = { 18 var options = {
...@@ -69,59 +61,20 @@ ...@@ -69,59 +61,20 @@
69 averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 61 averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
70 minLevel: 10 // 클러스터 할 최소 지도 레벨 62 minLevel: 10 // 클러스터 할 최소 지도 레벨
71 }); 63 });
72 - var data = [
73 - [37.350040, 127.108901, '<div style="padding: 5px;">Hello World!</div>'],
74 - [37.366090, 127.108056, '<div style="padding: 5px;">Hello World!</div>'],
75 - [37.378040, 127.108245, '<div style="padding: 5px;">Hello World!</div>']
76 - ]
77 64
78 - var markers = []; 65 + $.get("https://openapi.gg.go.kr/RegionMnyFacltStus?key=145a1e1f1f6a4712876cc7b16c6aeaff&Type=json&CMPNM_NM=편의점&pSize=1000", function (data) {
79 - 66 + var stores = JSON.parse(data);
80 - for (var i = 0; i < data.length; i++) { 67 + var locations = stores.RegionMnyFacltStus[1].row;
81 - //지도에 마커를 생성하고 표시한다 68 + locations.forEach(function (element) {
82 var marker = new kakao.maps.Marker({ 69 var marker = new kakao.maps.Marker({
83 - position: new kakao.maps.LatLng(data[i][0], data[i][1]), 70 + position: new kakao.maps.LatLng(element.REFINE_WGS84_LAT, element.REFINE_WGS84_LOGT),
84 map: map // 마커를 표시할 지도 객체 71 map: map // 마커를 표시할 지도 객체
85 }); 72 });
86 -
87 - var iwContent = data[i][2], // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
88 - iwPosition = new kakao.maps.LatLng(data[i][0], data[i][1]), //인포윈도우 표시 위치입니다
89 - iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
90 -
91 - // 인포윈도우를 생성하고 지도에 표시합니다
92 - var infowindow = new kakao.maps.InfoWindow({
93 - map: map, // 인포윈도우가 표시될 지도
94 - position: iwPosition,
95 - content: iwContent,
96 - removable: iwRemoveable
97 - });
98 -
99 - infowindow.open(map, marker);
100 - markers.push(marker);
101 - kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
102 - kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
103 - }
104 -
105 // 클러스터러에 마커들을 추가합니다 73 // 클러스터러에 마커들을 추가합니다
106 - clusterer.addMarkers(markers); 74 + clusterer.addMarkers(marker);
107 - 75 + })
108 - function makeOverListener(map, marker, infowindow) { 76 + });
109 - return function () {
110 - infowindow.open(map, marker);
111 - };
112 - }
113 -
114 - // 인포윈도우를 닫는 클로저를 만드는 함수입니다
115 - function makeOutListener(infowindow) {
116 - return function () {
117 - infowindow.close();
118 - };
119 - }
120 -
121 -
122 77
123 -// 아래 코드는 인포윈도우를 지도에서 제거합니다
124 -// infowindow.close();
125 78
126 79
127 </script> 80 </script>
......