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

---------------------------------------------------------------------------------------------------------------
一、创建地图与网页样式
创建一张简单的地图,只需要3句话。
然后,我们制作出两个输入框,分别是起点输入框,和终点输入框。
使用“驾车”按钮,获取输入框中的数据。
二、创建搜索实例
对于起点和终点,我们需要创建2个不同的搜索实例:
在点击“驾车”按钮后,开始搜索起点和终点都有哪些符合关键词的地方(POI点)。
三、搜索的数据接口
由于AJAX是异步加载的,我们使用百度地图API提供的回调函数onSearchComplete,来完成对搜索成功后的操作。
以起点的搜索为例:
当搜索成功后,把每一个搜索结果(POI),按照我们自定义的方式,列在面板中。其实,这里我们只使用了数据接口,没用百度默认的结果面板。
当用户鼠标移到起点面板的标题处,我们在地图上打开一个信息窗口。里面放“选为起点”的按钮。
用户点击“选为起点”的按钮后,选定该点为起点,并隐藏起点面板,让用户选择终点。
为了方便看清起点的位置,我们需要在地图上打个红色的标注。并且,再次选择起点时,要清楚上一次的标注。
同理,制作终点的面板。这里需要注意的是,终点和起点不同,选择终点之后,需要创建一个驾车实例,并且绘制出驾车路线。
所以要做一个判断,用户是否已经选择了起点。如果没有,提示用户要先选择起点。
四、创建驾车实例和结果面板
在选择完毕确定的终点和起点后,驾车的结果就明了了。
一句话,轻松搞定。
五、页面样式完善
为了让页面干净好看,我们可以把不必要的结果展示暂时隐藏起来,当需要它们的时候,再展开。
1、比如,先把地图和搜索框以外的结果面板隐藏起来。
我使用了hidden样式,来隐藏右边的面板boxpanel。
对起点选择和终点选择面板,采取使用时“展开”,选取完毕即刻隐藏的办法。例如,
2、清除上次驾车查询结果
如果你要再次使用驾车查询,一定要先清除上次驾车查询的结果:
也可以使用clearOverlays,一次性清除地图上所有的覆盖物。
另外,补充一个清除覆盖物的知识:
清除地图上所有的标记,用map.clearOverlays();
清除单个标注,用map.removeOverlay(marker);
显示和隐藏自定义覆盖物,可以继承overlay的hide();或者show()方法。
附,全部源代码: