서연진

다음 페이지에 값 받아오기

1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 - <meta charset="UTR-8"> 4 + <meta charset="UTR-8" />
5 </head> 5 </head>
6 <body> 6 <body>
7 - <h1>전달받은 데이터</h1> 7 + <div id="map"></div>
8 - <ul>
9 - <li>연봉: (????) 만 원</li>
10 - <li>지출: (????) 만 원</li>
11 - </ul>
12 - <div id="map" style="float:right"></div>
13 <script 8 <script
14 type="text/javascript" 9 type="text/javascript"
15 src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing" 10 src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing"
16 ></script> 11 ></script>
17 <script> 12 <script>
18 - var Container = document.getElementById("map") 13 + var Container = document.getElementById("map");
19 var Option = { 14 var Option = {
20 - center: new kakao.maps.LatLng(33.450701, 126.570667), 15 + center: new kakao.maps.LatLng(33.450701, 126.570667),
21 - level: 5, 16 + level: 5,
22 }; 17 };
23 18
24 var map = new kakao.maps.Map(Container, Option); 19 var map = new kakao.maps.Map(Container, Option);
...@@ -26,31 +21,47 @@ ...@@ -26,31 +21,47 @@
26 relayout(); 21 relayout();
27 22
28 function resizeMap() { 23 function resizeMap() {
29 - var Container = document.getElementById('map'); 24 + var Container = document.getElementById("map");
30 - Container.style.width = '600px'; 25 + Container.style.width = "600px";
31 - Container.style.height = '500px'; 26 + Container.style.height = "500px";
32 } 27 }
33 28
34 - function relayout() { 29 + function relayout() {
35 map.relayout(); 30 map.relayout();
36 } 31 }
37 32
38 if (navigator.geolocation) { 33 if (navigator.geolocation) {
39 navigator.geolocation.getCurrentPosition(function (position) { 34 navigator.geolocation.getCurrentPosition(function (position) {
40 - var latitude = position.coords.latitude, longitude = position.coords.longitude; 35 + var latitude = position.coords.latitude,
41 - var Position = new kakao.maps.LatLng(latitude, longitude); 36 + longitude = position.coords.longitude;
42 - displayMarker(Position); 37 + var Position = new kakao.maps.LatLng(latitude, longitude);
38 + displayMarker(Position);
43 }); 39 });
44 } 40 }
45 41
46 function displayMarker(Position) { 42 function displayMarker(Position) {
47 var marker = new kakao.maps.Marker({ 43 var marker = new kakao.maps.Marker({
48 - map: map, 44 + map: map,
49 - position: Position, 45 + position: Position,
50 - }); 46 + });
51 47
52 - map.setCenter(Position); 48 + map.setCenter(Position);
49 + function getParameterByName(name, url = window.location.href) {
50 + name = name.replace(/[\[\]]/g, "\\$&");
51 + var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
52 + results = regex.exec(url);
53 + if (!results) return null;
54 + if (!results[2]) return "";
55 + return decodeURIComponent(results[2].replace(/\+/g, " "));
56 + }
57 + var salary = getParameterByName("salary");
58 + var expenditure = getParameterByName("expenditure");
59 + console.log(salary);
60 + var year = "3";
61 + var div = document.createElement("div");
62 + div.innerText = `${salary}의 월급과 ${expenditure}의 지출을 유지하면 당신은 ${year}년 후에 아래의 집을 구매할 수 있습니다.`;
63 + document.body.prepend(div);
53 } 64 }
54 </script> 65 </script>
55 </body> 66 </body>
56 -</html>
...\ No newline at end of file ...\ No newline at end of file
67 +</html>
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의 20 사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의
21 집을 찾아드립니다) 21 집을 찾아드립니다)
22 </h4> 22 </h4>
23 - <form action="/geolocation" method="POST"> 23 + <form action="/geolocation" method="GET">
24 <div> 24 <div>
25 연봉(단위:만 원) 25 연봉(단위:만 원)
26 <input 26 <input
......