Joung Jiwon / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
박재윤
96ab698b 1 parent 7869ae91

지도와 길찾기 api 연결

Inline Side-by-side
Showing 1 changed file with 178 additions and 29 deletions
......@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>The Town HTML CSS Template</title>
<title>DDuBuk</title>
<link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
......@@ -13,10 +13,26 @@
<link rel="stylesheet" href="css/templatemo-style.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
<script src="../../docs/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../docs/js/examples-base.js"></script>
<script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
<link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
<!--
The Town
https://templatemo.com/tm-525-the-town
-->
<script type= "text/css">
window.onload = function(){
document.getElementById('btn').onclick = function(){
document.getElementById('frm').submit();
return false;
};
};
</script>
</head>
<body>
<!-- Hero section -->
......@@ -38,7 +54,7 @@
<h2 class="tm-hero-title">통학생은 길에서 몇시간을 보냈을까?</h2>
<p class="tm-hero-subtitle">
매일 학교에 통학하시나요?<br>
뚜벅이님이 지금까지 몇시간을 길에서 보냈는지 보여드립니다.
뚜벅이님이 지금까지 몇 시간을 길에서 보냈는지 보여드립니다.
<br>-뚜벅이-
</p>
</div>
......@@ -46,7 +62,7 @@
<div class="tm-next tm-intro-next">
<a href="#introduction" class="text-center tm-down-arrow-link">
<i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
<i class="fas fa-3x fa-caret-down tm-down-arrow">계산하기</i>
</a>
</div>
</section>
......@@ -61,18 +77,18 @@
<div class="question-text">어디에 사나요?</div>
<div class="question-input">
<label for="question-input-field"></label>
<input type ="text" id="question-input-field">
<input type ="text" id="start">
</div>
</div>
<div class="container question-field">
<div class="question-text">무슨학교에 다니나요?</div>
<div class="question-text">무슨 학교에 다니나요?</div>
<div class="question-input">
<label for="question-input-field"></label>
<input type ="text" id="question-input-field">
<input type ="text" id="end">
</div>
</div>
<div class="container question-field">
<div class="question-text">몇학년인가요?</div>
<div class="question-text">몇 학년인가요?</div>
<div class="question-input">
<select name="semester" id="semester">
<option value="sem-1-1">1학년 1학기</option>
......@@ -87,37 +103,170 @@
</div>
</div>
<div class="container button-field">
<button class="button_calculate" type="button">
계산해보기
<button class="button_calculate" type="button">계산하기
</button>
</div>
</div>
<div class=row id ="map-answer" style="margin-top:100px">
<div style="width:30%">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d203276.83209506533!2d126.94001771640623!3d37.24295009999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b44de2c7f3ddb%3A0x4c35e852f90f5520!2z6rK97Z2s64yA7ZWZ6rWQIOq1reygnOy6oO2NvOyKpA!5e0!3m2!1sko!2skr!4v1606155147622!5m2!1sko!2skr" width=100% height="250" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0" right="20%"></iframe>
</div>
<div class="answer-field">
한번 갈 때마다 ...<br>
<span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br>
<span class="answer-highlight">n</span> 원 <br>
</div>
</div>
<br>
<div id="map" style="width:700px;height:700px;"></div>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', updateBtn);
function updateBtn() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
naver.maps.Service.geocode({
address: start
}, function(status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
var result = response.result, // 검색 결과의 컨테이너
items = result.items;
var sx = result.items[0].point.x;
var sy = result.items[0].point.y;
naver.maps.Service.geocode({
address: end
}, function(status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
var result = response.result, // 검색 결과의 컨테이너
items = result.items;
var ex = result.items[0].point.x;
var ey = result.items[0].point.y;
/*var sx = 127.0739547;
var sy = 37.2407701;
var ex = 126.921666;
var ey = 37.1308333;
*/
var mapOptions = {
center: new naver.maps.LatLng(start,end),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
function searchPubTransPathAJAX() {
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
//노선그래픽 데이터 호출
callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
}
}
}
//길찾기 API 호출
searchPubTransPathAJAX();
function callMapObjApiAJAX(mabObj){
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var resultJsonData = JSON.parse(xhr.responseText);
drawNaverMarker(sx,sy); // 출발지 마커 표시
drawNaverMarker(ex,ey); // 도착지 마커 표시
drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
// boundary 데이터가 있을경우, 해당 boundary로 지도이동
if(resultJsonData.result.boundary){
var boundary = new naver.maps.LatLngBounds(
new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
);
map.panToBounds(boundary);
}
}
}
}
// 지도위 마커 표시해주는 함수
function drawNaverMarker(x,y){
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(y, x),
map: map
});
}
// 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
function drawNaverPolyLine(data){
var lineArray;
for(var i = 0 ; i < data.result.lane.length; i++){
for(var j=0 ; j <data.result.lane[i].section.length; j++){
lineArray = null;
lineArray = new Array();
for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){
lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
}
//지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
if(data.result.lane[i].type == 1){
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3,
strokeColor: '#003499'
});
}else if(data.result.lane[i].type == 2){
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3,
strokeColor: '#37b42d'
});
}else{
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3
});
}
}
}
}
});
});
}
</script>
<div class="row">
<div id="list-answer">
<div class="answer-field" id="answer-how-many-hours">
지금까지 <span class="answer-highlight">n</span>시간을 길에서 보내셨군요<br>
졸업까지 앞으로 <span class="answer-highlight">n</span>시간은 더 길에서 보내시면 됩니다.<br>
지금까지 <span class="answer-highlight">n</span> 시간을 길에서 보내셨군요!<br>
앞으로 <span class="answer-highlight">n</span> 시간은 더 길에서 보내시면 됩니다!!<br>
</div>
</div>
</div>
<div class="row">
<div class = "answer-detail-question">
이 시간에 알바를 했다면? <br>
교통비로 국밥 <br>
</div>
<div class="answer-detail-answer">
n원<br>
m그릇<br>
<div id="list-answer">
<div class="answer-field" id="answer-how-many-hours">
<p>이 시간에..</p>
알바를 했다면? <span class="answer-highlight">n</span> 원<br>
<p>이 돈이면..</p>
국밥이 <span class="answer-highlight">n</span> 그릇<br>
</div>
</div>
</div>
......