Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル12 ロケーションAPIの利用

Cordova(コルドバ)チュートリアル11 ハードウェアアクセラレーションの利用
こちらの続きです。

スライドしながら画面を切り替える方法を学びました。

次のステップに進みます。
Module 12: Using the Location API




Module 12: Using the Location API



この章では、位置情報を取得する方法を学びます。




1. 位置情報を取得するためのプラグインを追加します


$ cordova plugin add org.apache.cordova.geolocation





2. index.htmlのemployee-tplに位置情報を表示する領域を追加します


  1. <li class="table-view-cell media">
  2. <a hre="#" class="push-right add-location-btn">
  3.      <span class="media-object pull-left"></span>
  4.      <div class="media-body">
  5.          Add location
  6.      </div>
  7. </a>
  8. </li>





3. EmployeeView.jsを編集。クリックイベントを追加します。


  1. this.$el.on('click', '.add-location-btn', this.addLocation);






4. 同じくEmployeeView.jsに位置情報を取得する処理を追加します。


  1. this.addLocation = function(event) {
  2. event.preventDefault();
  3. navigator.geolocation.getCurrentPosition(
  4.      function(position) {
  5.          alert(position.coords.latitude + ',' + position.coords.longitude);
  6.      },
  7.      function() {
  8.          alert('Error getting location');
  9.      });
  10. return false;
  11. };





ここまででindex.htmlは以下のようになりました。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  6.     
  7.     <link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
  8.     <link href="assets/css/styles.css" rel="stylesheet">
  9.     <link href="assets/css/pageslider.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <script id="home-tpl" type="text/template">
  13.     <header class="bar bar-nav">
  14.         <h1 class="title">Directory</h1>
  15.     </header>
  16.     <div class="bar bar-standard bar-header-secondary">
  17.         <input class='search-key' type="search"/>
  18.     </div>
  19.     <div class="content"></div>
  20. </script>
  21. <script id="employee-list-tpl" type="text/template">
  22.     <ul class="table-view">
  23.         {{#each this}}
  24.         <li class="table-view-cell media">
  25.          <a href="#employees/{{ id }}">
  26.              <img class="media-object pull-left" src="assets/pics/{{pic}}">
  27.              <div class="media-body">
  28.                  {{firstName}} {{lastName}}
  29.                  <p>{{title}}</p>
  30.              </div>
  31.          </a>
  32.         </li>
  33.         {{/each}}
  34.     </ul>
  35. </script>
  36. <!-- 社員詳細表示 -->
  37. <script id="employee-tpl" type="text/template">
  38. <header class="bar bar-nav">
  39.      <a class="btn btn-link btn-nav pull-left" href="#">
  40.          <span class="icon icon-left-nav"></span>
  41.      </a>
  42.      <h1 class="title">Employee</h1>
  43. </header>
  44. <div class="content">
  45.      <div class="card">
  46.          <ul class="table-view">
  47.              <li class="table-view-cell media">
  48.                  <img class="media-object pull-left emp-pic" src="assets/pics/{{pic}}">
  49.                  <div class="media-body">
  50.                      {{ firstName }} {{ lastName }}
  51.                      <p>{{ title }}</p>
  52.                  </div>
  53.              </li>
  54.              <li class="table-view-cell media">
  55.                  <a href="tel:{{ officePhone }}" class="push-right">
  56.                      <span class="media-object pull-left icon icon-call"></span>
  57.                      <div class="media-body">
  58.                          Call Office
  59.                          <p>{{ officePhone }}</p>
  60.                      </div>
  61.                  </a>
  62.              </li>
  63.              <li class="table-view-cell media">
  64.                  <a href="tel:{{ cellPhone }}" class="push-right">
  65.                      <span class="media-object pull-left icon icon-call"></span>
  66.                      <div class="media-body">
  67.                          Call Cell
  68.                          <p>{{ cellPhone }}</p>
  69.                      </div>
  70.                  </a>
  71.              </li>
  72.              <li class="table-view-cell media">
  73.                  <a href="sms:{{ cellPhone }}" class="push-right">
  74.                      <span class="media-object pull-left icon icon-sms"></span>
  75.                      <div class="media-body">
  76.                          SMS
  77.                          <p>{{ cellPhone }}</p>
  78.                      </div>
  79.                  </a>
  80.              </li>
  81.              <li class="table-view-cell media">
  82.                  <a href="mailto:{{ email }}" class="push-right">
  83.                      <span class="media-object pull-left icon icon-mail"></span>
  84.                      <div class="media-body">
  85.                          Email
  86.                          <p>{{ email }}</p>
  87.                      </div>
  88.                  </a>
  89.              </li>
  90. <!-- 2. 位置情報を表示する領域追加 -->
  91.              <li class="table-view-cell media">
  92.                  <a hre="#" class="push-right add-location-btn">
  93.                      <span class="media-object pull-left"></span>
  94.                      <div class="media-body">
  95.                          Add location
  96.                      </div>
  97.                  </a>
  98.              </li>
  99.     
  100.          </ul>
  101.      </div>
  102. </div>
  103. </script>
  104. <script src="cordova.js"></script>
  105. <script src="lib/fastclick.js"></script>
  106. <script src="lib/jquery.js"></script>
  107. <script src="lib/router.js"></script>
  108. <script src="lib/pageslider.js"></script>
  109. <script src="js/services/memory/EmployeeService.js"></script>
  110. <script src="lib/handlebars.js"></script>
  111. <script src="js/EmployeeListView.js"></script>
  112. <script src="js/HomeView.js"></script>
  113. <script src="js/EmployeeView.js"></script>
  114. <script src="js/app.js"></script>
  115. </body>
  116. </html>





EmployeeView.jsは以下のとおり。


  1. var EmployeeView = function(employee) {
  2.     
  3.     
  4.     // 4. 位置情報取得本体
  5.     this.addLocation = function(event) {
  6.      event.preventDefault();
  7.      navigator.geolocation.getCurrentPosition(
  8.          function(position) {
  9.              alert(position.coords.latitude + ',' + position.coords.longitude);
  10.          },
  11.          function() {
  12.              alert('Error getting location');
  13.          });
  14.      return false;
  15.     };
  16. this.initialize = function() {
  17.      this.$el = $('<div/>');
  18.     
  19.      // 3. 位置情報表示
  20.      this.$el.on('click', '.add-location-btn', this.addLocation);
  21. };
  22. this.render = function() {
  23.      this.$el.html(this.template(employee));
  24.      return this;
  25. };
  26. this.initialize();
  27. }





エミュレーターで試したのですが動かず。

565_01.png


ブラウザでの実行はエラーになるので、ちゃんと処理は通っているようなのですが、
実機じゃないと確かめられないのかも。
残念。


関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/02/22(日) 18:49:47|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル13 連絡先APIの利用 | ホーム | Cordova(コルドバ)チュートリアル11 ハードウェアアクセラレーションの利用>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1650-f6b22d83
この記事にトラックバックする(FC2ブログユーザー)