11-地图及线路规划原创

Hello，同学们好，我是童颜老师，这节课我来讲解一下我们项目当中跟地图，以及地图当中的这一个显示的这一个轨迹有关的一些内容啊，首先我们看一下我们是在页面哪个地方有这个功能呢？我们是在我们首页进来选择了起点城市和终点城市之后点击搜索。啊，这里面有个简单的列表哈，选择日期之类的东西啊，我们点击下一个选择班次，在这个地方我们就会有一个什么起点终点，更具体的站点的选择，在我们选择了不同的站点的时候呢，我们的地图会随之而发生变化啊，从而显示了这两个起点和终点之间他们的一条合适的一个规划线路的内容啊，但是这里面我们一般只是为了给客户更好的直观的了解这个路途所行经的地方，然后呢，我们看一下这个页面是实哪个在我们项目到哪个页面呢？是在我们项目当中的这项目的这一个。BY的这里面OK，我们这个地方啊，首先我们先看一下它的JS的逻辑部分，它做了什么事情。

啊，我们这里面呢，在进来整个页面的时候，我们会有一个什么，会有一个unload unload当中呢，我们会得到吗？得到个ID和到了个date，这个date是指出发的日期，是指我们上一步当中选中的这个时间，啊，点击进来。啊，以及我们的这个航班的信息啊，同学们看到这里哈，就会看，点击这个地方，看到页面参数，就知道在整个页面当中传递什么参数进来，其中有个ID啊，有一个date，这你们看到就有一个什么对应的一个date。接下来呢，我们会根据这个ID获取整个这个航次，这个航班当中对应的相关的信息，而get date当中执行的就是什么，就是一个获取当前的航班信息啊，我们这里面找到一个get date OK。这里面呢，就根据这个API存入我们刚才得到的ID，从而获取我们对应的航班的信息，在得到结果之后呢，就会在这个地方陈列出我们的起点的站点，以及终点城市当中对应的可选择的站点。

啊，但这里面我们也会什么设置一些其他的对应的信息啊，但这里面最主要什么，最主要的是一开始的时候，我们会先陈列出第一个站点的GPS信息。好，我们拿出。第一个起点站点的。精度。啊，以及对应的纬度啊，把这两个信息作为起点的绝品信息啊，然后就是什么就是。这时候呢，我们还会往下是怎么设置目的点的GPS信息。啊，就进来的第一次，第一次获取之后就要设置什么，设置终点。默认站点的GPS信息啊，这里面对应什么就是对应的什么，就是就是我们的起点。

默认站点的。站点的去骗信息，然后各位这里面就有一个。To Gps，一个from GPS from起点，To就是目的点的一个GPS信息，那比如说近年来这里面进来说，我们说我们是从这个广州的北站到，那么到深圳的福田站，这两个是默认的起点和终点，那我们在设置好这个值之后呢，我们做另一个事情是么？就开始执行个函数get light。或者是去读取起点终点GPS信息之间的什么之间。的连接。什么叫线路？规划。的信息。啊，但是这里面啊，我们就执行了这个函数，我们看一下这个函数做了什么事情，这函数就根据什么，根据这个对应的起点和终点，但这里面第一个逻辑，你必须什么，必须要有什么，必须要有起点和终点。

我们才开始去计算啊，如果两者有一个者没有得到的话，我们这么就直接中断了，然后那个有的话，我们就指行接口，然后把我们的起点的跟终点的缺点信息传到我们的后台，后台当中就返回什么，返回这样的一个线路规划，当然我们只取什么，只取第一个方案啊，因为都知道。在线路规划当中，线路规划会有很多种方案，但其实我们这里面呢，其实并不是最终的车辆的唯一的行驶方案，我们肯定什么只显示的第一个，第一个一般都是最优的方案给到用户选择啊，我们这就选择第一个，但这里面呢，我们看一下，我们就是做另外一个事情，这里有个什么特别处理啊哈，这里面是不是就以下的这个处理哈，我们就说。获取的锯片信息当中有一个很特别的处理，处理符合我们的微信小程序。

