<input type="text" id="origin" placeholder="출발지 검색">
<input type="text" id="layover" placeholder="경유지 검색">
<input type="text" id="destination" placeholder="도착지 검색">
<button type="button" id="directions" value="검색">길찾기</button>
출발지 검색과 경유지 검색 도착지 검색을 통하여 길찾기 버튼을 누르면 맵에 폴리라인을 그리는 것을 생각하고 있습니다.
길찾기는 다중 경유지 길찾기를 사용할 건데 값을 데이터를 좌표로 받더라고요.
장소 검색 한 값을 좌표로 변환해주는 geocoder를 사용하여 변수에 저장 한 후, 그 값을 쿠키를 사용하여 저장한 후에 그 좌표 값을 다중 경유지 길찾기 api json 형식으로 값을 넣어 호출한 후 object 값을 받아오는 걸 하는데 defined가 떠서 그런데 어디가 잘못 되었는지 잘 모르겠어요. 해결 방법이 있나요?
// 출발지, 경유지, 도착지를 검색하여 좌표로 변환하고 쿠키에 저장하는 함수
async function saveCoordinatesToCookie() {
try {
// Get coordinates for origin, layover, and destination
let originAddress = document.getElementById('origin').value.trim();
let layoverAddress = document.getElementById('layover').value.trim();
let destinationAddress = document.getElementById('destination').value.trim();
let originCoords = await geocodeAddress(originAddress);
let layoverCoords = await geocodeAddress(layoverAddress);
let destinationCoords = await geocodeAddress(destinationAddress);
// Save coordinates to cookies
setCookie('originCoords', JSON.stringify(originCoords), 7);
setCookie('layoverCoords', JSON.stringify(layoverCoords), 7);
setCookie('destinationCoords', JSON.stringify(destinationCoords), 7);
console.log('Coordinates saved to cookies.');
} catch (error) {
console.error('Error:', error.message);
}
}
// 쿠키에서 좌표를 검색하여 polyline을 그리는 함수
async function drawPolylineFromCookies() {
try {
// Retrieve coordinates from cookies
let originCoords = JSON.parse(getCookie('originCoords'));
let layoverCoords = JSON.parse(getCookie('layoverCoords'));
let destinationCoords = JSON.parse(getCookie('destinationCoords'));
// Call directions API with retrieved coordinates
let requestData = {
origin: {
x: originCoords.lng,
y: originCoords.lat
},
destination: {
x: destinationCoords.lng,
y: destinationCoords.lat
},
waypoints: [
{
name: "layover",
x: layoverCoords.lng,
y: layoverCoords.lat
}
],
priority: "RECOMMEND",
car_fuel: "GASOLINE",
car_hipass: false,
alternatives: false,
road_details: false
};
let response = await fetch("https://apis-navi.kakaomobility.com/v1/waypoints/directions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "KakaoAK 5edb87c0719b07cbaea4f033ee95a92f" // 여기에 실제 API 키 입력
},
body: JSON.stringify(requestData)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
let data = await response.json();
console.log(data);
displayRoute(data);
} catch (error) {
console.error('Error:', error.message);
}
}
// 다중 경유지 길찾기 API를 호출하여 polyline을 그리는 함수
function displayRoute(data) {
// 기존 폴리라인 삭제
if (polyline) {
polyline.setMap(null);
}
let points = [];
data.routes.forEach(route => {
route.sections.forEach(section => {
section.roads.forEach(road => {
for (let i = 0; i < road.vertexes.length; i += 2) {
points.push(new kakao.maps.LatLng(road.vertexes[i + 1], road.vertexes[i]));
}
});
});
});
polyline = new kakao.maps.Polyline({
path: points,
strokeWeight: 5,
strokeColor: '#0000FF',
strokeOpacity: 1,
strokeStyle: 'solid'
});
polyline.setMap(map);
}
// 쿠키에서 값을 가져오는 함수
function getCookie(name) {
let cookieArr = document.cookie.split(';');
for (let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split('=');
if (name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}