오지민 / HomePurchaseAgePrediction

Go to a project
Toggle navigation Toggle navigation pinning
김민기
d8fcfe5a 1 parent 540eb37a

카카오맵 띄우기 1차

Inline Side-by-side
Showing 5 changed files with 97 additions and 1 deletions
1 +node_modules/
2 +
3 +package-lock.json
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="UTR-8">
5 + </head>
6 + <body>
7 + <h1>전달받은 데이터</h1>
8 + <ul>
9 + <li>연봉: (????) 만 원</li>
10 + <li>지출: (????) 만 원</li>
11 + </ul>
12 + <div id="map" style="float:right"></div>
13 + <script
14 + type="text/javascript"
15 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing"
16 + ></script>
17 + <script>
18 + var Container = document.getElementById("map")
19 + var Option = {
20 + center: new kakao.maps.LatLng(33.450701, 126.570667),
21 + level: 5,
22 + };
23 +
24 + var map = new kakao.maps.Map(Container, Option);
25 + resizeMap();
26 + relayout();
27 +
28 + function resizeMap() {
29 + var Container = document.getElementById('map');
30 + Container.style.width = '600px';
31 + Container.style.height = '500px';
32 + }
33 +
34 + function relayout() {
35 + map.relayout();
36 + }
37 +
38 + if (navigator.geolocation) {
39 + navigator.geolocation.getCurrentPosition(function (position) {
40 + var latitude = position.coords.latitude, longitude = position.coords.longitude;
41 + var Position = new kakao.maps.LatLng(latitude, longitude);
42 + displayMarker(Position);
43 + });
44 + }
45 +
46 + function displayMarker(Position) {
47 + var marker = new kakao.maps.Marker({
48 + map: map,
49 + position: Position,
50 + });
51 +
52 + map.setCenter(Position);
53 + }
54 + </script>
55 + </body>
56 +</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의 20 사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의
21 집을 찾아드립니다) 21 집을 찾아드립니다)
22 </h4> 22 </h4>
23 - <form action="result" method="POST"> 23 + <form action="/geolocation" method = "POST">
24 <div> 24 <div>
25 연봉(단위:만 원) 25 연봉(단위:만 원)
26 <input 26 <input
......
1 +{
2 + "name": "map-api",
3 + "version": "1.0.0",
4 + "description": "",
5 + "main": "app.js",
6 + "scripts": {
7 + "test": "echo \"Error: no test specified\" && exit 1"
8 + },
9 + "author": "",
10 + "license": "ISC",
11 + "dependencies": {
12 + "express": "^4.17.1",
13 + "path": "^0.12.7",
14 + "request": "^2.88.2"
15 + }
16 +}
1 +const express = require('express');
2 +const path = require('path');
3 +const request = require('request');
4 +
5 +
6 +const app = express();
7 +
8 +app.use(express.static(path.join(__dirname,'kakao')));
9 +
10 +
11 +app.listen(8080, function(req,res) {
12 + console.log("server started at 8080");
13 +});
14 +
15 +app.get('/', function(req,res){
16 + res.sendFile(path.join(__dirname+"/main.html"));
17 +});
18 +
19 +app.post('/geolocation', function(req,res){
20 + res.sendFile(path.join(__dirname+"/kakao/kakaomap.html"));
21 +});
...\ No newline at end of file ...\ No newline at end of file