東京うぇ部

PHPをメインにしたプログラム情報共有サイト

PhoneGap

MonacaでのiOSおよびAndroidアプリ開発

最近Monaca(モナカ)という、素晴らしいプラットフォームを見つけ、

ちょっとづつですが自分のアプリを作成しております。

これほんと便利です。基本的にパソコンとモバイル端末さえあれば

誰でも開発に入る事ができます。


基本的にはiOSでもAndroidどちらも対応しているPhoneGapという

マルチプラットフォームを用いており、

html5とjavascriptでアプリ開発を行います。

なので、Monacaでアプリ開発を行えばiOSでもAndroidでも公開できちゃうといったわけです。

すごい便利。。

で、手始めにGPSで現在地を取得してGoogleMapを表示するといった

ロジックを組んでみました。

基本的には他の人が書いてあるものを参考に作ってみました。

jsファイル(js/map.js)はこんな感じです。

window.addEventListener("load", function(){
    var mapDiv = document.getElementById("map");
    var latitude = null;
    var longitude = null;

    // 位置情報取得オブジェクトチェック
    if (!navigator.geolocation){
        mapDiv.innerHTML = "Geolocation 使用不可";
        return;
    }

    // 位置情報取得オブジェクトオプション
    var option = {
        timeout:10000,            // タイムアウト
        enableHighAccuracy:true   // GPS利用
    }

    // 位置情報を取得
    navigator.geolocation.getCurrentPosition(resultHandler, errorHandler, option);

    // 位置情報取得成功時
    function resultHandler(position){
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;

        // GoogleMapにデータを渡す
        var mapCenter = new google.maps.LatLng(latitude, longitude);
        var options = {
            zoom:16,                // 表示倍率
            center:mapCenter,       // 中央位置
            mapTypeId:google.maps.MapTypeId.ROADMAP,
            scaleControl:true       // 倍率変更
        };
        // 地図を表示
        var map = new google.maps.Map(mapDiv, options);
        
        // 現在地を表示
        var marker = new google.maps.Marker({
            position:mapCenter,
            map:map,
            title:"現在地"}
        );
        map.setCenter(mapCenter);
    }

    // 位置情報取得失敗時
    function errorHandler(error){
        mapDiv.innerHTML = error.message;
    }

}, true);

css(css/map.css)はこんな感じです。

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

最後にhtml(map.html)はこんな感じです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="plugins/plugin-loader.js"></script>
    <script src="js/map.js"></script>
    <link rel="stylesheet" href="plugins/plugin-loader.css">
    <link rel="stylesheet" href="css/map.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>現在値をGoogleMapにて表示</title>
</head>
<body>
    <div id="map" style="height:100%"></div>
</body>
</html>

どうでしょうか。
※”plugin-loader.js”と”plugin-loader.css”に関してはMonacaがPhoneGapのAPIを使うために必要なファイルです。(デフォルトで設定されていると思います。)

画面いっぱいに現在地マークがついたGoogleMapが表示されたと思います。

ここまで便利ですと、アプリ作成するモチベーションもだいぶ上がりますね♪

コメントを残す




このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事