integrate map api with svelte

서준혁
Commit a5482ec9ad0d6f9be3c8c55b9c642ba7d20c4547 a5482ec9 1 parent a615c92c
Showing 6 changed files with 71 additions and 9 deletions
package-lock.json
package.json
public/index.html
src/Map.svelte
src/Menu.svelte
src/index.html
--- a/package-lock.json
View file @a5482ec
+++ b/package-lock.json
View file @a5482ec
@@ -431,6 +431,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
--- a/package.json
View file @a5482ec
+++ b/package.json
View file @a5482ec
@@ -5,7 +5,7 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "start": "sirv public --no-clear"
+    "start": "sirv public --no-clear --host 0.0.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "engine.io-parser": "^5.0.1",
+    "jquery": "^3.6.0",
     "sirv-cli": "^1.0.0"
   }
 }
--- a/public/index.html
View file @a5482ec
+++ b/public/index.html
View file @a5482ec
@@ -10,6 +10,7 @@
 	<link rel='stylesheet' href='/global.css'>
 	<link rel='stylesheet' href='/build/bundle.css'>
+	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=046d27f1430524731d3ec6870f0c8923"></script>
 	<script defer src='/build/bundle.js'></script>
 </head>
--- a/src/Map.svelte
View file @a5482ec
+++ b/src/Map.svelte
View file @a5482ec
 <style>
-	#chat_bg {
+	#map_bg {
 		box-sizing: border-box;
+        justify-content: center;
 		display: flex;
 		height: 100vh;
 		background-color:#edeff2;
 	}
+
+    #map {
+		box-sizing: border-box;
+		display: flex;
+		height: 90vh;
+		width: 80vw;
+		background-color:#edeff2;
+	}
 </style>
 <script>
-	
+    import jQuery from 'jquery';
+
+    var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
+    var {kakao} = window;
+    
+    var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
+        jQuery.getJSON(url,function(data){
+            console.log(data);
+            var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
+		    mapOption = {
+		        center: new kakao.maps.LatLng(36.46682, 127.37865), // 지도의 중심좌표
+		        level: 12, // 지도의 확대 레벨
+		        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
+		    }; 
+
+            var markers= [];
+		// 지도를 생성한다 
+		var map = new kakao.maps.Map(mapContainer, mapOption); 
+        for(var i = 0; i<data.response.body.items.item.length;i++){
+            // 지도에 마커를 생성하고 표시한다
+            var marker = new kakao.maps.Marker({
+                position: new kakao.maps.LatLng(data.response.body.items.item[i].mapy, data.response.body.items.item[i].mapx), // 마커의 좌표
+                map: map // 마커를 표시할 지도 객체
+            });
+            markers.push(marker);
+            // 마커 위에 표시할 인포윈도우를 생성한다
+
+        };
+                
+        for(var i = 0; i<9;i++) { // 왜 9까지 밖에 안되누 ㅠㅠ
+            var infowindow = new kakao.maps.InfoWindow({
+                content : '<div style="padding:5px;">'+data.response.body.items.item[i].title+'</div>' // 인포윈도우에 표시할 내용
+            });
+            infowindow.open(map, markers[i]);
+        }
+
+        // 마우스 휠과 모바일 터치를 이용한 지도 확대, 축소를 막는다
+		map.setZoomable(false);   
+
+        // 지도에 확대 축소 컨트롤을 생성한다
+        var zoomControl = new kakao.maps.ZoomControl();
+
+        // 지도의 우측에 확대 축소 컨트롤을 추가한다
+        map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
+
+    });    
 </script>
-<div id="chat_bg">
+<div id="map_bg">
-	
+	<div id="map"></div>
 </div>
--- a/src/Menu.svelte
View file @a5482ec
+++ b/src/Menu.svelte
View file @a5482ec
@@ -12,7 +12,7 @@
 <style>
 	nav {
-		background-color: rgb(225, 175, 85);
+		background-color: #4527a0;
 		font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 		height: 70px;
 		top: 0;
@@ -32,6 +32,7 @@
 	.logo {
 		display: flex;
 		position: absolute;
+		color: white;
 		width: 50px;
 		left: 40px;
 		top: 25px
--- a/src/index.html
View file @a5482ec
+++ b/src/index.html
View file @a5482ec
@@ -8,16 +8,16 @@
 <body>
 	<div id="map" style="width:100%;height:100vh;"></div>
-	<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=9bb9a71480b6cd2d7fa98fb256053acf"></script>
+	<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=046d27f1430524731d3ec6870f0c8923"></script>
 	<script>
         var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
-             $.getJSON(url,function(data){
+            $.getJSON(url,function(data){
             console.log(data);
 		var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
 		    mapOption = {
 		        center: new kakao.maps.LatLng(37.56682, 126.97865), // 지도의 중심좌표
-		        level: 10, // 지도의 확대 레벨
+		        level: 12, // 지도의 확대 레벨
 		        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
 		    };