오지민 / HomePurchaseAgePrediction

Go to a project
Toggle navigation Toggle navigation pinning
오지민
b23df468 1 parent 6abff4fc

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

Inline Side-by-side
Showing 1 changed file with 140 additions and 0 deletions
<!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