摘要：之前的文章都是利用云索引来完成数据的分类显示的，今天教大家用云检索来制作有趣的地图。云检索的优点是，在结果展现的时候，可以让数据呈现出更棒的自定义效果。比如，结果面板的点击效果，markder的鼠标效果，信息窗口的自定义展示等。并且，教程中第一次使用了时间轴这样的插件！根据时间进度来播放整个地图标注加载的过程。

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

效果提前看一眼：http://zhaoziang.com/amap/tanguan.html

第一步、制作一张云图

登录云图管理台 http://yuntu.amap.com/datamanager/index.html

新建一张地图，这时后台会自动生成一个key。

准备原始数据，并将数据上传至云图。

新建地图：http://yuntu.amap.com/datamanager/index.html

导入数据

附贪官落马数据：

点开展开数据

预览一下

这时云图已经制作完成，你可以进行分享。

如果不想写代码的朋友，制作到这里，就可以分享你的云图给好友了。甚至可以用<iframe></iframe>的形式，嵌入到您的网站里。

当然，想要更加炫酷效果的朋友们，就要继续往下看，写两句代码啦。

第二步、云检索

对于自己云数据的检索，我们可以使用多边形检索，附近检索，还有ID检索。这里给出的例子是多边形检索，如下图，给中国区域画个大概的图。

自制简易的坐标拾取工具：http://zhaoziang.com/amap/picpoint.html

云检索代码：

//使用云检索CloudDataSearch
function cloudSearch() {  var arr = new Array();  //绘制多边形   arr.push(new AMap.LngLat(73.388672,50.578345)); arr.push(new AMap.LngLat(73.388672,34.578345));arr.push(new AMap.LngLat(78.388672,28.264383));arr.push(new AMap.LngLat(88.388672,21.578345));        arr.push(new AMap.LngLat(118.912109,20.264383));  arr.push(new AMap.LngLat(125.912109,39.264383));         arr.push(new AMap.LngLat(134.912109,43.578345));  arr.push(new AMap.LngLat(134.912123,56.578309)); arr.push(new AMap.LngLat(100.912123,45.578309));arr.push(new AMap.LngLat(73.388672,50.578345)); var polygon = new AMap.Polygon({  map:mapObj,   path:arr,   strokeColor:"#3366FF",   strokeOpacity:0.2,   strokeWeight:2,   fillColor: "#3366FF",   fillOpacity: 0.2   });    polygon.setMap(mapObj);  var search;  var searchOptions = {  keywords:"",orderBy:"time:ASC"}; mapObj.plugin(["AMap.Scale"],function(){  var scale = new AMap.Scale();  mapObj.addControl(scale);     });  //加载CloudDataSearch服务插件  mapObj.plugin(["AMap.CloudDataSearch"], function() {         search = new AMap.CloudDataSearch('53549433e4b0a8066457c35b', searchOptions); //构造云数据检索类  AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查询成功时的回调函数  AMap.event.addListener(search, "error", errorInfo); //查询失败时的回调函数  search.searchInPolygon(arr); //多边形检索  });
}

添加信息窗口和覆盖物

//添加marker和infowindow
function addmarker(i, d, mon){ var lngX = d._location.getLng();  var latY = d._location.getLat();  var s=new AMap.Size(40, 50);var iconimg = new AMap.Icon({p_w_picpath:d.p_w_picpath,p_w_picpathSize:s,     size:s            });var markerOption = {  map:mapObj,  icon:iconimg,offset: new AMap.Pixel(-10,-30),position:new AMap.LngLat(lngX, latY)    };              mar = new AMap.Marker(markerOption);    marker.push(new AMap.LngLat(lngX, latY));  var datetime1 = d.time;var datetimestr=d.time.toString()var year1 = datetimestr[0]+datetimestr[1]+datetimestr[2]+datetimestr[3];var month1 = datetimestr[4]+datetimestr[5];var date1 = datetimestr[6]+datetimestr[7];var infoWindow = new AMap.InfoWindow({  content:"<h3><font face=\"微软雅黑\"color=\"#3366FF\">"+(i+1) + "."+ d._name +"</font></h3><hr />" + "官职：" + d.title + "<br />" + "落马时间：" + year1 + "年"+month1+"月"+date1+"日" +  "<br />"+ "简介：" + d.profile + "<br />" + "<img class='touxiang' src="+d.p_w_picpath+"></img>",  size:new AMap.Size(300, 0),  autoMove:true,  offset:new AMap.Pixel(0,-30)  });    windowsArr.push(infoWindow);     var aa = function(){infoWindow.open(mapObj, mar.getPosition());};    AMap.event.addListener(mar, "click", aa);
}

云检索的简单示例，大家可以直接参考官网：http://api.amap.com/javascript/example/num/1903

第三步、结果面板

结果面板就是展示搜索结果的地方。当检索到数据后，在右侧展示出来。

并且点击结果时，打开对应的信息窗口。

//回调函数   function cloudSearch_CallBack(data) {    resultArr = data.datas;}//回调函数  function errorInfo(data) {  resultStr = data.info;  document.getElementById("result").innerHTML = resultStr;  }  //根据id打开搜索结果点tip  function openMarkerTipById1(pointid,thiss){      thiss.style.background='#CAE1FF';    windowsArr[pointid].open(mapObj, marker[pointid]);        }    //鼠标移开后点样式恢复  function onmouseout_MarkerStyle(pointid,thiss) {     thiss.style.background="";    }

第四步、添加时间控件

时间控件在网上找了许多个，最后决定用JQ的jquery-ui-1.10.4.custom.js。

function sliderChanged(event, ui)
{var value= $( "#slider" ).slider( "option", "value" )/10 + "";mon = value;mapObj.clearMap();  if (value < 10)mon = "20130" + value.substring(0,2) + "30";else if(9 < value && value < 13)mon = "2013" + value + "00";else if(12 < value && value < 22)mon = "2014" + value-12 + "00";    else if(21 < value && value < 25)mon = "2014" + value-12 + "30";            addmarkertest(mon);
};function SliderOn(sliderId,ministep)
{var value = $( '#'+sliderId ).slider( "option", "value" );var max = $( '#'+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地址：http://zhaoziang.com/amap/tanguan.html