구글맵 API를 이용해서 지도 나타내기 (현재위치 표시, 위경도 출력)
어떻게 만들건지 기본적인 틀을 짜도록 하자.
위치찾기버튼
중단버튼
위경도를 보여줄 div
지도를 보여줄 div
=> 총 버튼2개, div2개를 만들어놓도록 하자.
|
1
2
3
4
5
6
7
|
<body>
<button id="start"> 위치확인시작 </button>
<button id="stop"> 위치확인중단 </button>
<div id="result" > </div>
<div id='map' style="width: 1024px; height: 600px">
맵 로딩 예정입니다. </div>
</body>
|
이제 본격적으로 기능을 작성해야하는데, 다소 주석처리들로 인해서 보기 불편할 수 있을까봐 재차 코드를 작성하면서 풀어서 설명하겠습니다.
가장 먼저 구글 맵 API를 가져와서 사용해야하기때문에 구글맵API를 아래와 같이 적용시켜줍니다.
그리고, 위치찾기버튼을 눌럿을경우, getCurrentPosition대신에 geolocation.watchPosition를 써도 됩니다.
매개변수도 똑같이 작성하면 됩니다.
부족한 내용들은 navigator에 대한 정보를 이전 게시글에서 더 자세히 다뤄놨으니까 참고하시면 될 것 같아요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<head>
<meta charset="utf-8">
<title> 지도 </title>
<script
src="http://maps.google.com/maps/api/js?key=AIzaSyBuMhc367ia1i3QryuC2LLtWT5WnSSNwF8"></script>
<script src="jquery-3.2.1.min.js"></script> <!-- jquery이용하려고 -->
<script >
$(document).ready (
function(){
var watchID; //전역변수
$('#start').on('click',function(){ //(maximumAge: 오래된거 말고 가장 최근정보를 가져와라)
watchID= //( enableHighAccuracy: 최대한 정확도를 높게 받을 것인지를 지시하는 불리언 값입니다.)
navigator.geolocation.watchPosition(success, error, {enableHighAccuracy:true, maximumAge:0});
})// start on end
$('#stop').on('click',function(){
navigator.geolocation.clearWatch(watchID); //멈추게 할 것 //explor11는 clearwatch가 안되나?
$('#result').html('위치추적을 중단합니다.'); //라는 문구를 넣는다.
})//stop on end
}); //ready end
|
기본적인 틀이 완성됬으면, 이제 자세하게 기능들에 대해서 짜야겠죠?
위의 코드에 대해서는 어려운 내용들이 없었습니다. 기존에 만들어져있는 API를 가져와 사용하면 되는 내용이에요
아래의 코드에서는 시작버튼을 눌럿을경우에,
성공할 경우의 success함수에 대한 내용을 짜면되요.
반면에, 실패할 경우의 error함수에 대한 내용을 짜면될 것 같아요.
|
1
|
function success(p)
|
우선, success함수안에서는 똑같이 p(위치저장객체)매개변수를 통해 위도와 경도를 생성합니다.
|
1
|
var center= new google.maps.LatLng(lat, lon);
|
그리고, 구글지도에서 현재위치가 보여지도록 google.maps패키지안의
LatLng라는 객체를 만들어서 center라는 변수안에 그 구글맵의 현재위치를 저장합니다.
|
1
2
3
4
|
map = new google.maps.Map(document.getElementById('map'),
{ mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:17, center : center
});
|
그리고 google.maps패키지안의 Map의 객체를 하나 만들어서 변수 map에 저장하도록 한다.
그리고 MapTypeId:google.maps 패키지안의 MapTypeId객체안의 ROADMAP으로, 로드맵형식을
zoom:17,center:center으로, 현재위치를 하나의 구정도 보이도록 map에 저장합니다.
이때, zoom을 17로 할 경우 하나의 구가 보인다고 합니다.
추가적으로, google.maps패키지안의 Marker객체를 통해 현재 위치를 표시하기 위한 화살표를 생성.
두번째로는 error함수안의 내용입니다.
에러가 발생할경우, e.messege와 e.code를 div를통해 .innerHTML이나 .text를 통해 브라우저출력하도록 합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function success(p){ //위치저장객체_1
var lat= p.coords.latitude //위도 저장
var lon= p.coords.longitude; //경도 저장
$('#result').text('나의위도='+lat+'나의 경도='+lon);
//지도로 출력 // jquery를 지원하지 못하기에 dom을 쓴다.
var center=
new google.maps.LatLng(lat, lon); //나의 위도와 경도를 구글맵에 가져가서 LatLng위치를 만들어라. (매개변수를 직접 좌표를 적어줘도된다)
map = new google.maps.Map(document.getElementById('map'), // google.maps패키지안의 Map의 객체를 하나 만들어서 --> 변수 map에 저장해라
{ mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:17, center : center //(1: 전세계 다 나타나도록 10: 조그마한 시 13~17: 하나의 구 20: 동)
});
marker = new google.maps.Marker( //지도위에 내 현재위치를 표시하기 위한 marker객체_2를 생성
{ position:center, title:'현재나', map:map}
);
}//success end
function error(e){ //오류객체_ 3
$('#result').html(e.code+":"+e.message);
}
</script>
</head>
|
<코드결과>
(1)
(2)
(3)
'WEB 기초 > Jquery' 카테고리의 다른 글
| 7. navigator를 이용한 현재 위도,경도 출력하기 (0) | 2018.04.21 |
|---|---|
| 6. 이미지나열 이벤트 & 타이머 (심화문제) (0) | 2018.04.21 |
| 5. 버튼클릭 이벤트 (심화문제) (0) | 2018.04.19 |
| 4. jquery 이벤트 총정리 (on, off, one, click, mouseover, mouseout) (0) | 2018.04.18 |
| 3. Css 제어_응용하기 (0) | 2018.04.16 |