项目实训报告（九）：

    在主页中还有一个重要的功能是计算用户当前位置与所有景点的距离，并按升序排序，我的主要实现过程是，利用腾讯地图的API先计算用户到所有景点的距离，将值存储在每个景点的distance数值中，实现如下图所示：

    然后根据每个景点的经纬度信息，计算到每个景点的距离，如下图所示：

        特别要注意的是，由于景点的距离会有初始值（我设的是：0），因此有关距离的页面渲染必须要在计算好距离之后，而不是一开始就渲染，否则显示的就是0了，这里使用到了promise，

• batch.map(item => { return this.getDistance(...) })：使用 map 方法将每个景点转换为一个获取距离的 Promise。
• Promise.all(promises)：等待所有景点的距离计算完成。Promise.all 接收一个 Promise 数组，当所有 Promise 都成功解析后，它返回一个新的 Promise，该新 Promise 的解析值是一个包含所有原 Promise 解析值的数组。

保证当所有距离计算好之后再进行渲染。

    此外，由于腾讯地图的短期并发限制，短时间内只能计算出5个景点的距离信息，而我们要计算的经典数量是大于5个的因此不能一次算好（直接计算会报错），我们设置了一个批次处理延时的方法，每次计算好5个景点后延时等待一点时间，分批次计算从而实现所有景点的距离计算。

1、processBatch() 函数是核心部分，它负责分批处理景点数据。每次处理 batchSize 个景点，计算它们与用户位置的距离。

2、batch 是从 gridList 中提取的一小批景点数据，通过 Array.prototype.slice() 方法实现。

3、setTimeout(processBatch, 1000);：在每批处理完成后，通过 setTimeout 延迟一段时间再处         理下一批次。这种做法可以控制异步请求的速率，避免同时发起大量请求导致服务器负载过           高或超出并发限制。

   实现的效果如图所示：

              

     这里我设置了当前坐标是趵突泉景观内，因此米数比较小。

     我还设置了一个距离刷新按钮，当点击后根据用户的当前位置刷新据他最近的景观。

      它的实现过程是这样的。在输入框没有数据时直接执行先前定义好的距离计算函数就好，而当输入框内有数据时，即先搜索再更新距离数据时比较麻烦，必须要在先更新完gridList数组的距离并排好序后对resultList赋值，最后再进行页面的渲染，因此也需要promise于then子句才能实现，否则无法页面的成功渲染，这里的promise是calculate函数传出的。

   

   如下图所示，可以看到此时我的定位已经定位在了学校里，因此距离米数已经刷新，米数已经变得很大。

   另外补充排序函数，是十分常见的结构体按属性排序的方式。