天天看点

【百度地图API】让用户选择起点和终点的驾车导航

摘要:

  如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果。但同一个城市可能有多个机场和火车站,那么,如何用可视化的方法让用户自己选择起点和终点呢?答案是,使用数据接口。数据接口,可以让百度地图API的数据,按照自定义的形式展示。

  这个功能非常实用,学会这个方法,可以让您的地图更加接近百度地图的功能!!

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

【百度地图API】让用户选择起点和终点的驾车导航

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

一、创建地图与网页样式

创建一张简单的地图,只需要3句话。

  

然后,我们制作出两个输入框,分别是起点输入框,和终点输入框。

使用“驾车”按钮,获取输入框中的数据。

【百度地图API】让用户选择起点和终点的驾车导航

二、创建搜索实例

对于起点和终点,我们需要创建2个不同的搜索实例:

在点击“驾车”按钮后,开始搜索起点和终点都有哪些符合关键词的地方(POI点)。

三、搜索的数据接口

由于AJAX是异步加载的,我们使用百度地图API提供的回调函数onSearchComplete,来完成对搜索成功后的操作。

【百度地图API】让用户选择起点和终点的驾车导航

以起点的搜索为例:

当搜索成功后,把每一个搜索结果(POI),按照我们自定义的方式,列在面板中。其实,这里我们只使用了数据接口,没用百度默认的结果面板。

当用户鼠标移到起点面板的标题处,我们在地图上打开一个信息窗口。里面放“选为起点”的按钮。

【百度地图API】让用户选择起点和终点的驾车导航

用户点击“选为起点”的按钮后,选定该点为起点,并隐藏起点面板,让用户选择终点。

为了方便看清起点的位置,我们需要在地图上打个红色的标注。并且,再次选择起点时,要清楚上一次的标注。

【百度地图API】让用户选择起点和终点的驾车导航

同理,制作终点的面板。这里需要注意的是,终点和起点不同,选择终点之后,需要创建一个驾车实例,并且绘制出驾车路线。

所以要做一个判断,用户是否已经选择了起点。如果没有,提示用户要先选择起点。

【百度地图API】让用户选择起点和终点的驾车导航

四、创建驾车实例和结果面板

在选择完毕确定的终点和起点后,驾车的结果就明了了。

一句话,轻松搞定。

【百度地图API】让用户选择起点和终点的驾车导航

五、页面样式完善

为了让页面干净好看,我们可以把不必要的结果展示暂时隐藏起来,当需要它们的时候,再展开。

1、比如,先把地图和搜索框以外的结果面板隐藏起来。

我使用了hidden样式,来隐藏右边的面板boxpanel。

 

对起点选择和终点选择面板,采取使用时“展开”,选取完毕即刻隐藏的办法。例如,

【百度地图API】让用户选择起点和终点的驾车导航

2、清除上次驾车查询结果

如果你要再次使用驾车查询,一定要先清除上次驾车查询的结果:

也可以使用clearOverlays,一次性清除地图上所有的覆盖物。

另外,补充一个清除覆盖物的知识:

清除地图上所有的标记,用map.clearOverlays(); 

清除单个标注,用map.removeOverlay(marker); 

显示和隐藏自定义覆盖物,可以继承overlay的hide();或者show()方法。 

附,全部源代码:

继续阅读