Apache Cordova 使用本地 API

使用本地API

在本部分中，我增加了給員工添加他/她的位置信息標(biāo)簽的能力。在本示例應(yīng)用程序中，我們在一個(gè)警告中顯示原始信息（經(jīng)度/緯度）。在現(xiàn)實(shí)生活中的應(yīng)用程序中，我們通常在數(shù)據(jù)庫中保存位置信息作為員工信息的一部分，并在一張圖上顯示。

當(dāng)將應(yīng)用程序作為一個(gè)Cordova 應(yīng)用程序在你的設(shè)備上運(yùn)行時(shí)，下面的這些代碼就會(huì)工作。當(dāng)頁面是由http:// 協(xié)議服務(wù)時(shí)，這些代碼也會(huì)在桌面系統(tǒng)中的Chrome上工作，并且在Firefox中，忽視該協(xié)議（http:// 或 file://）。

步驟

1、增加geolocaton插件到你的項(xiàng)目中：

cordova plugin add org.apache.cordova.geolocation

2、在index.html中，增加以下列表項(xiàng)到employee-tpl模板：

<li class="table-view-cell media">
  <a hre="#" class="push-right add-location-btn">
      <span class="media-object pull-left"></span>
      <div class="media-body">
          Add location
      </div>
  </a>
</li>

3、在EmployeeView的initialize()函數(shù)中，為Add Location列表項(xiàng)的單擊事件注冊一個(gè)事件偵聽器。

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

確保你增加的這一行是作為initialize()函數(shù)的最后一行（在this.$el被分配以后）。

4、在EmployeeView中，定義addLocation 事件處理程序如下：

this.addLocation = function(event) {
  event.preventDefault();
  navigator.geolocation.getCurrentPosition(
      function(position) {
          alert(position.coords.latitude + ',' + position.coords.longitude);
      },
      function() {
          alert('Error getting location');
      });
  return false;
};

5、測試應(yīng)用程序。