HTML5跟踪GPS轨迹（0）应用开发及简介
HTML5跟踪GPS轨迹（1）关于HTML5中的定位函数
HTML5跟踪GPS轨迹（2）IndexedDB使用精简入门上篇
HTML5跟踪GPS轨迹（3）IndexedDB使用精简入门下篇
HTML5跟踪GPS轨迹（4）基本界面布局
HTML5跟踪GPS轨迹（5）记录轨迹功能实现
HTML5跟踪GPS轨迹（6）应用设置功能实现
HTML5跟踪GPS轨迹（7）VueJS引入百度地图
HTML5跟踪GPS轨迹（8）再谈百度地图的坐标转换（V2版）
HTML5跟踪GPS轨迹（9）查看走过的轨迹

之前的文章《采用PHP+MySQL百度地图开发WebGIS系统之架构规划》中我记录了一个关于使用HTML5+PHP+MySQL开发一个徒步轨迹的WebGIS系统的思路。在文章中我大约介绍了整个项目的框架，但在后面的几年（文章写于2013年）里前端发生了翻天覆地的变化，文章中提到的方法虽然可行，但是不得不说已经有了更加优雅的解决方案，所以上面那个构想算是一个烂尾的工程。有些遗憾，不过也是更好玩的开始，最近抽出一点时间，对之前的框架做了一点思考和修改，主要想法如下：

在前文《HTML5跟踪GPS轨迹（0）应用开发及简介》中介绍了使用HTML5跟踪GPS轨迹的思路，本文就介绍下笔者收集的关于HTML5中定位相关的函数。PS：最近有一点忙，就没更新，抱歉。
在HTML5中定位相关的API是由navigator.geolocation对象提供的，在浏览的Console中输入navigator.geolocation,可以查看这个对象的具体内容。
可见navigator.geolocation对象包含三个函数：getCurrentPosition， watchPosition， clearWatch，具体介绍如下。
getCurrentPosition
这个函数之前有过介绍：《html5接口getCurrentPosition函数详解》，因为这次探索有了新收获，这里再重新介绍一次（别嫌我啰嗦）。
函数原型
getCurrentPosition(successCallback,errorCallback,positionOptions)
参数：

前文《HTML5跟踪GPS轨迹（1）关于HTML5中的定位函数》已经解决了HTML5获取GPS位置的问题，那数据存储在哪里呢？笔者使用的是IndexedDB。
为什么使用IndexedDB
目前来说有以下几种方案选择：
1.cookie
容量太小了，大小只有大约4KB，显然无法满足长时间记录轨迹的需求。
2.localStorage
这个是HTML5新增的网页数据存储方法，各个浏览器分配的大小也不一致，大约在10M左右，也不能满足需求。
3.Web SQL Database
虽然有的浏览器已经实现了，不过W3C已经停止这个规范，而取代他的就是IndexedDB。
IndexedDB可以看作是浏览器提供的数据库，可以用来存储大量的数据，并且支持索引。针对前端大规模存储数据的需求来说，IndexedDB是不二之选。

前文《HTML5跟踪GPS轨迹（2）IndexedDB使用精简入门上篇》中介绍了使用IndexedDB增、删、改、查数据的方法，本文简单介绍IndexedDB另外一个强大的功能：索引。
IndexedDB中的索引和普通数据库的索引有相似之处，都可用来优化查询效率和速度。但也有不同，在IndexedDB中如果要实现特定范围的数据查询必须依赖索引，但普通的数据库并不必如此。本文中笔者还是通过一个示例来说明IndexedDB中索引的使用方法。
使用示例
这里对上文的示例做了一个修改，代码如下：
需要注意的是：索引的创建是放在 onupgradeneeded 中的，也就是创建好数据库“表”之后立即创建，在其他地方创建无效。
上述代码先创建一个名为myDB2的数据库，并在数据的dataid字段上创建索引，然后往数据库中插入了100条数据，最后通过IDBKeyRange创建一个Range取出的数据库中dataid大于10小于20的数据。效果如图：

前文已经介绍了我们整个程序的基础技术，一个是地理位置获取（HTML5 Geolocation接口），一个是地理位置存储（HTML5 IndexedDB）。下面进入正题，我们从页面的前端样式开始，先绘制出这个webapp的样式，然后将页面每一个元素对应的功能一一实现出来。
笔者使用的是vuejs这个js框架进行开发，其官方提供了非常好用的spa脚手架工具——vue-cli（如果之前对此不熟悉，可以查看本文最后的参考链接）。通过这个工具，我们可以把html css 和 js 同时写在一个文件中（.vue），为了进一步简化开发方式，又分别使用了pug（也就是jade 改名了）和stylus来写html 和 css脚本。使用下面的命令安装
下面就可以愉快的写界面了。效果如图：
功能解释
1.开始记录按钮。用于创建数据库并记录不断获取的位置，同时控制开关。运行后如图：
2.查看结果按钮。用于查看已经记录下来的轨迹，这里使用的是百度地图。
3.应用设置按钮。用于webapp的基本设置，暂时有两个设置选项，一个是采样间隔，一个是清空数据。

前文《HTML5跟踪GPS轨迹（4）基本界面布局》构架了样式，本文实现记录轨迹的功能。
响应点击事件
vue中事件响应比较简单，代码如下：
图中红框中的表示响应click事件，代码响应如下
这里表示在点击记录的时候，按钮变红，同时调用 onStartLoc 函数（代码如下）开始调用定位位置并记录位置。如果再次点击，就调用onEndLoc停止定位。
onStartLoc函数中创建了IndexedDB的数据库和用于记录位置的表locations（参考《IndexedDB使用精简入门上篇》），同时调用onGeoNow函数开始获取地理位置（参考：关于HTML5中的定位函数）。注意： 这里使用的是setInterVal函数循环调用getCurrentPosition函数，为什么不使用watchPosition函数，因为我希望手动去设置数据的采样间隔。onGeoNow函数的定义如下：
可以看到在定位成功获取到地理位置之后，将其数据信息写入了IndexedDB，也就是上面的store.add方法。最后是停止定位的响应函数：

[WebGIS] HTML5跟踪GPS轨迹（6）应用设置功能实现
前文实现了使用HTML5定位并记录信息，其实实现了这一步后面就比较简单了，本文介绍应用设置的功能和实现。
响应点击事件
在应用设置的按钮上绑定点击的响应函数，如下：
响应代码如下，其主要作用是弹出应用设置的图层。
弹出如下的设置的界面：
采样间隔的设置
通过上文《HTML5跟踪GPS轨迹（5）记录轨迹功能实现》可知，我们是通过data中的interVal变量设置采样间隔的，所以这里只需要改变interVal的值就可以了。而在vue中实现了数据的双向绑定，可以直接使用v-model语法绑定数据：

通过前文的工作已经可以使用HTML5记录并保存数据，同时实现了应用的相关设置功能。下面的工作就是要查看已经记录下的信息了，当然给我们一个一个的坐标点我们是无法查看出定位效果的。最好的方法还是将定位点的数据叠加到地图上显示。使用vue-cli这个工具要求引入的js是基于模块化编写的，要使用百度地图还需要经过一点特殊的设置。主要分以下几个步骤：
1.引入百度地图API
在vue-cli生成的目录中，找到index.html文件。如图：
在其中引入百度地图的JS-API，代码如下格式：

看完之后感觉这是Android端吧。。。npm install是什么？是包管理？

vue nodejs