天天看点

【百度地图API】如何制作可拖拽的沿道路测距

摘要:

地图测距,大家都会,不就map.getDistance麼。可是,这只能测任意两点的直线距离,用途不够实际啊。比如,我想测试北京天安门到北京后海的距离,怎么办呢?

显然“沿道路测距”就显得尤为重要了。那么如果制作“可拖拽”的沿道路测距呢?我们一起来看一看。

---------------------------------------------------------------------------------------

一、创建地图

  

二、创建两个可拖拽的标注

先创建点,再把标注创建在该点上。最后添加标注在地图上。

让标注可拖拽的方法是:

【百度地图API】如何制作可拖拽的沿道路测距

然后确定这两个标注可以拖拽。

【百度地图API】如何制作可拖拽的沿道路测距

代码如下:

【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距

三、沿道路测距

【百度地图API】如何制作可拖拽的沿道路测距

创建驾车导航,在回调函数里设置距离的输出。

写个函数用来打开测距功能。

注意:起点和终点,要从改变位置后的marker里取。类参考如下:

【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距

四、清除结果

为了下一次的测距,我们需要清除这一次的导航结果,和测距结果。

五、网页结构

需要写两个安妮,一个用来计算距离,另一个用来清除数据。

还有一个展示测距结果的容器。

【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距

六、全部源代码

【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距
【百度地图API】如何制作可拖拽的沿道路测距

七、测两点的直线距离

百度地图API的官网上,有一个lib,是测试直线距离的。所以,这里就不多说了。

【百度地图API】如何制作可拖拽的沿道路测距

本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2013/04/07/3006514.html,如需转载请自行联系原作者

继续阅读