최신 브라우저에는 location-based 기능들이 다 있습니다. 전화기나 태블릿의 GPS 를 사용하는 기능이죠. 이것은 HTML5 의 기본 기능입니다. 그러니까 jQuery Mobile 과는 별도의 기능인거죠. 하지만 jQuery Mobile 과 함께 사용하면 아주 유용하죠. 이전 글의 데이터베이스 같이요.
geolocation 기능을 사용해서 Google Map 기능을 이용할 수도 있습니다. Google은 이를 위한 API 를 제공하고 있습니다. 개발자들은 자바스크립트를 이용해서 지구상의 어떤 곳이든 지도로 display 할 수 있습니다.
It is these two aspects we study in this chapter, in conjunction with jQuery Mobile.
이 두가지 기능에 대해 jQuery Mobile 에서는 어떻게 다루는지 오늘 다뤄 보겠습니다.
Using GPS with jQuery Mobile
GPS는 navigator.geolocation
object를 통해서 구현 가능합니다. 이 object는 getCurrentPosition
(ok, error) method 를 제공합니다.
ok (position) is a callback function called when the GPS position could be calculated. The position parameter is an object with a coords property defined by {latitude, longitude, heading, speed, altitude} containing the GPS position. This parameter is required otherwise the GPS position can not be recovered.
error () is a callback function called only if GPS position has not been found. This parameter is optional.
현재의 GPS 위치를 표시하기 위해 이 메소드를 사용하시면 됩니다. (예를 들어 현재의 위도와 경도를 표시하실 수 있습니다.)
Display current GPS coordinates
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Latitude : </span> <span id=lat></span> <br />
<span> Longitude : </span> <span id=lng></span> <br />
</div>
</div>
</body>
</html>
<script>
navigator.geolocation.getCurrentPosition (function (pos)
{
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
$("#lat").text (lat);
$("#lng").text (lng);
});
</script>
|
|
|
tistory574_01.html
Integrating Google Maps in our application
구글 맵은 Google에서 제공하는 구글 맵 API 를 통해서 구현 가능합니다. 이 API에 접근하려면 HTML 페이지에 자바스크립트를 include 시키시면 됩니다.
Inclusion of the JavaScript file of Google Maps
<script src=http://maps.googleapis.com/maps/api/js?sensor=true></script>
이전 프로그램을 변형시켜서 GPS 위치에 의해 파악된 위치를 지도에 표시하는 새로운 화면을 display 시키겠습니다. 첫번째 화면을 우리가 정하는 GPS 코드를 entering 하도록 약간 변형시키겠습니다.
View the map of the position provided by GPS
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<script src=http://maps.googleapis.com/maps/api/js?sensor=true></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Latitude : </span> <input type=text id=lat />
<span> Longitude : </span> <input type=text id=lng />
<a data-role=button id=btn>Display map</a>
</div>
</div>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
</div>
</div>
</body>
</html>
<script>
navigator.geolocation.getCurrentPosition (function (pos)
{
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
$("#lat").val (lat);
$("#lng").val (lng);
});
$("#btn").bind ("click", function (event)
{
var lat = $("#lat").val ();
var lng = $("#lng").val ();
var latlng = new google.maps.LatLng (lat, lng);
var options = {
zoom : 15,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var $content = $("#win2 div:jqmData(role=content)");
$content.height (screen.height - 50);
var map = new google.maps.Map ($content[0], options);
$.mobile.changePage ($("#win2"));
new google.maps.Marker (
{
map : map,
animation : google.maps.Animation.DROP,
position : latlng
});
});
</script>
|
|
텍스트 필드에 위도 경도 좌표를 넣으면 그 값을 받아올 겁니다. (디폴트로는 GPS 에서 얻은 값이 표시 됩니다. 파라미터에서 google.maps.Map object 를 생성하면 해당 위치의 지도가 display 될 겁니다. 지도를 표시할 <div> element 의 높이를 지정하는 부분을 잘 봐 두세요. (여기서는 두번째 화면의 content 입니다.)
여기에 해당 위치에 Marker 를 표시하기 위해 google.maps.Marker
object를 생성했습니다. 이것은 옵션이지만 지도에서 해당 위치를 찾는데 아주 유용한 기능입니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Client side 데이터 베이스 이용하기 (0) | 2012.12.28 |
|---|---|
| 툴바 만드는 예제들 (0) | 2012.12.28 |
| 툴바 customize 하기 (0) | 2012.12.27 |
| 툴바에서 이벤트 다루기 (2) | 2012.12.27 |
| Ajax 로 navigation bar 삽입하기 (0) | 2012.12.26 |
| Ajax로 툴바 insert 하기 (0) | 2012.12.25 |
| jQuery Mobile 툴바로 HTML element 변환하기 (0) | 2012.12.25 |
| 다이나믹하게 툴바 생성하기 (0) | 2012.12.25 |
| accordion menu 생성 예제들 (0) | 2012.12.23 |
| accordion menu Customizing 하기 (0) | 2012.12.22 |