김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
지창언
1f83bd71 2 parents 0937dc04 556f319c

Merge branch 'map_api' into 'master' 

Map api

kakao open source map api updated

See merge request !2
Inline Side-by-side
Showing 6 changed files with 272 additions and 8 deletions
......@@ -11,6 +11,7 @@ var signupRouter = require('./routes/signup')
var lpgRouter = require('./routes/lpg')
var weatherRouter = require('./routes/weather')
var menuRouter = require('./routes/menu')
var csvRouter = require('./routes/csv')
var app = express();
var router = express.Router();
......@@ -36,6 +37,7 @@ app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));
//
app.use('/csv',csvRouter)
app.use('/menu',menuRouter)
app.use('/login',loginRouter); // login page route
app.use('/weather',weatherRouter)
......@@ -48,7 +50,7 @@ app.use('/', indexRouter); // main page route
//모든 router 처리가 끝난 후 404 오류 페이지 처리
var errorHandler = expressErrorHandler({
static: {
'404': './app/public/404.html'
'404': './rest_stop_list/app/public/404.html'
}
});
app.use(expressErrorHandler.httpError(404));
......
This diff could not be displayed because it is too large.
var express = require('express')
var router = express.Router();
router.get('/',function(req,res){
res.render('data.csv')
})
module.exports = router
\ No newline at end of file
......@@ -2,6 +2,8 @@ var express = require('express')
var router = express.Router();
router.get('/',function(req,res){
res.render('index.html')
})
......
This diff could not be displayed because it is too large.
......@@ -12,6 +12,205 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8&libraries=services,clusterer,drawing"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
// 고속도로 선택 함수
function showline(lineNumber){
// 이 위치에 이전에 켜져있는 map을 지우는 기능 넣어야해 ...
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
level: 13 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
line = []
//csv 파일에서 이정 좌표 가져와서 line 변수에 저장
$.ajax({
url: 'data.csv',
dataType: 'text',
async: false,
success: function(data){
var allRows = data.split(/\r?\n|\r/);
for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
var rowCells = allRows[singleRow].split(',');
if(rowCells[0] == lineNumber){
line.push(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
}
}
}
});
var polyline = new kakao.maps.Polyline({
path: line, // 선을 구성하는 좌표배열 입니다
strokeWeight: 5, // 선의 두께 입니다
strokeColor: '#FF4500', // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid' // 선의 스타일입니다
});
polyline.setMap(map)
var userData;
var markers = [];
var infos = [];
var routeCodes = [];
var svarAddrs = [];
var rest_names = [];
// 1번 페이지
$.ajax({
url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1",
async:false,
success: function(data){
//변수 설정
userData = data;
},
}).done(function() {
var routeCode = "";
var svarAddr = "";
var rest_name = "";
var data_count = userData["list"].length // 데이터 개수 얻기
for (var i =0; i<data_count; i++){
routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
routeCodes.push(routeCode);
svarAddrs.push(svarAddr);
rest_names.push(rest_name);
var geocoder = new kakao.maps.services.Geocoder();
}
}
svarAddrs.forEach(function(addr,index){
geocoder.addressSearch(addr,function(result,status){
if(status === kakao.maps.services.Status.OK){
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
var marker = new kakao.maps.Marker({
position:coords,
map:map,
})
var infowindow = new kakao.maps.InfoWindow({
content: rest_names[index],
});
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
})
})
})
// 2번 페이지
$.ajax({
url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2",
async:false,
success: function(data){
//변수 설정
userData = data;
},
}).done(function() {
var routeCode = "";
var svarAddr = "";
var rest_name = "";
var data_count = userData["list"].length // 데이터 개수 얻기
for (var i =0; i<data_count; i++){
routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
routeCodes.push(routeCode);
svarAddrs.push(svarAddr);
rest_names.push(rest_name);
var geocoder = new kakao.maps.services.Geocoder();
}
}
svarAddrs.forEach(function(addr,index){
geocoder.addressSearch(addr,function(result,status){
if(status === kakao.maps.services.Status.OK){
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
var marker = new kakao.maps.Marker({
position:coords,
map:map,
})
var infowindow = new kakao.maps.InfoWindow({
content: rest_names[index],
});
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
})
})
})
// 3번 페이지
$.ajax({
url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=3",
async:false,
success: function(data){
//변수 설정
userData = data;
},
}).done(function() {
var routeCode = "";
var svarAddr = "";
var rest_name = "";
var data_count = userData["list"].length // 데이터 개수 얻기
for (var i =0; i<data_count; i++){
routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);
if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
routeCodes.push(routeCode);
svarAddrs.push(svarAddr);
rest_names.push(rest_name);
var geocoder = new kakao.maps.services.Geocoder();
}
}
svarAddrs.forEach(function(addr,index){
geocoder.addressSearch(addr,function(result,status){
if(status === kakao.maps.services.Status.OK){
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
var marker = new kakao.maps.Marker({
position:coords,
map:map,
})
var infowindow = new kakao.maps.InfoWindow({
content: rest_names[index],
});
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
})
})
})
}
</script>
</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
......@@ -53,15 +252,64 @@
<div class="my-5 text-center text-xl-start">
<h1 class="display-5 fw-bolder text-white mb-2">각 고속도로별 휴게소 지도 오픈 API 삽입 >></h1>
<p class="lead fw-normal text-white-50 mb-4">적당히 텍스트 삽입</p>
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
<a class="btn btn-primary btn-lg px-4 me-sm-3" href="#features">이자리 버튼 대신 드랍다운(고속도로선택)</a>
<a class="btn btn-outline-light btn-lg px-4" href="#!">Learn More</a>
<div class="dropdown">
<button class ="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown">
고속도로 선택
</button>
<div class ="dropdown-menu">
<a class="dropdown-item" onclick="showline('0010')">경부선</a>
<a class="dropdown-item" onclick="showline('0550')">중앙선</a>
<a class="dropdown-item" onclick="showline('0500')">영동선</a>
</div>
</div>
</div>
</div>
<!--여기 image 자리에 지도 api 삽입-->
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"><img class="img-fluid rounded-3 my-5" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div>
</div>
<script>
// 지도 구현 부분
</script>
<div id="map" style="width:600px;height:400px;"></div>
<script>
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
level: 13 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// 마커표시
var geocoder = new kakao.maps.services.Geocoder();
// 휴게소 주소 입력시, 마커 표시 및 이동
geocoder.addressSearch('경기도 용인시 고림동9', function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setLevel(4);
map.setCenter(new kakao.maps.LatLng(result[0].y, result[0].x));
}
});
</script>
</div>
</div>
</header>
<!-- Features section-->
......@@ -103,7 +351,7 @@
<div class="row gx-5 justify-content-center">
<div class="col-lg-10 col-xl-7">
<div class="text-center">
<div class="fs-4 mb-4 fst-italic">이 아래는 그다지 필요하지 않을것 같으니 일단 두고 나중에 전부삭제</div>
<div class="fs-4 mb-4 fst-italic" id ="testArea">이 아래는 그다지 필요하지 않을것 같으니 일단 두고 나중에 전부삭제</div>
<div class="d-flex align-items-center justify-content-center">
<img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
<div class="fw-bold">
......