반응형
이번에는 상단바 밑에 카카오맵을 적용 시키는 단계.
우선 https://developers.kakao.com/ 들어가서
내어플리케이션을 추가 합니다 .
추가한 어플리케이션에는 REST API 키가 적혀있을건데 이걸 켜둡시다.
다음으론
https://apis.map.kakao.com/web/sample/basicMap/ 에 있는
Javascript + HTML 탭 내용을 복사한다.
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<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);
</script>상단바 밑에 추가 하려고 하기 때문에 id가 map 인 div 부터 복사하면 된다 .
발급받은 APP KEY를 사용하세요 <- 이 문구를 아까 확인한 REST API KEY 로 변경함.결과 화면
카카오맵이 상단바 밑에 들어가게 되었습니다.
네모칸 안에 있는 소스만 복사해서 반영 하고
실제 로컬에 있는 소스는 이러합니다.
다음으로는 화면 비율을 맞춰주어야 하는데
html, body, div 부분의 비율을 다음과 같이 변경 합니다.
<html lang="en" style="height: 100%;">
<body style="height: 100%;">
<div id="map" style="width:100%;height:93%;"></div>
map의 높이가 93% 인 이유는 하다보니 상단바 비율이 7%정도 되는거 같아서 93% 로 지정함.
변경하고 다시 실행 해보면 화면에 상단바 + 지도가 꽉찬 걸 확인 할 수 있다.
다음 포스팅에서는 이러한 소스를 활용하기 위해
정부에서 지원하는 공공데이터 마스크 수량 정보 데이터를 통신해서 경도,위도,약국이름 등등을 받아오고
이걸 실제 카카오맵에 마커를 찍기 위해 어떠한 작업을 해야하는지 , 어떻게 활용할지 포스팅 하도록 하겠습니다.
반응형
LIST
'IT > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트로 카카오맵 기반 마스크맵 만들기 6단계 (0) | 2020.06.17 |
|---|---|
| 자바스크립트로 카카오맵 기반 마스크맵 만들기 5단계 (0) | 2020.06.15 |
| 자바스크립트로 카카오맵 기반 마스크맵 만들기 3단계 (0) | 2020.06.10 |
| 자바스크립트로 카카오맵 기반 마스크맵 만들기 2단계 (0) | 2020.06.10 |
| 카카오맵 오픈API 기반 마스크맵 만들기 1단계 (0) | 2020.06.10 |
댓글