API 호출
Vue.js에서 카카오맵 API를 사용하려고 하면 문제가 있다.
script에서 API를 불러와야 하는데, API KEY가 그대로 노출된다는 점이다.
이를 위해 환경 변수 파일(.env)에 API KEY나 Base URL 등을 넣어서 외부에서 볼 수 없도록 관리하는데, HTML에서는 동적 기능을 사용할 수 없기 때문에 .env에서 데이터를 읽어올 수 없다.
API가 제대로 로딩되지 않을 경우 kakao is not defined를 만나게 된다.
Vue 컴포넌트에서는 다음과 같이 선언해 API를 불러올 수 있다.
mounted() {
const script = document.createElement('script');
script.type="text/javascript"
script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.VUE_APP_KAKAO_API_KEY}&autoload=false`;
document.head.appendChild(script);
}autoload=false는 비동기로 통신할 경우 추가해야 하는 파라미터이다.
Vue.js에서는 최상단에 존재하는 .env 파일의 변수를 읽어올 때 process.env.변수명 형태로 읽어오면 된다.
길찾기 출발지 지정
이건 Vue.js 뿐만 아니라 다른 카카오맵 web API에도 모두 해당되는 내용이다.
안드로이드와 iOS api는 길찾기에서 출발지 - 도착지를 함께 지정할 수 있는데, 웹에서는 공식적으로 제공하지 않는다.
웹에서 가능한 방법 첫번째는
`https://map.kakao.com/?sName=${출발지}&eName=${목적지}`다음과 같은 형태로 지정하는 것이다. 출발지와 목적지는 주소로 해도 되고, 장소 이름으로 할 경우 카카오맵에서 검색되는 가장 최상단의 장소로 이동한다.
이 방법으로 웹 환경에서는 출발지 - 목적지 길찾기를 띄울 수 있지만, 웹모바일 환경과 같은 웹뷰 환경에서는 이 지도가 제대로 작동하지 않는다. 웹뷰 환경을 고려한다면 다른 방법이 필요하다.
먼저 카카오맵 API 가이드에서 길찾기 -> /link/to/이름,위도,경도 를 눌러보면 다음과 같은 url로 접속한다.
다음과 같은 url로 변경되고, 파라미터를 보면 rt2가 목적지임을 알 수 있다. rt1을 출발지 이름이나 주소로 지정할 경우 자동으로 출발지 설정이 된다.
여기서 rt2를 목적지명을 변경한다고 해서 바로 가능하냐고 하면, 아니다.
이렇게 지정했을때 서현역에서 모란역으로 가는 길찾기가 그려져야 할 것 같지만, 도착지는 여전히 카카오판교오피스이다. 목적지를 바꾸기 위해서는 목적지 좌표를 가리키는 rt 파라미터를 변경해야 한다.
%2C는 ,를 나타내는 아스키 코드니까 넘어가고, rt 파라미터의 (523953, 1084098)이라는 좌표가 무엇인지 알아야 한다.
이는 WCONGNAMUL 좌표라는 우리나라만 사용하는 좌표개념이다.
목적지를 지정하려면 목적지의 WCONGNAMUL 좌표를 미리 알고 있거나, WGS84 좌표 등의 다른 좌표를 WCONGNAMUL 좌표로 변경해야 한다. 좌표계 변경은 카카오 REST API에서 기능을 제공하고 있다.
https://developers.kakao.com/docs/latest/ko/local/dev-guide#trans-coord
콩나물 좌표를 이용해 다음과 같이 URL을 지정하면 웹모바일 환경에서도 목적지를 잘 가리키는 지도가 나온다.
var url = `https://map.kakao.com/?map_type=TYPE_MAP&target=car&rt=${도착지 WCONGNAMUL x좌표},${도착지 WCONGNAMUL y좌표}&rt1=${출발지 주소}&rt2=${도착지명}&rtIds=%2C&rtTypes=%2C`