麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

[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函数实现数据的清空。

麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。
微博关注
手机阅读
赞赏支持
手机阅读
微信捐助麻辣GIS
微信打赏
支付宝捐助麻辣GIS
支付宝打赏

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)

如您有疑问,可在文末留言,或到麻辣GIS QQ群中提问。

QQ群(一):291616564 加入QQ群

QQ群(二):166408035 加入QQ群

QQ群(三):627853279 加入QQ群

QQ群(四):436386604 加入QQ群

QQ群(五):606176554 加入QQ群

QQ群(六):946178380 加入QQ群

QQ群(七):861271808 加入QQ群

新疆互助群:910717627 加入QQ群

微信公众号:malagis,扫描右边二维码直接关注。

发表评论