공부하자
api 란? & 카카오맵 연결하기 본문
api 란?
application programming interface 의 약자로 어떠한 응용프로그램에서 데이터를 주고 받기 위한 방법을 의미한다.
특정 사이트에서 특정 데이터를 공유할 경우 어떤 방식으로 정보를 요청하고 어떤 데이터를 제공 받을 수 있을지에 대한 규격들을 api라고 한다.
api는 사용하는 방법과 용도에 따라 오픈 api와 비공개 api 가 있다. 오픈 api는 말 그대로 누구나 쉽게 접근하여 정보를 공유하기 위해 만들어진 것이며 비공개의 경우 권한이 있는 일부 사용자들에게만 정보를 제공하기 위해 만들어진 것이라고 볼 수 있다.
참고 사이트
steemit.com/kr/@yahweh87/it-api
[IT용어] API란 무엇인가? — Steemit
안녕하세요. 어미새입니다. 정말 오랜만에 스팀잇에 포스팅을 진행하는것 같습니다. 개인적으로 바쁜 일상을 보내고 있다보니, 1일 1포스팅이 아닌 1주 1포스팅도 어려운 상황이었습니다. 다시
steemit.com
ex. 카카오에서 제공하는 오픈 api인 카카오맵 연결하기
1. 맵 연동 전 APP KEY 발급받기
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
에 접속한다. (회원 가입 후 로그인)
1-2. 상단 애플리케이션 메뉴 클릭, 애플리케이션 추가하기
1-3. 앱 이름은 test, 프로젝트명.. 등등 (사업자명은 앱 이름과 동일하게 써주면 된다.)
1-4. 개설한 애플리케이션 클릭 후 플랫폼 설정
(환경에 맞는 플랫폼 설정을 해주면 된다. 보통의 테스트는 web 플랫폼 등록하여 주소 입력. github 주소 등록도 가능)
1-5. 앱키 중 Javascript 키 복사
1-6. html > header 에 api 불러오기
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 app key"></script>
선언까지 마치면 body 부분에 맵이 삽입될 영역을 지정해준다.
<div id="map" style="width:500px;height:400px;"></div> <!-- 사이즈는 디자인에 맡게 변경 -->
2. 지도 생성하기
2-1. apis.map.kakao.com/
에 접속한다.
2-2. sample 메뉴에 '지도 생성하기' 참고하여 script 삽입
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = { center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
2-3. 지도의 좌표 쉽게 구하는 방법
구글 맵에서 제공하는 좌표값 복사 후 'mapOption'의 좌표값만 수정해주면 된다.
* 실서버에서 확인 가능하므로 서버에 올려 테스트 확인할 것
sample 메뉴에 올라와있는 내용을 참고해 지도 이동막기, 마커 생성 등 다양한 기능을 추가 할 수 있다.
카카오가 제공하는 map api 기능에 대한 자세한 설명은 doc 메뉴에서도 확인 할 수 있다.
apis.map.kakao.com/web/documentation/
test.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값"></script>
<script>
$(function(){
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.52088249573368, 127.1214619105749), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(37.52088249573368, 127.1214619105749);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
})
//37.52088249573368, 127.1214619105749
</script>
</head>
<body>
<div id="map" style="_width:500px;height:400px;"></div>
</body>
</html>
'ETC' 카테고리의 다른 글
| 다양한 웹폰트 (0) | 2021.02.08 |
|---|---|
| 다양한 제이쿼리 레퍼런스를 정리해둔 사이트 (0) | 2021.01.23 |
| Json과 ajax, ajax로 데이터 값 가져오기 (0) | 2021.01.10 |
| 반응형 웹(Responsive Web)과 모바일 해상도 (0) | 2021.01.04 |
| 비주얼 스튜디오 코드&깃허브 연동하기(Mac) (0) | 2020.11.30 |