摘要：之前的文章都是利用云索引来完成数据的分类显示的，今天教大家用云检索来制作有趣的地图。云检索的优点是，在结果展现的时候，可以让数据呈现出更棒的自定义效果。比如，结果面板的点击效果，markder的鼠标效果，信息窗口的自定义展示等。并且，教程中第一次使用了时间轴这样的插件！根据时间进度来播放整个地图标注加载的过程。
----------------------------------------------------------------
效果提前看一眼：/amap/tanguan.html
第一步、制作一张云图
登录云图管理台/datamanager/index.html
新建一张地图，这时后台会自动生成一个key。
准备原始数据，并将数据上传至云图。
新建地图：/datamanager/index.html
导入数据
附贪官落马数据：
点开展开数据
预览一下
这时云图已经制作完成，你可以进行分享。
如果不想写代码的朋友，制作到这里，就可以分享你的云图给好友了。甚至可以用<iframe></iframe>的形式，嵌入到您的网站里。
当然，想要更加炫酷效果的朋友们，就要继续往下看，写两句代码啦。
第二步、云检索
对于自己云数据的检索，我们可以使用多边形检索，附近检索，还有ID检索。这里给出的例子是多边形检索，如下图，给中国区域画个大概的图。
自制简易的坐标拾取工具：/amap/picpoint.html
云检索代码：
//使用云检索CloudDataSearchfunctioncloudSearch(){vararr=newArray();//绘制多边形arr.push(newAMap.LngLat(73.388672,50.578345));arr.push(newAMap.LngLat(73.388672,34.578345));arr.push(newAMap.LngLat(78.388672,28.264383));arr.push(newAMap.LngLat(88.388672,21.578345));arr.push(newAMap.LngLat(118.912109,20.264383));arr.push(newAMap.LngLat(125.912109,39.264383));arr.push(newAMap.LngLat(134.912109,43.578345));arr.push(newAMap.LngLat(134.912123,56.578309));arr.push(newAMap.LngLat(100.912123,45.578309));arr.push(newAMap.LngLat(73.388672,50.578345));varpolygon=newAMap.Polygon({map:mapObj,path:arr,strokeColor:"#3366FF",strokeOpacity:0.2,strokeWeight:2,fillColor:"#3366FF",fillOpacity:0.2});polygon.setMap(mapObj);varsearch;varsearchOptions={keywords:"",orderBy:"time:ASC"};mapObj.plugin(["AMap.Scale"],function(){varscale=newAMap.Scale();mapObj.addControl(scale);});//加载CloudDataSearch服务插件mapObj.plugin(["AMap.CloudDataSearch"],function(){search=newAMap.CloudDataSearch('53549433e4b0a8066457c35b',searchOptions);//构造云数据检索类AMap.event.addListener(search,"complete",cloudSearch_CallBack);//查询成功时的回调函数AMap.event.addListener(search,"error",errorInfo);//查询失败时的回调函数search.searchInPolygon(arr);//多边形检索});}
添加信息窗口和覆盖物
//添加marker和infowindowfunctionaddmarker(i,d,mon){varlngX=d._location.getLng();varlatY=d._location.getLat();vars=newAMap.Size(40,50);variconimg=newAMap.Icon({p_w_picpath:d.p_w_picpath,p_w_picpathSize:s,size:s});varmarkerOption={map:mapObj,icon:iconimg,offset:newAMap.Pixel(-10,-30),position:newAMap.LngLat(lngX,latY)};mar=newAMap.Marker(markerOption);marker.push(newAMap.LngLat(lngX,latY));vardatetime1=d.time;vardatetimestr=d.time.toString()varyear1=datetimestr[0]+datetimestr[1]+datetimestr[2]+datetimestr[3];varmonth1=datetimestr[4]+datetimestr[5];vardate1=datetimestr[6]+datetimestr[7];varinfoWindow=newAMap.InfoWindow({content:"<h3><fontface=\"微软雅黑\"color=\"#3366FF\">"+(i+1)+"."+d._name+"</font></h3><hr/>"+"官职："+d.title+"<br/>"+"落马时间："+year1+"年"+month1+"月"+date1+"日"+"<br/>"+"简介："+d.profile+"<br/>"+"<imgclass='touxiang'src="+d.p_w_picpath+"></img>",size:newAMap.Size(300,0),autoMove:true,offset:newAMap.Pixel(0,-30)});windowsArr.push(infoWindow);varaa=function(){infoWindow.open(mapObj,mar.getPosition());};AMap.event.addListener(mar,"click",aa);}
云检索的简单示例，大家可以直接参考官网：/javascript/example/num/1903
第三步、结果面板
结果面板就是展示搜索结果的地方。当检索到数据后，在右侧展示出来。
并且点击结果时，打开对应的信息窗口。
//回调函数functioncloudSearch_CallBack(data){resultArr=data.datas;}//回调函数functionerrorInfo(data){resultStr=data.info;document.getElementById("result").innerHTML=resultStr;}//根据id打开搜索结果点tipfunctionopenMarkerTipById1(pointid,thiss){thiss.style.background='#CAE1FF';windowsArr[pointid].open(mapObj,marker[pointid]);}//鼠标移开后点样式恢复functiononmouseout_MarkerStyle(pointid,thiss){thiss.style.background="";}
第四步、添加时间控件
时间控件在网上找了许多个，最后决定用JQ的jquery-ui-1.10.4.custom.js。
functionsliderChanged(event,ui){varvalue=$("#slider").slider("option","value")/10+"";mon=value;mapObj.clearMap();if(value<10)mon="0"+value.substring(0,2)+"30";elseif(9<value&&value<13)mon=""+value+"00";elseif(12<value&&value<22)mon=""+value-12+"00";elseif(21<value&&value<25)mon=""+value-12+"30";addmarkertest(mon);};functionSliderOn(sliderId,ministep){varvalue=$('#'+sliderId).slider("option","value");varmax=$('#'+sliderId).slider("option","max");if(value>=max){clearInterval(intervalId);return;}$('#'+sliderId).slider("option","value",value+ministep);};$("#slider").slider();$("#slider").slider("option","max",240);$("#slider").slider("option","step",10);$("#slider").slider("option","animate","slow");$("#slider").on("slide",sliderChanged);$("#slider").on("slidechange",sliderChanged);intervalId=setInterval("SliderOn('slider',10)",300);
完结。
-----------------------------------------------------------------------------------------
全部源代码：
点击展开全部源代码
再看一遍效果：
demo地址：/amap/tanguan.html
