김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
지창언
0e52ba09 1 parent 76f81ab7

show highway-line in map

Inline Side-by-side
Showing 3 changed files with 86 additions and 33 deletions
var express = require('express')
var router = express.Router();
router.get('/',function(req,res){
res.render('data.csv')
})
......
......@@ -2,6 +2,8 @@ var express = require('express')
var router = express.Router();
router.get('/',function(req,res){
res.render('index.html')
})
......
......@@ -12,7 +12,7 @@
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body class="d-flex flex-column h-100">
......@@ -55,58 +55,106 @@
<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('0600')">서울양양선</a>
<a class="dropdown-item" onclick="showline('0450')">중부내륙선</a>
</div>
</div>
</div>
</div>
<div id="map" style="width:600px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8"></script>
<!-- services와 clusterer, drawing 라이브러리 불러오기 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=services,clusterer,drawing"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var x;
var y;
// 경로 생성
var linepath = []
// 아래 함수는 10번 고속도로의 모든 이정표의 x,y 좌표값을 linepath 변수에 저장
$.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] == '0010'){
linepath.push(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
}
}
var rowCells = allRows[1].split(',');
//linepath.append(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
x = rowCells[3]
y = rowCells[4]
$('#testArea').append(x)
}
});
//linepath.append(new kakao.maps.LatLng())
<script type="text/javascript">
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
level: 13 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
var testA1 = [
210352512672,
26871772376272,
7726284477,
277457742787
]
var filename = "/csv"
// 아래 함수는 10번 고속도로의 모든 이정표의 x,y 좌표값을 linepath 변수에 저장
var polyline = new kakao.maps.Polyline({
path: linepath, // 선을 구성하는 좌표배열 입니다
strokeWeight: 5, // 선의 두께 입니다
strokeColor: '#FF4500', // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid' // 선의 스타일입니다
});
polyline.setMap(map)
function showline(lineNumber){
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 = []
$.ajax({
url: filename,
url: 'data.csv',
dataType: 'text',
async: false,
success: function(data){
var allRows = data.split(/\r?\n|\r/);
$('#testArea').append(allRows)
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 linepath = [
new kakao.maps.LatLng(33.452344169439975, 126.56878163224233),
new kakao.maps.LatLng(33.452739313807456, 126.5709308145358),
new kakao.maps.LatLng(33.45178067090639, 126.5726886938753)
]
var polyline = new kakao.maps.Polyline({
map: map,
path: linepath,
strokeWeight: 2,
strokeColor: '#FF00FF',
strokeOpacity: 0.8,
strokeStyle: 'dashed'
path: line, // 선을 구성하는 좌표배열 입니다
strokeWeight: 5, // 선의 두께 입니다
strokeColor: '#FF4500', // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid' // 선의 스타일입니다
});
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
polyline.set(map)
polyline.setMap(map)
}
</script>
</div>
</div>
......