카카오 맵 오류 수정, 현재위치

오지민
Commit b23df46804524b8347c8cab97b3ba97fd7cfada3 b23df468 1 parent 6abff4fc
Showing 1 changed file with 140 additions and 0 deletions
kakao/kakaomap3.html
--- a/kakao/kakaomap3.html 0 → 100644
View file @b23df46
+++ b/kakao/kakaomap3.html 0 → 100644
View file @b23df46
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>다음 지도 API</title>
+</head>
+<body>
+	<div id="map" style="width:750px;height:350px;"></div>
+
+	<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=a21612f3bd7cf34230c238ce03ca482b"></script>
+	<script>
+		var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
+		    mapOption = {
+		        center: new kakao.maps.LatLng(37.56819, 126.98042), // 지도의 중심좌표
+		        level: 2, // 지도의 확대 레벨
+		        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
+		    }; 
+
+		// 지도를 생성한다 
+		var map = new kakao.maps.Map(mapContainer, mapOption); 
+
+        var marker = new kakao.maps.Marker({
+		    position: new kakao.maps.LatLng(37.56756, 126.97927), // 마커의 좌표
+		    map: map // 마커를 표시할 지도 객체
+		});
+
+        var iwContent = '<div style="padding: 5px">내용</div>'
+
+        
+        
+        // 인포윈도우를 생성합니다
+        var infowindow = new kakao.maps.InfoWindow({
+            position : iwPosition, 
+            content : iwContent 
+        });
+  
+        // 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
+        infowindow.open(map, marker); 
+
+        // HTML5의 geolocation으로 사용할 수 있는지 확인합니다 
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(function(position) {
+                var lat = position.coords.latitude, // 위도
+                lon = position.coords.longitude; // 경도
+                var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
+                message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
+        
+                // 마커와 인포윈도우를 표시합니다
+                displayMarker(locPosition, message);
+            });
+    
+        }
+
+        else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
+             var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),    
+             message = 'geolocation을 사용할수 없어요..'
+             displayMarker(locPosition, message);
+        }
+
+        var gps_use = null; //gps의 사용가능 여부
+        var gps_lat = null; // 위도
+        var gps_lng = null; // 경도
+        var gps_position; // gps 위치 객체
+
+        gps_check();
+        // gps가 이용가능한지 체크하는 함수이며, 이용가능하다면 show location 함수를 불러온다.
+        // 만약 작동되지 않는다면 경고창을 띄우고, 에러가 있다면 errorHandler 함수를 불러온다.
+        // timeout을 통해 시간제한을 둔다.
+        function gps_check(){
+            if (navigator.geolocation) {
+                var options = {timeout:60000};
+                navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
+            } else {
+                alert("GPS_추적이 불가합니다.");
+                gps_use = false;
+            }
+        }
+
+
+        // gps 이용 가능 시, 위도와 경도를 반환하는 showlocation함수.
+        function showLocation(position) {
+            gps_use = true;
+            gps_lat = position.coords.latitude;
+            gps_lng = position.coords.longitude;
+        }
+
+
+        // error발생 시 에러의 종류를 알려주는 함수.
+        function errorHandler(error) {
+            if(error.code == 1) {
+                alert("접근차단");
+            } else if( err.code == 2) {
+                alert("위치를 반환할 수 없습니다.");
+            }
+            gps_use = false;
+        }
+
+        function gps_tracking(){
+            if (gps_use) {
+                map.panTo(new kakao.maps.LatLng(gps_lat,gps_lng));
+                var gps_content = '<div><img class="pulse" draggable="false" unselectable="on" src="https://ssl.pstatic.net/static/maps/m/pin_rd.png" alt=""></div>';
+                var currentOverlay = new kakao.maps.CustomOverlay({
+                    position: new kakao.maps.LatLng(gps_lat,gps_lng),
+                    content: gps_content,
+                    map: map
+                });
+                currentOverlay.setMap(map);
+            } else {
+            alert("접근차단하신 경우 새로고침, 아닌 경우 잠시만 기다려주세요.");
+            gps_check();
+            }
+        }
+
+
+        // 지도에 마커와 인포윈도우를 표시하는 함수입니다
+        function displayMarker(locPosition, message) {
+            // 마커를 생성합니다
+            var marker = new kakao.maps.Marker({  
+            map: map, 
+            position: locPosition
+        }); 
+        var iwContent = message, // 인포윈도우에 표시할 내용
+        iwRemoveable = true;
+
+        // 인포윈도우를 생성합니다
+        var infowindow = new kakao.maps.InfoWindow({
+            content : iwContent,
+            removable : iwRemoveable
+        });
+
+        // 인포윈도우를 마커위에 표시합니다 
+        infowindow.open(map, marker);
+    
+        // 지도 중심좌표를 접속위치로 변경합니다
+        map.setCenter(locPosition);      
+    }    
+       
+	</script>
+</body>
+</html>
\ No newline at end of file