|
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #map{ width : 1024px; height: 600px; } </style> <script type="text/javascript" src="../js/common.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> window.onload = function(){ document.getElementById("start").onclick = function(){ // °è¼Ó À§Ä¡Á¤º¸¹Þ°í ½ÍÀ»¶§ watchPosition»ç¿ë //¼º°ø½Ã successÇÔ¼ö, ½ÇÆнà errorÇÔ¼ö È£Ãâ //maximumAge À§Ä¡Á¤º¸ ¹ÞÀº ½Ã°£ watchId = window.navigator.geolocation.watchPosition(success, error, { enableHigtAccuracy: document.getElementById("gps").checked, maximumAge: 0 }); }; document.getElementById("stop").onclick = function(){ // TODO À§Ä¡ ÃßÀûÀ» ÁßÁöÇÑ´Ù. //watchPosition¿¡ ³Ö¾îÁÖ¾ú´Â id°ªÀ» ÀÎÀÚ·Î window.navigator.geolocation.clearWatch(watchId); }; // TODO ±¸±Û¸ÊÀ» ºÒ·¯¿Â´Ù.(±¸±Û¸Ê open api -> http://code.google.com/apis/maps) // LatLng ¸í·ÉÀº http://maps.google.com/maps/api/js¿¡ Á¤ÀÇµÈ Å¬·¡½º // À§µµ, °æµµ¸¦ °¡Áö°í Àִ Ŭ·¡½º var center = new google.maps.LatLng(37.519768, 126.939769); map = new google.maps.Map(document.getElementById("map"), { mapTypeId: google.maps.MapTypeId.ROADMAP, zoom:17, center: center }); } // À§Ä¡ È®ÀÎ ¼º°ø ½Ã function success(position){ // TODO ÁöµµÀÇ Áß¾ÓÀ» ÇöÀç À§Ä¡·Î ¼¼ÆÃÇÑ´Ù. À§µµ, °æµµ ÀÎÀÚ var center = new google.maps.LatLng( position.coords.latitude, position.coords.longitude ); map.setCenter(center); // TODO ¸¶Ä¿ Ç¥½Ã var marker = new google.maps.Marker({ position: center, title: "³»À§Ä¡", map: map }); } // À§Ä¡ È®ÀÎ ½ÇÆÐ ½Ã function error(error){ log("Á¶È¸ ½ÇÆÐ: " + error.code); } </script> </head> <body> <h1>ÇöÀç À§Ä¡ ÃßÀû</h1> <button id="start">½ÃÀÛ</button> <button id="stop">ÁßÁö</button> <input type="checkbox" id="gps">GPS »ç¿ë <div id="map"> Áöµµ¸¦ ·Îµù ÁßÀÔ´Ï´Ù... </div> </body> </html> |