API。使用的数据啊，举个例子，什么意思呢？我们看一下这个地方LY这里面哈，我们看一下它返回这里面就是返回内容，反应内容当中有一个地方才是我们用到的这个线路的奇迹，其实这个线路是有什么，有无数个对应的GPS跟我们的这一个。精度纬度的两个数据组成的一个点，然后无数个点连接在一起，就形成了这样的线路啊，但这里面看一下它返回的数据，但并不是一个我们要的聚种结果，我们看一下哈，点击这里的数组就是什么，它是一个这样的一个数组结构。看到吗？同学们，它是这样的一个数据结构。啊，并不是我们要的目的的数据，我们要了目的的数据，什么数据呢？我们可以看一下我们的小程序当中官方文档当中对于这个API的说明。啊，这里面我们使用了，我们使用到了主键，而主键当中用到吗？用到了它的地图组件。咱们在地图主线当中，我们可以往下看到，看到这里有一个叫做啊polight，就是线路，而线路当中它的数据类型为什么为数组，而数组当中每个成员就要符合他现在这个对于一系列坐标点的一个写法，它的写法是什么样呢？我们看一下这个写法就是他要的目录结构。

啊，就是这里面点，你看有多少点都可以，但是一定要记住每一个数组当中的成员，就是有一个点的纬度，以及它的精度对应的信息啊。但我们很明显。是不是看到我们这里返回的数据并不符合我们要的最终目的的结果啊，这也是我们实际的开发过程当中，我们经常要一些的数据的格式跟我们期望的值并不一样，所以这时候要对这种数据进行处理啊，所以说呢，在我这个里面，我就什么我就在代码当中进行了处理这样的数据，从而让它符合我们的场景，就是到这一步。OK，处理完成之后就修改啊地图。

使用就。设置就什么，就修改地图使用的参数，OK，这里面就有一个setline，我们看一下这里面哈，是不是就按照我们说的，我是明一个空数组，把上面得到的这一系列得到的精度纬度。然后推送到我的数组当中去，从而就形成了一个我们要的数组的内容啊，这里面对应的什么就是啊，就是这个参数就是什么线。的颜色。啊，就是什么线的宽度。然后这里面就是是否显示箭头。啊，同学们看一下，这里面其是有个小小的箭头了，看到吧哈，这有个箭头啊，这里面的配置信息，同学们可以对照着我们的微信的官方文档当中，地图组件当中会有对应的说明这里面哈，啊对应的情况呢，就是得到一个精度维度的点，然后呢就会什么还有个很重要的地方，我们一般显示一根线出来的时候，我们是不是要想办法得到嘛，得到它中心点的位置，就让我们地图是在这个连线的中间显示的，所以说每一次只要我们获得了这个getline这galine的执行之后，我们得到了GPS信息，以及修改了地图信息之后，我们都会什么在地图当中设置以这个整条线路的中间那个点啊，那们看到哈，我们取什么？取是整个点当中的中间一个点。

看到这个地方。然后得到它的维度，然后呢，也是得到中心这个点，让它什么，让它的精度，从而我们能够对地图当中使用时候显示它的精度维度啊，以及作为中心点的显示啊，我们看一下我们的地图当中看到没有这个地方的精度纬度使用就是你这边设置好的精度纬度。作为地图显示的中心点，就是这两个点，这两个配置，然后呢，这一面这个是我们地图双方级别，这个级别我觉得刚刚合适，然后这个forli就什么，就是我们刚才在这地方得到了精度纬度细剧之后一系列的点的标记之后形成的线路信息。

从而就每一次调整我们的起点、终点的时候，都能让地图实现一个更新，显示我们最合适的一条线路的轨迹。看到了吧，啊，同学们好的。在项目当中呢，我们还要注意几个事情，什么事情呢？我们还要对于这样子节点的选择进行进行调整的时候，要注重对于他们的这个逻辑的复用，比如说在我们点击了这个点之后。北站南站这行情况中是每次都执行该赖的呀，是我们单独的把该赖进行了处理。啊，这个地方我们做什么事情，那么我们看一下我们的代码当中，我们会得到了起点之后，我们进行进行一个列表渲染，比如这个地方啊，还有这里啊，这是对于上车地点的一个的配置，然后这里面我们进行一个渲染。

列表的渲染之中，我们会什么绑定它的GPS对应的信息啊，精度，维度，以及得到一个它对应的一个索引值啊，这两个配置，一个是配置什么每一个成员的一个的便利的变量名。啊，变历出来变量名默认如果不说明什么，如果我们不明时，默认它显示吗？显示的就是用item来显示啊，当然我这里面写这个就想让大家知道不一定只能用item啊，我们还可以用什么用我们指定的变量来表表示，以及我们可以让它遍历出来的每个的成员的所引值，我们可以用一个我们自声明的一个变量来决定。OK，然后呢，这里面我们也写了一个绑定的事件，叫什么叫设置起点。啊，上车的地方，只要你点击这里面的两个，我们就为什么修改我们的起点城市啊，修改的逻辑为什么为从原来的起点做坐表当中。

