Showing
2 changed files
with
34 additions
and
23 deletions
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 | ... | ... |
-
Please register or login to post a comment