s01_geolocation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>좌표읽기</title>
<script type="text/javascript">
window.onload = function(){
if(navigator.geolocation==undefined){
alert('본 기기가 위치정보를 지원하지 않습니다.');
return;
}
/*
[옵션]
frequency : 위치 정보를 가져올 시간 간격으로 단위는 밀리세컨드(ms),기본값은 10000
enableHighAccuracy: 위치 정보의 정확성을 최상으로 할지를 지정
timeout: 기기로부터 위치 정보를 가져올 때 까지의 최대 대기 시간 단위는 밀리세컨드(ms)
maximumAge: 위치 정보를 캐싱하는 기간을 지정, 단위는 밀리세컨드(ms)
*/
//getCurrentPosition: 사용자의 현재 기기의 위치를 pisition 오브젝트형으로 한번만 반환
navigator.geolocation.getCurrentPosition(
success,fail,{timeout:10000});
//위도,경도값 호출이 가능한 경우
function success(position){//현재 위치 값
/*
latitude : 위도
longitude : 경도
altitude : 고도
accuracy : 위도와 경도의 정확도
altitudeAccuracy : 고도의 정확도
heading : 방향 (북쪽으로부터 시계 방향으로 현재 방향까지의 각도)
speed : 현재 기기의 속도를 meter per second
*/
document.getElementById('startLat').innerHTML = position.coords.latitude;
document.getElementById('startLon').innerHTML = position.coords.longitude;
}
//위도,경도값 호출이 불가능한 경우
function fail(error){
alert('에러 발생 코드:' + error.code);
/*
0:알 수 없는 오류
1:권한 거부
2:위치 추적 실패
3:시간 초과
*/
}
//현재 위치를 계속 확인
//watchPosition : 일정 간격으로 기기의 위치가 바뀌면 현재 기기의 위치를 position 오브젝트 형으로 반환
let watchId = navigator.geolocation.watchPosition(
function(position){
let lat = position.coords.latitude;
let lon = position.coords.longitude;
let acc = position.coords.accuracy;
document.getElementById('currentLat').innerHTML = lat;
document.getElementById('currentLon').innerHTML = lon;
document.getElementById('acc').innerHTML = acc;
});
const btn = document.getElementById('btn');
//이벤트 연결
btn.addEventListener('click',function(){
//clearWatch : watchPosition 메서드로 위치 추적을 하는 것을 해제하는 역할
navigator.geolocation.clearWatch(watchId);
alert('위치 추적이 해제됨');
},false);
};
</script>
</head>
<body>
시작 위치(위도,경도) :<br>
<span id="startLat">위도</span>°
<span id="startLon">경도</span>°
<br><br>
현재 위치(위도,경도) :<br>
<span id="currentLat">위도</span>°
<span id="currentLon">경도</span>°
<br><br>
정확도 : <br>
<span id="acc">정확도</span>미터 정도의 정확도를 보임
<br><br>
<button id="btn">위치 추적 해제</button>
</body>
</html>위치정보는 개인정보이기 때문에 수락을 해야지 위치가 나온다.
모바일 기기를 쓰면 현재 위치가 계속 업데이트 된다.(현재는 컴퓨터라 시작위치랑 같은값을 보여줌)
s02_daumMap.html
/*
1.<<a href=http://developers.kakao.com/>http://developers.kakao.com/</a>> 로 이동
2.로그인
3.웹 개발 시작 앱 생성
4.설정 - 일반
5. 플랫폼 - 웹 <http://localhost:8080> 으로 지정. ip사용시 ip 지정
6.위에 스크립트에 있는 src 다음에 오는 JavaScript 키 복사해서 script에 표시
7.자바스크립트 관련 지도 가이드 - <<a href=https://apis.map.kakao.com/web/guide>https://apis.map.kakao.com/web/guide</a>>
*/
window.onload = function(){
if(!navigator.geolocation){
alert('본 기기가 위치정보를 지원하지 않습니다.');
return;
}
navigator.geolocation.getCurrentPosition(function(position){
//위도
let lat = position.coords.latitude;
//경도
let lon = position.coords.longitude;
//지도를 표시할 div
const mapContainer = document.getElementById('map');
//지도에 설정할 옵션 값 지정
const mapOption = {
center:new daum.maps.LatLng(lat,lon),//지도의 중심 좌표
level:3 // 지도의 확대 레벨
};
//지도 생성
const map = new daum.maps.Map(mapContainer,mapOption);
//마커가 표시될 위치
const pos = new daum.maps.LatLng(lat,lon);
//마커 생성
const marker = new daum.maps.Marker({
position:pos,
clickable:true // 마커를 클릭했을 때 지도의 클릭 이벤트 처리
});
//마커를 지도에 표시
marker.setMap(map);
//마커를 클릭했을 때 마커 위에 표시할 인포윈도우 내용 명시
let iwContent = '<div style="padding:10px;width:250px;height:38px;">'
+ lat +','+lon+'<br>나 여기 있어요!!</div>';
//인포윈도우 생성
const infowindow = new daum.maps.InfoWindow({
content:iwContent,
removable:true //x버튼 표시
});
//마커에 클릭 이벤트 등록
daum.maps.event.addListener(marker,'click',function(){
//마커 위에 인포윈도우를 표시
infowindow.open(map,marker);
});
});
};
src에 들어갈 내용
'쌍용교육(JAVA) > JavaScript' 카테고리의 다른 글
| 쌍용교육 -JavaScript수업 40일차 HTMLCanvas(3) (0) | 2024.04.15 |
|---|---|
| 쌍용교육 -JavaScript수업 40일차 HTMLCanvas(2) (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 40일차 HTMLCanvas(1) (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39~40일차 HTMLFile (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39일차 HTMLWebStorage (0) | 2024.04.15 |