啊，根据你索引值，我取出当前的那一个。啊，这名是什么，就是。根据索引值来。指定当前的。上次。具体站点。OK，然后呢，从而再什么再去设置根据这个，因为我们的样式，我们看一下我们这里有个样式，样式当中是根据什么，就是根据这一个阿卡的值是否等于当前索引值，来决定它是否有上面这个标记。看到吗？这个上乘这个标记，所以我们还得什么，还得同时去改变这个标记为当前数位值。啊，这里面就哈修改up cut为当前传入。点击的索引值。从而能获得一个标。选中标识。啊，当然这个GPS不用说了哈，我们肯定要拼接它的对应的一个上车及下车的线路啊，然后呢，再下一步哈，我们做什么事给缆那不用说了吧，对不对，我们刚才讲了，只要我们有一个业务的。

站点的跳转的选择，我们都会重新去计算这条线路。啊，我们都重新进行线路，接下来我们做的事情，我们这里用了一个接口，我们接口是就是。在本地存储当中啊，记录用户选择的当前。站点的，所以具体所以值啊，这是什么？其实这一步是为了后面的列的想。详情。使用哈，但是我们这里面有时候有些技术点，我们并不是非得这么去做的，但是这么去做是希望能跟向啊我们的朋友们展示更多的小程序当中一些常用的API，所我们决定。把这个选中的城市站点，我们存在什么地方，存在我们的小程序的这个本地存储当中啊，只要你用户选择的这个上车链接，我们这里记录这个内容，好同学们看一下这里，我点击上面基例，点这个基尾一。

啊，待会我们再点击下一步购票的时候，啊，进到我们的这个确认页的时候，我们通过这个值来读取你已经选中的城市的内容。看到吧，同等啊，这是我们的策略，以及我们在地方其实也会记录什么，也会记录了一个当前你选中的这个航线的信息，从而在下一个页面的时候，我们进去的时候就不用再发起请求了，我们可以直接在这个当中来根据你的起点城市。当中的这个起点的站点来选中你的对应的站点的信息。啊，比如说我们存在这里面有么好处呢？就下个页面，我们就这不用去从数库或者从我们的API当中得到这个内容了，因为这里面我们是不是已经完整记录了所有的起点站点以及所有的什么啊，这个是起点站点，刚才那个什么是终点站点看到吗？我们起点站点这边都有了，然后再根据什么，根据这索引值，是不是就可以在这个列表当中得到对应的站点信息的呀，对不对啊，这是我们的目的。

啊，所以说同样的道理，有了设置上车的这个站点，自然就会有什么对应的设置下车站点的操作，得到这设置终点城市站点的一个领的内容，这是一致的哈，同学们哈，这就是在我们的项目当中讲解了如何在我们的项目当中使用地图。啊，当然这只是我逻辑部分啊，在页面部分，其实我们还是很正常的去使用的对应地图信息，当然地图我们也会有对应的样式的说明啊，我们这个地方我们可以单独的给整个地图啊，比如说这下面哈，我们给地图设置么，设置的对应的一个的样式部分。啊，但我们就用了flash的布局，那么我们的地图最终什么根据这个map的值啊，啊来这个样类，我们这个这样式的类当中，让它占稳所的剩余宽度，以及在里面会什么，可以在直接它里面我们写什么，写上了一个按钮啊，但这按钮我们用什么方式啊，我们用的是一个。

我们这个按钮用的是一个对应的一个定位的方式来让它去到对应的位置啊，这用一个绝对定位啊，看到我们用的绝定位让它去到了底部这个位置啊，所以同学们以下这个代码当中，我们就向大家展示了如何在我们项目当中简单的使用一个地图。并且在地图当中啊，显示一些对应的线。的一个方式啊，以及设置地图的中心点的方式啊，我们实际工作当中呢，还可以在地图加上面加上一些标记啊，对应的标记点啊，当然我们这里只是一个大的一个轮廓，所以我们没有想的很详细，让他把这把那个站点的标记点显示出来，说理论上我们也可以这么在这个地方添加一些mark点啊，这个地方就由大家来去发掘它更多的功能吧。