PhoneGapのcompassで方角を取得して地図を回転させるコードです。

現在地ではなく、地図中心は固定されています。

CSSのrotateを使います。

デバイスが回転しても、地図自体は北を向いています。

表示サンプルとコード



【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>





【g_script.js】

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);
    
}












TOP