From e7ca7515a452405659a2339e728f9a60031119f1 Mon Sep 17 00:00:00 2001 From: Ohyo Date: Tue, 2 Jul 2024 13:12:16 +0900 Subject: [PATCH] [ADD] --- src/ko/posts/info/kakao-map.md | 148 +++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 src/ko/posts/info/kakao-map.md diff --git a/src/ko/posts/info/kakao-map.md b/src/ko/posts/info/kakao-map.md new file mode 100644 index 00000000..bdd56d36 --- /dev/null +++ b/src/ko/posts/info/kakao-map.md @@ -0,0 +1,148 @@ +--- +date: 2024-07-02 +category: + - KAKAO +tag: + - KAKAO Map + - KAKAO Develope +--- + +# 카카오 맵 구현하기 (Typescript) + +우선 카카오 개발자 센터를 들어가서 앱 등록을 해주세요. + +[https://developers.kakao.com](https://developers.kakao.com) + +플랫폼에 들어가 사용할 플랫폼을 등록해줍니다. + +앱키에서 Javascript 키를 복사하여 다음 코드에 넣어서 `index.html`에 넣어주세요. + +```html + + + + +``` + +

+ +다음은 navigator.geolocation과 kakao API를 이용하여 주소를 구하는 예제입니다. `ex) 서울 동작구` + +```ts +interface IGeoLocationResponse { + address_name: string; + building_name: string; + main_building_no: string; + region_1depth_name: string; + region_2depth_name: string; + region_3depth_name: string; + road_name: string; + sub_building_no: string; + underground_yn: "Y" | "N"; + zone_no: string; +} + +const getGeoLocation = (coords: { + lat: number; + lng: number; +}): Promise => { + return new Promise((resolve, reject) => { + const geocoder = new window.kakao.maps.services.Geocoder(); + + const coord = new window.kakao.maps.LatLng(coords.lat, coords.lng); + + geocoder.coord2Address( + coord.getLng(), + coord.getLat(), + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (result: any, status: any) => { + if (status === window.kakao.maps.services.Status.OK) { + resolve(result[0].road_address); + } else { + reject("주소를 찾는데 실패하였습니다."); + } + } + ); + }); +}; + +navigator.geolocation.getCurrentPosition(async (position) => { + const res = await getGeoLocation({ + lat: position.coords.latitude, + lng: position.coords.longitude, + }); + + currentPosition.value = `${res.region_1depth_name} ${res.region_2depth_name}`; +}); +``` + +다음은 kakao API의 addressSearch를 이용하여 지도를 그리고 마커를 찍는 간단한 예제입니다. + +```vue + + + + +``` + +`Typescript`의 경우에 window객체에 kakao를 추가하지 않으면 타입스크립트 에러가 발생합니다. 다음과 같이 추가해주세요. + +```ts +// global.d.ts +export {}; + +declare global { + interface Window { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + kakao: any; + } +} +```