Mark location

서연진
Commit d098768e5abdc0212c4c664a63cda282601d3769 d098768e 1 parent 1d767be6
Showing 6 changed files with 78 additions and 107 deletions
kakao/kakaomap.html
main.html
public/js/home_page.js
public/js/next_page.js
server.js
views/kakaomap.ejs
--- a/kakao/kakaomap.html deleted 100644 → 0
View file @1d767be
+++ b/kakao/kakaomap.html deleted 100644 → 0
View file @1d767be
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTR-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>HomePurchaseAgePrediction</title>
-  <link rel="stylesheet" href="css/style2.css" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" />
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap"
-    rel="stylesheet" />
-</head>
-
-<body>
-  <nav>
-    <h1 onClick="location.href='/'">Home Purchase Age Prediction</h1>
-  </nav>
-  <main>
-    <div id="info"></div>
-    <div id="home_info">
-      <div id="map"></div>
-      <ul id="house_list">
-        <div>LIST</div>
-      </ul>
-    </div>
-  </main>
-  <script type="text/javascript"
-    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing"></script>
-  <script type="text/javascript" src="../js/next_page.js"></script>
-</body>
-
-</html>
\ No newline at end of file
--- a/main.html
View file @d098768
+++ b/main.html
View file @d098768
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
-    <meta charset="UTF-8" />
+<head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>HomePurchaseAgePrediction</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="css/style.css" />
+  <title>HomePurchaseAgePrediction</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link rel="stylesheet" href="css/style.css" />
-    <link
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap"
-      rel="stylesheet"
+    rel="stylesheet" />
-    />
+</head>
-  </head>
+
-  <body>
+<body>
-    <main>
+  <main>
-      <h1 onClick="location.href='/'"">Home Purchase Age Prediction</h1>
+    <h1 onClick="location.href='/'"">Home Purchase Age Prediction</h1>
       <h4>
         사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의
         집을 찾아드립니다)
       </h4>
-      <form action="/geolocation" method="GET" onsubmit="return jbSubmit()">
+      <form action=" /geolocation" method="GET" onsubmit="return jbSubmit()">
-        <div>
+      <div>
-          월소득(단위:만 원)
+        월소득(단위:만 원)
-          <input
+        <input type="text" id="salary" name="salary" placeholder="월소득을 숫자로 입력해주세요." />
-            type="text"
+      </div>
-            id="salary"
+      <div>
-            name="salary"
+        지출(단위:만 원)
-            placeholder="월소득을 숫자로 입력해주세요."
+        <input type="text" id="expenditure" name="expenditure" placeholder="지출을 숫자로 입력해주세요." />
-          />
+      </div>
-        </div>
+      <div>
-        <div>
+        거주지역 (ex 강원도 강릉시 견소동)
-          지출(단위:만 원)
+        <input type="text" id="address" name="address" placeholder="(도/시/구/동)을 입력해주세요." />
-          <input
+      </div>
-            type="text"
+      <div>
-            id="expenditure"
+        <input class="btn" type="submit" value="SUBMIT" />
-            name="expenditure"
+      </div>
-            placeholder="지출을 숫자로 입력해주세요."
-          />
-        </div>
-        <div>
-          거주지역
-          <input
-            type="text"
-            id="address"
-            name="address"
-            placeholder="(도/시/구/동)을 입력해주세요."
-          />
-        </div>
-        <div>
-          <input class="btn" type="submit" value="SUBMIT"  />
-        </div>
       </form>
