자바스크립트 + HTML을 이용해 디바이스의 현재위치를 구하는 방법입니다. 데모를 직접 돌려보시려면 http://html5demos.com/geo 을 방문하시면 됩니다. 

위 주소에서 공개된 소스를 보면,

if (navigator.geolocation) {
  // 디바이스 위치 구하기 
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

이 코드를 통해 위치를 구할 수 있습니다. 

위치를 성공적으로 구한 경우, <article>에 구글맵이 들어있는 <div>를 추가시켜서 보여줍니다. 

function success(position) {
  var s = document.querySelector('#status');
  
  s.innerHTML = "found you!";
  s.className = 'success';
     

  // 맵이 들어갈 div 세팅

  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '400px';
  mapcanvas.style.width = '560px';
    
  document.querySelector('article').appendChild(mapcanvas);
  
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // 맵 추가
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
  });

} 

위치찾기에 실패한 경우는 맵 대신 실패메시지를 띄웁니다.

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';
}


출처는 http://html5demos.com/geo 입니다.



'Mobile Devel > JQM + Backbone' 카테고리의 다른 글

HTML5 Geolocation - 디바이스 현재위치 구하기  (0) 2012.06.12
by arfarf89 2012.06.12 03:55
Good source from http://www.mccormick.northwestern.edu/docs/efirst/ode.pdf

'학생인 척 하기 > CS357' 카테고리의 다른 글

Ordinary Differential Equations(ODE) in Matlab  (0) 2011.04.28
by arfarf89 2011.04.28 08:22
페이지 가장 마지막 문단.

A "modal" popup can be simulated by covering the main document with a semi-transparent layer which prevents the user from interacting with it until the popup is dismissed. The color and transparency of the "screen" can be configured, of course.

modal popup은 현재 페이지를 반투명한 레이어로 덮어서 사용자가 팝업을 닫기 전까지 쓸 수 없게 하는 것이다. 이 레이어의 색상이나 투명도는 변경이 가능하다.

sample code:

<div id="modal" style="border:3px solid black; background-color:#9999ff; padding:25px; font-size:150%; text-align:center; display:none;">
This is a modal popup!<br><br>
<input type="button" value="OK" onClick="Popup.hide('modal')">
</div>
<a href="#" onclick="Popup.showModal('modal');return false;">Show Modal Popup</a>
<br>
<a href="#" onclick="Popup.showModal('modal',null,null,{'screenColor':'#99ff99','screenOpacity':.6});return false;">Show Modal Popup With A Custom Screen</a>



from http://www.javascripttoolbox.com/lib/popup/example.php 



Above Javascript only available after downloading popup.js source file from the same website..
 
by arfarf89 2011.04.28 03:32
| 1 2 |

티스토리 툴바