오지민 / HomePurchaseAgePrediction

Go to a project
Toggle navigation Toggle navigation pinning
서연진
d098768e 1 parent 1d767be6

Mark location

Inline Side-by-side
Showing 6 changed files with 78 additions and 107 deletions
<!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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-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/style.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>
<main>
<h1 onClick="location.href='/'"">Home Purchase Age Prediction</h1>
<head>
<meta charset="UTF-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/style.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>
<main>
<h1 onClick="location.href='/'"">Home Purchase Age Prediction</h1>
<h4>
사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의
집을 찾아드립니다)
</h4>
<form action="/geolocation" method="GET" onsubmit="return jbSubmit()">
<div>
월소득(단위:만 원)
<input
type="text"
id="salary"
name="salary"
placeholder="월소득을 숫자로 입력해주세요."
/>
</div>
<div>
지출(단위:만 원)
<input
type="text"
id="expenditure"
name="expenditure"
placeholder="지출을 숫자로 입력해주세요."
/>
</div>
<div>
거주지역
<input
type="text"
id="address"
name="address"
placeholder="(도/시/구/동)을 입력해주세요."
/>
</div>
<div>
<input class="btn" type="submit" value="SUBMIT" />
</div>
<form action=" /geolocation" method="GET" onsubmit="return jbSubmit()">
<div>
월소득(단위:만 원)
<input type="text" id="salary" name="salary" placeholder="월소득을 숫자로 입력해주세요." />
</div>
<div>
지출(단위:만 원)
<input type="text" id="expenditure" name="expenditure" placeholder="지출을 숫자로 입력해주세요." />
</div>
<div>
거주지역 (ex 강원도 강릉시 견소동)
<input type="text" id="address" name="address" placeholder="(도/시/구/동)을 입력해주세요." />
</div>
<div>
<input class="btn" type="submit" value="SUBMIT" />
</div>
</form>
</main>
<script type="text/javascript" src="../js/home_page.js"></script>
</body>
</html>
</main>
<script type="text/javascript" src="../js/home_page.js"></script>
</body>
</html>
\ No newline at end of file
......
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;
......
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() {
infowindow.open(map, marker);
return function () {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
return function () {
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
}
......
......@@ -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 });
});
......
......@@ -14,8 +14,7 @@
<body>
<nav>
<p>js data : <%=data[0].add_adress%>
</p>
<input type="hidden" id="jsonData" value="<%=JSON.stringify(data)%>" />
<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
......