1. kakaomap
-카카오 개발자 사이트 로그인/등록하기
-developers.kakao.com
-내 애플리케이션 생성
-각종 key가 발급된다.
-플랫폼 등록(web)
http://localhost:5500 (여기서 5500은 live server의 포트)
-VS Code에서 Five Server 설치
-웹 서버 구동 단축키 : Control + L + O
-화면 권환에서 위치 정보 허용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>지도 생성하기</title>
</head>
<body>
<!-- 지도를 표시할 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>
//1. navigator을 이용하여 현재 위치 가져오기 (오차 심함)
var lat;
var lon;
navigator.geolocation
.getCurrentPosition(function(pos)
{
lat = pos.coords.latitude;
lon = pos.coords.longitude;
console.log(lat);
console.log(lon);
});
//2. 카카오맵으로 표기하기
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(lat, lon), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
</body>
</html>