介绍目录一览:
涉及方式:1、公交换乘;2、公交线路查询;3、公交站点查询;4、自驾导航
Ali地图首页对应分析:以上对应点的实现攻略。
API class 参考页面:http://ditu.aliyun.com/jsdoc/map/classes/AliBus.html(公交),
http://ditu.aliyun.com/jsdoc/map/classes/AliDirection.html(驾车)
具体的api使用都给的有示例的,参考学之为宜。
一、公交换乘
(1)、创建服务对象并设置查询完成后的回调函数
//创建公交查询对象 bus=new AliBus(); //设置公交换乘结果处理函数 AliEvent.addListener(bus,"routecomplete",onRouteComplete); //设置公交换乘起终点 bus.fromLatLng=new AliLatLng(39.92034,116.46298); //输入的字符串形式得到的具体坐标 bus.toLatLng=new AliLatLng(39.98391,116.31622); //同上 //在地图上添加起终点图标 map.addOverlay(new AliMarker(bus.fromLatLng,{icon:new AliIcon("from.png",{x:23,y:26},{x:12,y:26})})); map.addOverlay(new AliMarker(bus.toLatLng,{icon:new AliIcon("to.png",{x:23,y:26},{x:12,y:26})})); //开始执行换乘 bus.execute();
(2)、编写回调函数
//处理公交换乘结果 function onRouteComplete() { var resultDiv=document.getElementById("resultDiv"),points=[]; var route=bus.routes[0],html,color;//route为返回结果第一条 if(!route){return;} for(var i=0;i<route.steps.length;i++) { var step=route.steps[i]; switch(step.type) { case "Bus": html="乘坐"+step.line.name+"从"+step.fromPoint.name+"到"+step.toPoint.name; color="red"; break; case "Walk": html="从"+(i==0?"起点":step.fromPoint.name)+"步行到"+(i==route.steps.length-1?"终点":step.toPoint.name); color="green"; break; } //绘制返回结果(换乘轨迹) map.addOverlay(new AliPolyline(step.getTrack(),{color:color,opacity:0.8,weight:5})); var li=document.createElement("li"); li.innerHTML=html; resultDiv.appendChild(li); } }
二、公交线路查询
(1)、创建服务对象并设置查询完成后的回调函数
//创建公交查询对象 bus=new AliBus(); //设置公交线路查询结果处理函数,查询线路起终点 AliEvent.addListener(bus,"linessearchcomplete",onLinesSearchComplete); //设置公交线路查询结果处理函数,查询线路途经站点 AliEvent.addListener(bus,"linestopscomplete",loadLineInfo); //设置公交线路查询结果处理函数,查询线路轨迹 AliEvent.addListener(bus,"linetrackcomplete",loadLineInfo); //设置线路查询所在城市 bus.city="110000"; startSearch();
(2)、编写回调函数
function startSearch() { //设置线路查询名称 bus.lineSearchKey=document.getElementById("lineName").value //开始线路查询 bus.executeLinesSearch(); } //公交线路查询结果处理函数 function onLinesSearchComplete() { var resultDiv=document.getElementById("resultDiv"); while(resultDiv.firstChild){resultDiv.removeChild(resultDiv.firstChild)} //bus.lines为线路查询结果 for(var i=0;i<bus.lines.length;i++) { //line.stops得到线路途径站点 //line.getTrack()得到线路轨迹点 var line=bus.lines[i],title=line.fullName+" "; var li=document.createElement("div"); li.style.fontSize="12px"; li.innerHTML='<a style="color:blue;cursor:pointer;text-decoration:underline">'+title+'</a>' AliEvent.addListener(li,"click",onLineClick(i)); resultDiv.appendChild(li); line.li=li; } if(bus.lines.length>0){showLine(0);} }
三、公交站点查询
(1)、创建服务对象并设置查询完成后的回调函数
//创建一个BUS对象 bus=new AliBus(); //设置搜索结果处理函数 AliEvent.addListener(bus,"stationssearchcomplete",onStationsSearchComplete); //设置关键词 bus.stationSearchKey="复兴门"; //设置返回最大结果数 bus.stationPageSize=20; //设置公交查询所在城市的行政区划编码 bus.city="110000" //开始搜索 bus.executeStationsSearch();
(2)、编写回调函数
//处理搜索结果 function onStationsSearchComplete() { var marker,resultDiv=document.getElementById("resultDiv"),points=[]; //bus.stations为返回结果对象数组 for(var i=0;i<bus.stations.length;i++) { var station=bus.stations[i]; points.push(station.latlng); marker=new AliMarker(station.latlng,{title:station.name}); map.addOverlay(marker); var li=document.createElement("li"); li.innerHTML=station.name; resultDiv.appendChild(li); } var bounds=AliBounds.getLatLngBounds(points) map.centerAndZoom(bounds.getCenter(),map.getBoundsZoom(bounds)); }
四、驾车导航
(1)、创建服务对象并设置查询完成后的回调函数
//定义驾驶导航对象 direction=new AliDirection(); //设置驾驶导航结果处理函数 AliEvent.addListener(direction,"directioncomplete",onDirectionComplete); //设置导航起终点 direction.points=[new AliLatLng(39.97,116.35),new AliLatLng(23.23,113.18)]; //字符解析获得经纬度起始位置的点对象 //开始导航 direction.execute();
(2)、编写回调函数
//处理导航结果 function onDirectionComplete() { var tollStr=["","全路段收费","部分路段收费"]; var resultDiv=document.getElementById("resultDiv"),points=[]; //direction.steps 为导航结果路段信息 for(var i=0;i<direction.steps.length;i++) { var step=direction.steps[i]; //step.getTrack()得到导航结果路段轨迹 map.addOverlay(new AliPolyline(step.getTrack())); var li=document.createElement("li"); //step.desc得到导航结果路段轨迹 li.innerHTML=step.desc; if(step.toll) { var tollDiv=document.createElement("div"); AliUtils.setStyle(tollDiv,{color:'#CA0000'}); tollDiv.appendChild(document.createTextNode(tollStr[step.toll])); li.appendChild(tollDiv); } resultDiv.appendChild(li); } }
五、AliMap首页的公交和驾车分析
分析:正如上边经纬度的设置,它是通过字符串的解析来获取的并不是手动设置的。经纬度是根据使用者输入字符来获取到的,但是并不是说使用者输入的文字就能够正确的解析成经纬度。因此,需要后台程序的支持来调用相应的API。通过API的获取多个结果的类似选项作为参考,允许用户选择起终位置,从而提供更加精准的服务,而不是只返回唯一的结果。正因为如此,是的服务有了更进一步的提升。所以,有时候不要想一步就搞定,那么在追求速度的时候反之会失去精度,诚然有所得必有所失,但得失衡量最优化为宜。