맵 Ver0.1 브라우저접속시 해당위치와 주소가져오기 정보
맵 Ver0.1 브라우저접속시 해당위치와 주소가져오기
관련링크
첨부파일
본문
브라우저접속시 해당위치와 주소가져오기
plugin 폴더에 넣어두고 필요한곳에서 호출하여 사용하십시오
<?php
// my_location.php
// PHP는 여기서 단순히 HTML을 출력합니다.
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>내 위치 지도 표시</title>
<!-- ✅ Kakao 지도 SDK 불러오기 (YOUR_APP_KEY 부분을 실제 JS 키로 교체) -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오키(자바스크립트)&libraries=services"></script>
<style>
body {
font-family: 'Pretendard', sans-serif;
margin: 0; padding: 0;
display: flex; flex-direction: column;
height: 100vh;
}
#map {
flex: 1;
width: 100%;
}
#info {
padding: 12px;
background: #f8f8f8;
border-top: 1px solid #ddd;
font-size: 15px;
}
</style>
</head>
<body>
<h3 style="padding:10px; margin:0;">📍 내 위치 확인</h3>
<div id="map"></div>
<div id="info">현재 위치를 불러오는 중...</div>
<script>
let map, marker, geocoder;
function initMap(lat, lon) {
const mapContainer = document.getElementById('map');
const mapOption = {
center: new kakao.maps.LatLng(lat, lon),
level: 3
};
map = new kakao.maps.Map(mapContainer, mapOption);
// 마커 표시
const pos = new kakao.maps.LatLng(lat, lon);
marker = new kakao.maps.Marker({
position: pos,
map: map
});
// 주소 변환 객체 생성
geocoder = new kakao.maps.services.Geocoder();
// 위도·경도를 주소로 변환
geocoder.coord2Address(lon, lat, function(result, status) {
const info = document.getElementById('info');
if (status === kakao.maps.services.Status.OK) {
const addr = result[0].address ? result[0].address.address_name : result[0].road_address.address_name;
info.innerHTML = `
<b>현재 주소:</b> ${addr}<br>
<b>위도:</b> ${lat.toFixed(6)} / <b>경도:</b> ${lon.toFixed(6)}
`;
} else {
info.textContent = '주소 정보를 불러오지 못했습니다.';
}
});
}
// ✅ 브라우저에서 내 위치 가져오기
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
pos => {
const lat = pos.coords.latitude;
const lon = pos.coords.longitude;
initMap(lat, lon);
},
err => {
console.error(err);
document.getElementById('info').textContent = '위치 정보를 가져오지 못했습니다. (권한 거부 또는 오류)';
},
{ enableHighAccuracy: true, timeout: 10000 }
);
} else {
document.getElementById('info').textContent = '이 브라우저는 위치 정보를 지원하지 않습니다.';
}
</script>
</body>
</html>
추천
6
6
댓글 전체
감사 합니다.
감사합니다
감사합니다 ^^
피시에서는 현재위치 차이가 많이 나고 모바일에서는 근접하는데 아주 정확하지는 않습니다. 정확하다면 유용할 것 같습니다
감사합니다
** 다른 기기에서도 테스트 해보겠습니다
모바일 카카오맵에 들어가서 보니 역시 현재 위치가 정확하지 않네요...카카오맵의 문제었던 것 같습니다. 감사합니다
