Joung Jiwon / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
SH
1628522e 1 parent 762c38a8

id 수정

Inline Side-by-side
Showing 1 changed file with 41 additions and 37 deletions
......@@ -12,12 +12,14 @@
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<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">
<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>
<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" />
<!--
......@@ -27,7 +29,7 @@
<script type= "text/css">
<script type="text/css">
window.onload = function(){
document.getElementById('btn').onclick = function(){
document.getElementById('frm').submit();
......@@ -81,15 +83,16 @@
<div class="question-field question-home">어디에 사나요?</div>
<div class="input-field input-home">
<label for="question-input-field"></label>
<input type ="text" id="start"></div>
<input type="text" id="start"></div>
<div class="question-field question-school">무슨 학교에 다니나요?</div>
<div class="input-school">
<label for="question-input-field"></label>
<input type ="text" id="end">
<input type="text" id="end">
</div>
<div class="question-field question-grade">몇학년인가요?</div>
<div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px">
<select>
<div class="input-grade">
<div class="custom-select" style="width:208px; margin-right:40px">
<select id="semester">
<option value="0">1학년 1학기</option>
<option value="sem-1-1">1학년 1학기</option>
<option value="sem-1-2">1학년 2학기</option>
......@@ -100,9 +103,10 @@
<option value="sem-4-1">4학년 1학기</option>
<option value="sem-4-2">4학년 2학기</option>
</select>
</div></div>
</div>
<a href="#result" class="text-center tm-down-arrow-link">
</div>
</div>
<a href="#result" class="text-center tm-down-arrow-link" onclick="semester();return false;">
<i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
</a>
</div>
......@@ -131,10 +135,10 @@
지구를
</div>
<div class="answer-detail-answer">
<span id = "salary">?</span>원<br>
<span id = "dish">?</span>그릇<br>
<span id = "everest">?</span>번이나...<br>
<span id = "earth">?</span>바퀴나 돌아요<br><br><br>
<span id="salary">?</span>원<br>
<span id="dish">?</span>그릇<br>
<span id="everest">?</span>번이나...<br>
<span id="earth">?</span>바퀴나 돌아요<br><br><br>
</div>
</div>
<footer class="text-center small tm-footer">
......@@ -174,7 +178,7 @@
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
c.addEventListener("click", function (e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h, sl, yl;
......@@ -199,7 +203,7 @@
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
a.addEventListener("click", function (e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
......@@ -244,7 +248,7 @@
naver.maps.Service.geocode({
address: start
}, function(status, response) {
}, function (status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
......@@ -256,7 +260,7 @@
naver.maps.Service.geocode({
address: end
}, function(status, response) {
}, function (status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert('Something wrong!');
}
......@@ -274,7 +278,7 @@
var mapOptions = {
center: new naver.maps.LatLng(start,end),
center: new naver.maps.LatLng(start, end),
zoom: 10
};
......@@ -285,12 +289,12 @@
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";
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() {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
console.log(JSON.parse(xhr.responseText)); // <- xhr.responseText 로 결과를 가져올 수 있음
//노선그래픽 데이터 호출
callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
}
......@@ -300,20 +304,20 @@
//길찾기 API 호출
searchPubTransPathAJAX();
function callMapObjApiAJAX(mabObj){
function callMapObjApiAJAX(mabObj) {
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
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() {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var resultJsonData = JSON.parse(xhr.responseText);
drawNaverMarker(sx,sy); // 출발지 마커 표시
drawNaverMarker(ex,ey); // 도착지 마커 표시
drawNaverMarker(sx, sy); // 출발지 마커 표시
drawNaverMarker(ex, ey); // 도착지 마커 표시
drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
// boundary 데이터가 있을경우, 해당 boundary로 지도이동
if(resultJsonData.result.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)
......@@ -325,7 +329,7 @@
}
// 지도위 마커 표시해주는 함수
function drawNaverMarker(x,y){
function drawNaverMarker(x, y) {
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(y, x),
map: map
......@@ -333,33 +337,33 @@
}
// 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
function drawNaverPolyLine(data){
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++){
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++){
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){
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){
} else if (data.result.lane[i].type == 2) {
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
strokeWeight: 3,
strokeColor: '#37b42d'
});
}else{
} else {
var polyline = new naver.maps.Polyline({
map: map,
path: lineArray,
......@@ -387,13 +391,13 @@
// 임시값 지정
var time = 2
var distance = 30000
var costs = 100000
var pay = 100000
function sum(sem) {
since = sem * time * 150
until = (8 - sem) * time * 150
salary = since * 8590
dish = Math.floor((costs * 150) / 6000)
dish = Math.floor((pay * 150) / 6000)
everest = Math.floor((distance * 2) / 8846)
earth = ((distance * 2) / 40075000).toFixed(3)
}
......