-    </main>
+  </main>
-    <script type="text/javascript" src="../js/home_page.js"></script>
+  <script type="text/javascript" src="../js/home_page.js"></script>
-  </body>
+</body>
-</html>
+
+</html>
\ No newline at end of file
--- a/public/js/home_page.js
View file @d098768
+++ b/public/js/home_page.js
View file @d098768
 function jbSubmit() {
   var salary = Number(document.getElementById("salary").value);
   var expenditure = Number(document.getElementById("expenditure").value);
-  console.log(salary);
   if (salary == "" || expenditure == "") {
     alert("값을 입력하세요!");
     return false;
--- a/public/js/next_page.js
View file @d098768
+++ b/public/js/next_page.js
View file @d098768
+var jsonData = document.getElementById('jsonData').value;
+var myJsonData = JSON.parse(jsonData);
+
+myJsonData.sort(function (a, b) {
+  return a.amount - b.amount;
+})
+
+newdata = []
+for (i = 0; i < 5; i++) {
+  newdata.push(myJsonData[i]);
+}
+
+priceList = [];
+for (var i = 0; i < 5; i++) {
+  priceList.push(newdata[i].amount);
+}
+
 var Container = document.getElementById("map");
 var Option = {
   center: new kakao.maps.LatLng(33.450701, 126.570667),
@@ -28,16 +45,19 @@ if (navigator.geolocation) {
 }
 //db에서 데이터 받아오면 구현할 부분
-/*
+
 // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 
-var positions = results;
+var positions = []
+for (var i = 0; i < 5; i++) {
+  positions.push(newdata[i]);
+}
 // 주소-좌표 변환 객체를 생성합니다
 var geocoder = new kakao.maps.services.Geocoder();
-for (var i = 0; i < positions.length; i ++) {
+for (var i = 0; i < positions.length; i++) {
   // 주소로 좌표를 검색합니다
-  geocoder.addressSearch(positions[i].add_address, function(result, status) {
+  geocoder.addressSearch(positions[i].add_adress, function (result, status) {
     // 정상적으로 검색이 완료됐으면 
     if (status === kakao.maps.services.Status.OK) {
       var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
@@ -48,31 +68,33 @@ for (var i = 0; i < positions.length; i ++) {
       });
       // 마커에 표시할 인포윈도우를 생성합니다 
       var infowindow = new kakao.maps.InfoWindow({
-        content: positions[i].amount // 인포윈도우에 표시할 내용
+        content: `<div style="width:150px;text-align:center;padding:6px 0;">${result[0].address.address_name + " " + result[0].road_address.building_name}</div>`
+        // String(priceList[i]) // 인포윈도우에 표시할 내용
       });
+
       // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
       // 이벤트 리스너로는 클로저를 만들어 등록합니다 
       // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
       kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
       kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
     }
-  });        
+  });
 }
 // 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
 function makeOverListener(map, marker, infowindow) {
-  return function() {
+  return function () {
-      infowindow.open(map, marker);
+    infowindow.open(map, marker);
   };
 }
 // 인포윈도우를 닫는 클로저를 만드는 함수입니다 
 function makeOutListener(infowindow) {
-  return function() {
+  return function () {
-      infowindow.close();
+    infowindow.close();
   };
 }
-*/
+
 function displayMarker(Position) {
   var marker = new kakao.maps.Marker({
@@ -93,7 +115,6 @@ function getParameterByName(name, url = window.location.href) {
 }
 //가격리스트로 year계산
-var priceList = [2000, 3000, 4000, 5000]; //임시로 넣어뒀습니다.
 function yearCalc() {
   var sum = 0;
   for (var i = 0; i < priceList.length; i++) {
@@ -110,6 +131,7 @@ var expenditure = getParameterByName("expenditure");
 var year = yearCalc();
 var div = document.getElementById("info");
+
 //20년을 초과한 결과값이 나올 때 20 + α 로 표시합니다.
 if (year > 20) {
   year = "20 + α ";
@@ -117,7 +139,10 @@ if (year > 20) {
 div.innerText = `${salary}만원의 월급과 ${expenditure}만원의 지출을 유지하면 당신은 ${year}년 후 아래의 집을 구매할 수 있습니다.`;
 //주소 받아오기
-var dataFromServer = ["xx동 xx", "xx", "00동 00"]; //임시로 넣어뒀습니다.
+dataFromServer = [];
+for (var i = 0; i < 5; i++) {
+  dataFromServer.push("주소: " + newdata[i].add_adress + ", 가격: " + newdata[i].amount + "만원, 면적: " + newdata[i].dedicated_area);
+}
 //next page li 요소 추가
 for (var i = 0; i < dataFromServer.length; i++) {
@@ -125,4 +150,4 @@ for (var i = 0; i < dataFromServer.length; i++) {
   const textNode = document.createTextNode(dataFromServer[i]);
   li.appendChild(textNode);
   document.getElementById("house_list").appendChild(li);
-}
\ No newline at end of file
+}
--- a/server.js
View file @d098768
+++ b/server.js
View file @d098768
@@ -39,14 +39,14 @@ app.get("/geolocation", function (req, res) {
     if (error) {
       throw (error);
     }
+    json_data = [];
     for (var i = 0; i < results.length; i++) {
       if (results[i].city_country == address) {
         json_data.push(results[i]);
       }
     }
+    res.render('kakaomap', { 'data': json_data })
   });
-  res.render('kakaomap', { 'data': json_data })
-  // res.sendFile(path.join(__dirname + "/kakao/kakaomap.html"), { json_data: json_data });
 });
--- a/views/kakaomap.ejs
View file @d098768
+++ b/views/kakaomap.ejs
View file @d098768
@@ -14,8 +14,7 @@
 <body>
     <nav>
-        <p>js data : <%=data[0].add_adress%>
+        <input type="hidden" id="jsonData" value="<%=JSON.stringify(data)%>" />
-        </p>
         <h1 onClick="location.href='/'">Home Purchase Age Prediction</h1>
     </nav>
     <main>
@@ -30,11 +29,6 @@
     <script type="text/javascript"
         src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing"></script>
     <script type="text/javascript" src="../js/next_page.js"></script>
-    <% if(data){ %>
-        <% for(let i=0;i < data.length;i++) { %>
-            NAME : <%= data[i].add_adress %>, AGE : <%= data[i].amount %><br>
-                    <% } %>
-                        <% } %>
 </body>
 </html>
\ No newline at end of file