현재 이미지처럼 지도에 마커를 띄우는 코드를 수행했습니다.
추가적으로 이 마커 사이에 길찾기 경로를 출력하고 싶어 폴리라인과 카카오모빌리티 자동차 길찾기 API 를 이용하고자 했습니다.
async function getCarDirection(map) {
const REST_API_KEY = '내가 가진 api 키';
const url = 'https://apis-navi.kakaomobility.com/v1/directions';
const origin = `${marker1.longitude},${marker1.latitude}`;
const destination = `${marker2.longitude},${marker2.latitude}`;
const headers = {
Authorization: `KakaoAK ${REST_API_KEY}`,
'Content-Type': 'application/json'
};
const queryParams = new URLSearchParams({ origin, destination });
const requestUrl = `${url}?${queryParams}`;
try {
const response = await fetch(requestUrl, {
method: 'GET',
headers: headers
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
const linePath = data.routes[0].sections[0].vertexes.map(vertex => {
const [lat, lng] = vertex.split(",");
return new kakao.maps.LatLng(lat, lng);
});
const polyline = new kakao.maps.Polyline({
path: linePath,
strokeWeight: 5,
strokeColor: '#000000',
strokeOpacity: 0.7,
strokeStyle: 'solid'
});
polyline.setMap(map);
} catch (error) {
console.error('Error:', error);
}
}
그런데 다음과 같이 카카오 모빌리티 api 키를 불러오니
이와 같이 api 키 오류가 납니다… 혹시 해결 방법을 알려주실 수 있을까요 ㅠㅠ…