目录: 一、效果 二、操作
通过ajax来调用服务器map数据,来实现搜索功能。
一、先看效果:
1.我要搜索下中国移动的地理信息:
2.会搜出17条消息,然后把他们分页显示,一页6条;
3.每一页的6条数据,会在map生成一个6条marker;
4.点击marker的时候会弹出一个popup出来;
二、实际操作:
1.首先把所有数据查出来;
其中在这个图层上面有1000条数据:
1 $("#btn").click(function {
2.再把获取到的数据绘制成表格://详见下下面得PS部分
1 function initPagination(xhr) { 2 //这里的表格有个v_index,对应的是json数据的key;而xhr是个复杂的json,在key对应的还是一个对象,所以得重新构造一个数组,数组里面是一个个对象,所以obj都写在function里面,不然每条表格的数据都一样的了。 3 var arr = ; 4 $.each(xhr.features, function(i, n) { 5 var obj = {}; 6 obj.px=i+1; 7 obj.img=i+1+".png", 8 obj.sf = n.attributes.PROVINCE; 9 obj.geometry_x = n.geometry.x; 10 obj.geometry_y = n.geometry.y; 11 arr.push(obj) 12 }); 13 gridObj = $.fn.bsgrid.init('searchTable', { 14 localData: arr, 15 pageSize: 6,//6行 16 additionalAfterRenderGrid:table_complete//绘制完表格之后调用 17 }); 18 19 } 20 //渲染表格 21 function operate(record, rowIndex, colIndex, options) { 22 return '<a href="#" οnclick="alert(\'ID=' + gridObj.getRecordIndexValue(record, 'ID') + '\');">Operate</a>'; 23
3.再绘制出当前页的marker
1 function table_complete {
4.在给每个marker注册一个click事件
1 marker.events.register("click",marker,function(param){ 2 for(var i in popup_arr){ 3 map.removePopup(popup_arr[i]) 4 } 5 infoWindow(this.lonlat); 6 }); 7 //给每个marker加上popup 8 function infoWindow (n){ 9 10 var popup=new OpenLayers.Popup( 11 "popup", 12 n, 13 new OpenLayers.Size(100,50), 14 "<div>1232324</div>", 15 true 16 ) 17 popup_arr.push(popup) 18 map.addPopup(popup); 19 }
值得注意的几个是:
1.其中有不少技巧,最好用的是一个构造JSON对象,有用过jqgrid或者bsgrid插件的应该都会感觉很爽
2.没有得到具体的marker或者popup的时候,可以先创个数据,一个个把它们push进去,再删除的时候一个个遍历,就可以全解决,不用一个个去找。
ps:正常的能够被grid用到的json应该是这种:
1 var localData = [ 2 { 3 "ID": 202, 4 "CHAR": "1", 5 "TEXT": "TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_1", 6 "NUM": 11.2, 7 "XH": 1 8 }, 9 { 10 "ID": 201, 11 "CHAR": "111", 12 "TEXT": "TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_2", 13 "XH": 2 14 }, 15 { 16 "ID": 200, 17 "CHAR": "200", 18 "TEXT": "TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_3", 19 "XH": 3 20 }, 21 { 22 "ID": 199, 23 "CHAR": "199", 24 "XH": 4 25 }, 26 { 27 "ID": 32, 28 "CHAR": "34", 29 "NUM": 12.1, 30 "XH": 5 31 }];
但是从后台拿到的数据是这样的,这特么怎么可能可以用,所以得重新构造一组;
ok,年前最后一遍就写到这里了。
欢迎来我得小窝:传奇上帝www.leggod.com