Skip to content

Commit

Permalink
에러 고치는중...
Browse files Browse the repository at this point in the history
  • Loading branch information
@hdddhdd
hdddhdd committed Nov 12, 2023
1 parent 0676d87 commit 00e34b1
Showing 1 changed file with 119 additions and 48 deletions.
167 changes: 119 additions & 48 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ <h1>Vanilla JavaScript App</h1>
<!- -test-->
<!-- <p>출발지 좌표: <b id="resultStart">...</b></p>
<p>도착지 좌표: <b id="resultEnd">...</b></p> -->

<p>Findroad API: <b id="findroad">...</b></p>


Expand Down Expand Up @@ -223,61 +223,132 @@ <h1>Vanilla JavaScript App</h1>
}());
</script>

<script>
async function convertAddresses() {
const startX = document.getElementById('startX').value;
const startY = document.getElementById('startY').value;

try {
const resultStart = await callTMapAPI(startX);
const resultEnd = await callTMapAPI(startY);

// test
const resultStartElement = document.getElementById('resultStart');
resultStartElement.innerHTML = `출발지 (위도: ${resultStart.latitude}, 경도: ${resultStart.longitude})`;

const resultEndElement = document.getElementById('resultEnd');
resultEndElement.innerHTML = `도착지 (위도: ${resultEnd.latitude}, 경도: ${resultEnd.longitude})`;

// 변환된 좌표로 Tmap API 호출 및 결과 표시
const { text } = await (
await fetch(`/api/findroad`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
startX: resultStart.longitude,
startY: resultStart.latitude,
endX: resultEnd.longitude,
endY: resultEnd.latitude,
}),
})
).json();

document.querySelector('#findroad').textContent = text;
} catch (error) {
console.error('주소 변환 및 API 호출에 실패하였습니다:', error);
<script>
// async function convertAddresses() {
// const startX = document.getElementById('startX').value;
// const startY = document.getElementById('startY').value;

// try {
// const resultStart = await callTMapAPI(startX);
// const resultEnd = await callTMapAPI(startY);

// // test
// const resultStartElement = document.getElementById('resultStart');
// resultStartElement.innerHTML = `출발지 (위도: ${resultStart.latitude}, 경도: ${resultStart.longitude})`;

// const resultEndElement = document.getElementById('resultEnd');
// resultEndElement.innerHTML = `도착지 (위도: ${resultEnd.latitude}, 경도: ${resultEnd.longitude})`;

// // 변환된 좌표로 Tmap API 호출 및 결과 표시
// // const { text } = await (
// // await fetch(`/api/findroad`, {
// // method: 'POST',
// // headers: {
// // 'Content-Type': 'application/json',
// // },
// // body: JSON.stringify({
// // startX: resultStart.longitude,
// // startY: resultStart.latitude,
// // endX: resultEnd.longitude,
// // endY: resultEnd.latitude,
// // }),
// // })
// // ).json();

// try {
// const response = await fetch(`/api/findroad`, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
// body: JSON.stringify({
// startX: resultStart.longitude,
// startY: resultStart.latitude,
// endX: resultEnd.longitude,
// endY: resultEnd.latitude,
// }),
// });

// if (response.ok) {
// const responseData = await response.json();
// const text = responseData.text;
// console.log(text);
// } else {
// console.error(`Request failed with status ${response.status}`);
// // 여기서 다양한 오류 처리를 수행할 수 있습니다.
// }
// } catch (error) {
// console.error('오류 발생:', error);
// // 여기서 다양한 오류 처리를 수행할 수 있습니다.
// }

// document.querySelector('#findroad').textContent = text;
// } catch (error) {
// console.error('주소 변환 및 API 호출에 실패하였습니다:', error);
// }
// }
async function convertAddresses() {
const startX = document.getElementById('startX').value;
const startY = document.getElementById('startY').value;
let text; // 변수 선언

try {
const resultStart = await callTMapAPI(startX);
const resultEnd = await callTMapAPI(startY);

// test
const resultStartElement = document.getElementById('resultStart');
resultStartElement.innerHTML = `출발지 (위도: ${resultStart.latitude}, 경도: ${resultStart.longitude})`;

const resultEndElement = document.getElementById('resultEnd');
resultEndElement.innerHTML = `도착지 (위도: ${resultEnd.latitude}, 경도: ${resultEnd.longitude})`;

// 변환된 좌표로 Tmap API 호출 및 결과 표시
const response = await fetch(`/api/findroad`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
startX: resultStart.longitude,
startY: resultStart.latitude,
endX: resultEnd.longitude,
endY: resultEnd.latitude,
}),
});

if (response.ok) {
const responseData = await response.json();
text = responseData.text;
console.log(text);
} else {
console.error(`Request failed with status ${response.status}`);
// 여기서 다양한 오류 처리를 수행할 수 있습니다.
}

document.querySelector('#findroad').textContent = text;
} catch (error) {
console.error('주소 변환 및 API 호출에 실패하였습니다:', error);
}
}

async function callTMapAPI(address) {
const url = `https://apis.openapi.sk.com/tmap/geo/convertAddress?version=1&searchTypCd=NtoO&reqAdd=${address}&reqMulti=S&resCoordType=WGS84GEO&appKey=`;
async function callTMapAPI(address) {
const url = `https://apis.openapi.sk.com/tmap/geo/convertAddress?version=1&searchTypCd=NtoO&reqAdd=${address}&reqMulti=S&resCoordType=WGS84GEO&appKey=`;

const response = await fetch(url);
const response = await fetch(url);

if (!response.ok) {
throw new Error(`API request failed with status code ${response.status}`);
}
if (!response.ok) {
throw new Error(`API request failed with status code ${response.status}`);
}

const responseData = await response.json();
const responseData = await response.json();

const latitude = responseData.ConvertAdd.newAddressList.newAddress[0].newLat;
const longitude = responseData.ConvertAdd.newAddressList.newAddress[0].newLon;
const latitude = responseData.ConvertAdd.newAddressList.newAddress[0].newLat;
const longitude = responseData.ConvertAdd.newAddressList.newAddress[0].newLon;

return { latitude, longitude };
}
</script>
return { latitude, longitude };
}
</script>

<script>
async function callTMapAPI(address) {
Expand Down

0 comments on commit 00e34b1

Please sign in to comment.