[WebGIS] HTML5跟踪GPS轨迹（6）应用设置功能实现

前文实现了使用HTML5定位并记录信息，其实实现了这一步后面就比较简单了，本文介绍应用设置的功能和实现。

响应点击事件

在应用设置的按钮上绑定点击的响应函数，如下：

响应代码如下，其主要作用是弹出应用设置的图层。

/**
* 应用设置按钮响应
*/
setParam() {
  this.setObj.show = true;
},

弹出如下的设置的界面：

采样间隔的设置

通过上文《HTML5跟踪GPS轨迹（5）记录轨迹功能实现》可知，我们是通过data中的interVal变量设置采样间隔的，所以这里只需要改变interVal的值就可以了。而在vue中实现了数据的双向绑定，可以直接使用v-model语法绑定数据：

清空数据

在清空数据的按钮上绑定了clearData函数，如图：

实现如下：

/**
 * 清空数据库响应
 */
clearData() {
  this.confirmObj.text = '数据清了就什么都没了！！！！';
  this.confirmObj.btnOk = '果断删除';
  this.confirmObj.btnNo = '我再想想';
  this.confirmObj.title = '温馨提示';
  this.confirmObj.okEvt = () => {
    const del = window.indexedDB.deleteDatabase('myLocation');
    del.onsuccess = () => {
      this.setObj.text = '已经清空啦';
    };
  };
  this.confirmObj.show = true;
},

这里直接调用的了IndexedDB的deleteDatabase函数实现数据的清空。