PhoneGapで方角を取得して地図を回転させる
【index.html】
<!DOCTYPE HTML> <html> <head> <title>compass</title> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <script src="g_script.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> <script type="text/javascript" charset="utf-8" src="phonegap.1.0.0.js"></script> <script type="text/javascript" charset="utf-8"> var timerID_compass = null; </script> </head> <body onLoad="initialize()"> <div data-role="page" data-theme="b"> <div data-role="header"> <h1>Map</h1> </div> <div data-role="content"> <div id="map_canvas" style="width:0px;left:0px;height:0px;top:0px;transform-origin:
'50% 50%';-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform:rotate(0deg);"> Google Maps </div> </div> <div data-role="footer"> Adv </div> </div> </body> </html>
var map; var marker_F; var map_latlng; function initialize() { document.addEventListener("deviceready", onDeviceReady, false); // //デフォルトの位置 map_latlng = new google.maps.LatLng(34.693738, 135.502165); var map_Options = { zoom: 15, center: map_latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, navigationControl:true }; map = new google.maps.Map(document.getElementById("map_canvas"), map_Options); //****************************************** marker_F = new google.maps.Marker({ map: map, position: map_latlng, clickable:true, draggable:false }); //****************************************** //地図が回転してもデバイスのスクリーン内に収まるように、拡大・シフト var pageHeight = $(document).height(); var pageWidth = $(document).width(); var new_width = pageWidth * 2; var new_height = pageHeight * 1.5; var new_top = -(new_height - pageHeight)/2; var new_left = -(new_width - pageWidth)/2; $("#map_canvas").css("height",new_height); $("#map_canvas").css("width",new_width); $("#map_canvas").css("top",new_top); $("#map_canvas").css("left",new_left); } // function onDeviceReady() { startWatchHeading(); //startGeoloca(); } // function startWatchHeading() { timerID_compass = setInterval(start_compass,500); } function start_compass(){ navigator.compass.getCurrentHeading(onSuccess_compass, onError_compass); } // function stop_compass(){ clearInterval(timerID_compass); } // function onSuccess_compass(heading) { var north = (360 - heading) + "deg"; rotate_map(north); } // function onError_compass() { // } //地図を回転 function rotate_map(deg){ var param = "rotate(" + deg + ")"; $("#map_canvas").css("-moz-transform",param); $("#map_canvas").css("-webkit-transform",param); $("#map_canvas").css("transform",param); }