移動距離測定アプリの作成

移動距離測定アプリの作成

まず、headで
googleMapAPIのライブラリーをWebから読み込む

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries-geometry"></script>

画面上部へ
移動開始
到着
のボタンを設置

ただし、到着ボタンは最初は非活性状態にする必要がある

button要素なら
disable属性を付けるけど

リンクボタンの場合なら
class=”ui-disabled”
を設定する
これで、見た目も機能も非活性状態にできる

ボタン2つは、
div data-role=”fieldcontain”
でまとめる

ソースは

<div data-role="fieldcontain">

<a href="#" data-role="button" data-icon="home" id="start">移動開始</a>
<a href="#" data-role="button" data-icon="check" id="goal" class="ui-disabled">到着</a>
</div>

次に、それぞれの位置情報と
移動距離はリストでまとめて表示するので
リストビューで配置する

それぞれの項目には
id=”” を付けた span 要素を使って
Javascriptで書き換え可能にする

なお、リストでは見出しを作りたいので
data-role=”list-divider”
を使う
これをつけたとこだけ色が変わるので見やすい

なおリストの角を丸くして、見栄えをよくするため
ul には
data-inset=”true”
を設定

この data-role=”” 関連の解説には
http://billboardtop100.net/2011/02/jquery-mobile-lists.html
を参考にしました

span はHTML5からできたもので
単体では意味を持たないけど
CSSの設定とかJavascript制御に使いやすいもの

詳しくは HTML5 span で検索するとわかりやすい

リストビューのソースは

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">開始位置</li>
<li>緯度<span id="start-latitude"></span></li>
<li>経度:<span id="start-longitude"></span></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">到着位置</li>
<li>緯度:<span id="goal-latitude"></span></li>
<li>経度:<span id="goal-longitude"></span></li>
<li>移動距離: <span id="distance"></span></li>
</ul>

そして、地図もリストビューで表示する

li要素の中へ地図を動的に作成することで
リストの中でも地図が設置できる

動的に配置するのは
移動開始ボタンが押されたら地図が表示されるようにするから

ソースは

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">地図</li>
<li id="map-wrapper"></li>
</ul>

これで移動開始ボタンが押されると
id=”map-wrapper”の部分に地図が表示される

あとは、移動履歴の表示
これは、リストビューで作成して
履歴削除ボタンも付けて削除できるようにする

<ul id="history" data-role="listview" data-inset="true">
<li data-role="list-divider">移動履歴</li>
</ul>
<div data-role="fieldcontain">
<a href="#" data-role="button" data-icon="delete" id="delete-history">履歴削除</a>
</div>