웹에서 길찾기 api 관련 문의

카카오내비
1

안녕하세요. 먼저 구현하고 자 하는 기능입니다.

  1. 출발지와 경유지, 목적지의 위도와 경도값을 가진 DB가 존재
  2. DB에서 각 위도와 경도값을 가져옴
  3. 자동차로 해당 경로를 운행의 예상되는 소요시간과 거리 값을 구함

위의 기능으로 최종적으로 얻고자 하는 것은
3번인데요.
해당 기능의 경우 웹에서 구현이 필요합니다.
위치값은 앱으로 DB에 넣고 있습니다.

해당 기능에 사용할 api 로 적절한 것이 어떤것이 있을까요?
모빌리티의 카카오내비 - 자동차 길찾기를 보고 있는데, 해당 api는 웹에서
구현을 js로 가능한가요?

2

안녕하세요. 카카오모빌리티 기술 제휴 담당자입니다.
아래와 같이 답변드립니다.

  1. 출발지/도착지/목적지에 따라 사용할 수 있는 API가 나뉩니다. 각각의 API별로 지원하는 장소 개수는 여기에서 확인하실 수 있습니다.

  2. js로 구현 가능합니다.

이밖에 카카오내비 서비스 사용 시 궁금한 점 있으시면 언제든 문의해 주세요.
감사합니다.

3

안녕하세요. 다중경유지 길찾기를 사용하여
https://apis-navi.kakaomobility.com/v1/destinations/directions url 사용시 401오류가 발생됩니다.
앱키는 발급받아서 적용시켰습니다.
개발문서에서 토큰 문제일 경우가 많다고 되어있는데.
해당 api도 토큰이 필요한가요??

5

401 오류 이후
스크립트를 다음과 같이 변경하였습니다.
url은 자동차 길찾기입니다.
var headers = {};
headers[“Authorization:KakaoAK”] = key;
headers[“Content-Type”] = “application/json”;

						var urlStr = "https://apis-navi.kakaomobility.com/v1/destinations/directions";

						var params = JSON.stringify({
										  "origins":
										    {
										      "x": "127.1331694942593",
										      "y": "37.4463137562622"
										    },
										  "destination":
											{
												"x": "127.13243772760565",
												"y": "37.44148514309502"
											},
								"waypoints":
									{
										"x": "127.1331694942593",
										"y": "37.4463137562622"
									},
							});

								$.ajax({
									method : "GET",
									url : urlStr,
									headers : headers,
									async : false,
									data : params,
									success : function(response) {
										console.log(response);
									},
									cache: false
								});
6

아 url 은
var urlStr = “https://apis-navi.kakaomobility.com/v1/directions”; 로 변경했고,
이 코드로 실행시 어떠한 오류 메세지도 발생하지 않지만
로그도 아무것도 찍히지 않습니다.

7

안녕하세요. 카카오모빌리티 기술 제휴 담당자입니다.
아래와 같이 답변드립니다.

  1. 401에러는 Authorization 헤더 부분이 잘못 설정되어서 그렇습니다.
    아래와 같이 설정하시면 됩니다.

headers[“Authorization”] = “KakaoAK” + " " + key

  1. “v1/directions” API 경우 params 은 아래와 같은 형태로 호출하셔야 될 것 같습니다.
    자세한 요청 포맷은 해당 API 문서를 참조해 주세요.

var params = {
origin: “127.1331694942593,37.4463137562622”,
destination: “127.13243772760565,37.44148514309502”,
waypoints: “127.1331694942593,37.4463137562622|127.1331694942593,37.4463137562622”
};

  1. 위의 안내드린 방식으로 요청이 성공할 경우 로그가 정상적으로 출력됩니다.

이밖에 카카오내비 서비스 사용 시 궁금한 점 있으시면 언제든 문의해 주세요.
감사합니다.

8

알려주신 대로 스크립트를 변경했으나 401 오류가 발생됩니다.
이 경우 키가 잘못되었다고 봐야할까요?

var headers = {};
headers[“Authorization”] = “KakaoAK” + " " + key;
headers[“Content-Type”] = “application/json”;

						var urlStr = "https://apis-navi.kakaomobility.com/v1/directions";

						var params = {
						origin: "127.1331694942593,37.4463137562622",
						destination: "127.13243772760565,37.44148514309502",
						waypoints: "127.1331694942593,37.4463137562622"
						};

								$.ajax({
									method : "GET",
									url : urlStr,
									headers : headers,
									data : params,
									success : function(data){
												//호출 성공하면 작성할 내용

console.log(data);
},
error:function(request,status,error){
alert(“code:”+request.status+"\n"+“message:”+request.responseText+"\n"+“error:”+error);
}
});

9

안녕하세요, 카카오모빌리티 기술 제휴 담당자입니다.

사용하신 키값이 REST API 키가 아닌 다른 키값을 사용하신 경우라면 에러가 반환될 수 있습니다.
REST API 키값 확인 방법은 여기에서 참고하실 수 있습니다.

감사합니다.