728x90
카카오 지도 api 를 사용하며 가장 많이 사용한 기능이라고 생각한다.
내가 쓰고 싶고, 가져왔던 데이터들이 다 주소만 있고 위도 경도가 포함이 되어있지 않아 지도에 표시하려면 주소를 위도, 경도로 바꾸어주는 기능이 꼭 필요했다.
저번 프로젝트때는 검색 기능을 넣어 검색한 주소의 위도 경도만 출력되게 만들었었는데
이번에는 약 500개의 위도, 경도가 필요해서 위도 경도만 출력되게 만들었다.
그 와중에 주소가 잘 못되어 위도 경도가 나오지 않는 경우도 있고 순서가 제멋대로라 excelId를 통해 1번부터 끝번까지 제대로 출력되는지를 확인하고 위도는 result[0].y , 경도는 result[0].x로 출력해서 엑셀에 넣은 후 다시 이를 h2 데이터 베이스에 넣는 작업을 반복했다
<body>
</body>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f6654953f7f2de9be8090793a3c14e09&libraries=services"></script>
<script th:inline="javascript">
var geocoder = new kakao.maps.services.Geocoder();
let code = '';
async function getData() {
const data = await fetch('/tetest/data');
const res = await data.json();
var code = '';
for (const v of res) {
var excelData = v.address;
var excelId = v.id;
try {
const result = await new Promise((resolve, reject) => {
geocoder.addressSearch(excelData, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
resolve(result);
} else {
reject(status);
}
});
});
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// code += ` ${excelId},`;
// code += ` ${result[0].y}<br>`;
code += ` ${result[0].x}<br>`;
} catch (error) {
console.error(error);
}
}
return code;
}
async function show() {
const code = await getData();
document.querySelector('body').innerHTML += code;
}
show();
</script>728x90
'웹 개발' 카테고리의 다른 글
| Excel 데이터를 h2 데이터베이스에 저장하기 (0) | 2023.10.24 |
|---|---|
| 카카오 지도 api 활용 - 다양한 이미지 마커 표시하기2 (1) | 2023.10.24 |
| 카카오 지도 api 활용 - 다양한 이미지 마커 표시하기 (1) | 2023.10.23 |
| 카카오 지도 api 활용 - 현재 위치 기준 반경 데이터만 마커 생성 (1) | 2023.10.23 |
| 카카오 지도 api 활용 - 지도 marker, infowindow (0) | 2023.10.23 |
