<div id="result-box" class="row">
<div id="map" class="col-md-8" style="height:400px"></div> <!-- this is jido -->
<div id="show-info-box" class="col-md-4">
<p>이동경로</p>
<p>환승역</p>
<p>소요시간</p>
</div>
</div>
하위 subpath의 length를 기준으로 for문을 돌렸다. 처음에는 경로가 아닌 것 같은 부분이 있어서 그 부분을 빼고 설정했는데, 알고보니 경로가 없는 게 아니라 trafficType=3 즉, 도보로 이동하는 부분이어서 그랬다.
전체 경로 중 몇 번째인지 나타내기 위해서 m이라는 변수를 함수 밖에 지정해주었다.
trafficType=3의 경우 만약 도보에 소요된 시간이 0분인 경우 바로 환승함을 의미한다. 이 경우에 굳이 '도보 0분 소요'라고 쓸 필요도 없고 이동 경로 수를 count할 필요도 없겠다는 생각이 들었다.
그래서 아래 코드와 같이 소요 시간이 0인 경우에는 따로 'm 번째' 표시를 하지 않고 (환승) 으로 나타내도록 만들었다.
처음에는 내가 원하는 대로 나오지 않고 에러도 많이 떴다.😫
진짜 오기로 했는데..! 결국 해결했다. (내 실수도 많았..예를 들면 버스 타입인데 지하철 노선이라고 적어놨다든가.. 잘못 썼다든가...)
아무튼!
완성코드와 완성(이라고 하기엔 그냥 콘솔창에 나타나는 것 뿐이지만)결과는 아래와 같다.
<script>
function getInfo(sx, sy, ex, ey) {
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX=" + sx + "&SY=" + sy + "&EX=" + ex + "&EY=" + ey + "&apiKey=zZOOCFJaccyfaXpDSn6kJaK%2BV5CTfh4tdW7Bp4Mg2Jo";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
for (let i = 0; i < ((JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"]).length; i++) {
if ((JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["trafficType"] == 1) {
console.log(m + '번째 =', (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["startName"] + '-->'
+ (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["endName"],
'(지하철 ' + (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["lane"][0]["name"] + ')')
m++;
} else if ((JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["trafficType"] == 2) {
console.log(m + '번째 =', (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["startName"] + '-->'
+ (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["endName"],
'(버스 ' + (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["lane"][0]["busNo"] + '번)')
m++;
} else {
if ((JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["sectionTime"] == 0) {
console.log('(환승)')
} else {
console.log(m + '번째 = 도보로 이동', '(' + (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["sectionTime"] + '분 소요)')
m++;
}
}
}
}
}
}
</script>
👻 완성! 👻
헤헤.. 😉 이제 망원한강공원 앞으로 가는 기념으루다가~!
(tmi 사족을 덧붙이자면)
ODsay에 내 어플리케이션 관리를 들어가면 내가 해당 API를 몇 번 호출했는지 볼 수 있는데 새벽에 2시간 동안 80회 이상 호출했다는 게 너무 웃겼다. 얼마나 오류를 고치고 싶었길래...! ㅋㅋㅋㅋㅋ (지금은 90..!)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/date')
def review_date():
return render_template('review.html')
@app.route('/get_location')
def show_location():
return render_template('location.html')
<a class="nav-link" href="{{ url_for('review_date')}}">데이트 코스 추천</a>
아무튼, 아무튼~~ 이렇게 하면! 클릭할 때마다 잘 넘어가는 걸 확인할 수 있다!