PhoneGapのGeoLocationで現在地を取得するコードです。

デフォルトの地図中心は富士山になってますが、GeoLocationの位置取得が開始されると現在地に移動します。

マーカーは取得した位置に置かれていますが、誤差も考慮して青い円で「だいたいこの辺り」を表示します、半径は100mです。



表示サンプルとコード

【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.0.9.6.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        var watchID_geoloca = 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 circle = null;
var current_loc;
var map_latlng;



function initialize() {
    
    //
    document.addEventListener("deviceready", onDeviceReady, false); 
    //
    
    //デフォルトの位置
    map_latlng = new google.maps.LatLng(35.36286726458948, 138.73157501220703);
    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;
    //alert(new_width + "/" + new_height + "/" + new_top + "/" + new_left);
    $("#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() { 
    startGeoloca();
} 


    
//現在地取得
function startGeoloca() { 
    
    var options = { maximumAge: 1000, timeout: 5000, enableHighAccuracy: true }; 

    watchID_geoloca = navigator.geolocation.watchPosition(onSuccess_geoloca, onError_geoloca, options); 

    
} 

//
function onSuccess_geoloca(position) { 

        current_loc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(current_loc);
        
        marker_F.setPosition(current_loc);

        
        //
        //だいたいこの辺りの円
        if (circle != null) {
            circle.setMap(null);
        }
        
        circle = new google.maps.Circle({
            fillColor: "#0000ff",
            fillOpacity: 0.2,
            strokeColor: "#0000ff",
            strokeWeight: 1,
            strokeOpacity: 1,
            radius: 100,
            center: current_loc,
            map: map
    });
    circle.setMap(map);
    
} 

function onError_geoloca() {
    //
}










TOP