【Google Fusion Tables API 初探】地图与云计算
前言
这次当然又是标题党啦！我和云计算扯不上关系的。。。。
最近公司有个需求，类似于将中国各个省市给列出来（图标），这个应用其实很广泛我说的是原需求的变形，再扩散一点我们可以获得各个城市具有苹果专卖店的地址然后显示出来，比如：
这个的实现原理是客户端渲染技术，浏览器指定在哪些地方打上标记，便在哪些地方打上
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #map { width: 600px; height: 400px; } </style> <script src="js/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="js/gmaps.js" type="text/javascript"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script> <script type="text/javascript"> $(document).ready(function () { var path = []; var map = new GMaps({ div: '#map', lat: 30.657358499999994, lng: 104.049977, markerClusterer: function (map) { return new MarkerClusterer(map); } }); var lat_span = 30.657358499999994; var lng_span = 104.049977; for (var i = 0; i < 100; i++) { var latitude = Math.random()*0.01 + 30.657358499999994; var longitude = Math.random()*0.01 + 104.049977; map.addMarker({ lat: latitude, lng: longitude, title: 'Marker #' + i }); } }); </script> </head> <body> <input type="text" value="请输入地址" id="address" /> <div id="map"> </div> </body> </html>
但是他这样做是有一定问题的，比如我们有以下应用：显示全国现在所有的qq登录用户地点，这个需求是很恐怖的，我们假设全国qq用户只有10万人吧，现在我们要在页面上画100000个。。。
浏览器表示很卡！！！
PS：说句实话，碰到这种场景不是很多，但是既然都到这一步了，我们还是继续往下面看看吧！
基于这个原因，google新推出了一个Fusion Tables API ，这个东东感觉有点不错，他是干什么的呢，我们进入正题吧
Fusion Tables API
什么是Fusion Tables API 呢？
Google Fusion Tables is a web application used for sharing, visualizing, and publishing tabular data. You can upload your own CSV, KML, ODS, XLS, or Google Spreadsheet data to a Fusion Tables table. Once your data is in Fusion Tables, you can collaborate on it with others in real time, publish it for Google Search, create map and chart visualizations for private use or for embedding on websites, filter it according to specific criteria, and update the data behind your visualizations or filters at any time.
以上时原文介绍，不错，你们没看错这个好像是google最新推出的一个东西，文档全部是英文的，我这样的水货居然也开始读英文文档了。。。。
根据连猜带蒙，fusion table
应该是云存储一类的东西，其中google为用户提供一个表格，这个表会具有唯一id，
根据id获得表后，便可以对其列进行操作。
意思是我们的服务性数据都可以存到google上啦！
注意陷阱：使用该功能时，切记使用自己的邮箱，不要使用公司的邮箱，因为会有所限制：
我们在干什么？
那好，扯了那么远，我们在干什么？
我们将当前所有qq在线数据信息存入fusion table，然后在google map 调用相关接口
地图会在服务器端渲染图片，将搞好了的地图传我们
所以，便解决了以上问题，但是我个人感觉这是很有问题的，因为数据时一个公司的生命，各个公司会愿意交出来？？？
好了，我们来建立一张表试试。
Fusion Table 第一步建表
https://www.google.com/fusiontables/DataSource?dsrcid=implicit&redirectPath=data
用google mail 账号登陆后，进入上链接：
好了，现在什么也不管的选择建立一张空表，于是有了以下东西：
这里搞完后一定记得分享出去，不然外部不能使用
好了，我们来使用下此表（表的id见地址栏https://www.google.com/fusiontables/data?docid=1qv6QEpgjYvl3b0PiJx4PFlE04zAZcwmAJJsTd5w#rows:id=1）
我们来在地图上简单搞几个标记，就把上面几个地址弄出来吧：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>获取当前位置</title> 5 <style type="text/css"> 6 #map { width: 1200px; height: 500px; } 7 ul, li { padding: 0; list-style: none; margin: 0; } 8 ul { padding: 10px; border: 1px solid black; border-radius: 5px; background: white; position: absolute; left: 1000px; top: 300px; } 9 </style> 10 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 11 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 12 <script src="js/gmaps.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 var map, infoWindow; 15 $(document).ready(function () { 16 infoWindow = new google.maps.InfoWindow({}); 17 map = new GMaps({ 18 el: '#map', 19 zoom: 11, 20 lat: 30.657358499999994, 21 lng: 104.049977 22 }); 23 map.loadFromFusionTables({ 24 query: { 25 select: 'Location', 26 from: '1qv6QEpgjYvl3b0PiJx4PFlE04zAZcwmAJJsTd5w' 27 } 28 }); 29 }); 30 </script> 31 </head> 32 <body> 33 <div id="map"> 34 </div> 35 36 <br /> 37 <label><input type="checkbox" value="四川大学" /> 四川大学</label> 38 <label><input type="checkbox" value="电子科大" /> 电子科大</label> 39 <label><input type="checkbox" value="成都大学" /> 成都大学</label> 40 <label><input type="checkbox" value="西南交大" /> 西南交大</label> 41 <label><input type="checkbox" value="清华大学" /> 清华大学</label> 42 </body> 43 </html>
map.loadFromFusionTables({
query: {
select: 'Location',
from: '1qv6QEpgjYvl3b0PiJx4PFlE04zAZcwmAJJsTd5w'
}
});
这个相当于sql语句哟，在下面还能写where语句，我们接下来再说，那么在我们地图上便会多出两个点：
暂时便只能达到此类效果了，好了，我们接下来搞点其它事情呢。
在地图上标注所以四川的大学
第一步，我们来看看四川有多少大学呢？
所有大学
1 四川大学 2 西南交通大学 3 电子科技大学 4 西南财经大学 5 西南民族大学 6 中国民用航空飞行学院 7 成都理工大学 8 西华大学 9 西南科技大学 10 四川农业大学 11 成都中医药大学 12 四川师范大学 13 西华师范大学 14 西南石油大学 15 成都信息工程学院 16 四川理工学院 17 泸州医学院 18 川北医学院 19 成都医学院 20 乐山师范学院 21 内江师范学院 22 四川文理学院 23 四川警察学院 24 成都体育学院 25 四川音乐学院 26 四川民族学院 27 成都学院 28 西昌学院 29 攀枝花学院 30 宜宾学院 31 绵阳师范学院 32 成都理工大学工程技术学院 33 成都理工大学广播影视学院 34 成都信息工程学院银杏酒店管理学院 35 四川师范大学文理学院 36 四川师范大学成都学院 37 四川外语学院成都学院 38 电子科技大学成都学院 39 四川大学锦城学院 40 西南科技大学城市学院 41 四川音乐学院绵阳艺术学院 42 四川大学锦江学院 43 西南财经大学天府学院 44 西南交通大学希望学院 45 成都电子机械高等专科学校 46 四川烹饪高等专科学校 47 成都纺织高等专科学校 48 四川中医药高等专科学校 49 阿坝师范高等专科学校 50 四川幼儿师范高等专科学校 51 民办四川天一学院 52 成都航空职业技术学院 53 泸州职业技术学院 54 眉山职业技术学院 55 四川文化传媒职业学院 56 四川管理职业学院 57 四川华新现代职业学院 58 四川商务职业学院 59 广安职业技术学院 60 四川信息职业技术学院 61 四川警安职业学院 62 四川司法警官职业学院 63 乐山职业技术学院 64 内江职业技术学院 65 四川机电职业技术学院 66 四川交通职业技术学院 67 达州职业技术学院 68 四川建筑职业技术学院 69 四川工商职业技术学院 70 绵阳职业技术学院 71 四川电力职业技术学院 72 四川工程职业技术学院 73 四川科技职业学院 74 四川文化产业职业学院 75 四川财经职业学院 76 四川现代职业学院 77 雅安职业技术学院 78 四川国际标榜职业学院 79 四川艺术职业学院 80 四川邮电职业技术学院 81 四川航天职业技术学院 82 四川化工职业技术学院 83 成都职业技术学院 84 四川水利职业技术学院 85 四川城市职业学院 86 南充职业技术学院 87 成都东软信息技术职业学院 88 四川职业技术学院 89 成都农业科技职业学院 90 宜宾职业技术学院 91 成都艺术职业学院 92 四川托普信息技术职业学院 93 中国工程物理研究院职工工学院 94 四川教育学院
好像是94所大学呢，其中的其它应该我们便不管了，我们就只把大学名字与其经纬度存入表中即可，于是马上问他就来了！！
我去哪里找那劳什子坐标呢？？不能一个个输入吧，于是我们有了以下程序：
我们操作了下word有了以上东西，于是：我们调用google的搜索接口后会有以下东西：
获取所有学校的坐标
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #map { width: 600px; height: 400px; } 7 tr { border: 1px solid black; } 8 table { border: 1px solid black; width: 600px; } 9 </style> 10 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 11 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 12 <script src="js/gmaps.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 $(document).ready(function () { 15 var arr = ['四川大学', '西南交通大学', '电子科技大学', '西南财经大学', '西南民族大学', '中国民用航空飞行学院', '成都理工大学', '西华大学', '西南科技大学', '四川农业大学', '成都中医药大学', '四川师范大学', '西华师范大学', '西南石油大学', '成都信息工程学院', '四川理工学院', '泸州医学院', '川北医学院', '成都医学院', '乐山师范学院', '内江师范学院', '四川文理学院', '四川警察学院', '成都体育学院', '四川音乐学院', '四川民族学院', '成都学院', '西昌学院', '攀枝花学院', '宜宾学院', '绵阳师范学院', '成都理工大学工程技术学院', '成都理工大学广播影视学院', '成都信息工程学院银杏酒店管理学院', '四川师范大学文理学院', '四川师范大学成都学院', '四川外语学院成都学院', '电子科技大学成都学院', '四川大学锦城学院', '西南科技大学城市学院', '四川音乐学院绵阳艺术学院', '四川大学锦江学院', '西南财经大学天府学院', '西南交通大学希望学院', '成都电子机械高等专科学校', '四川烹饪高等专科学校', '成都纺织高等专科学校', '四川中医药高等专科学校', '阿坝师范高等专科学校', '四川幼儿师范高等专科学校', '民办四川天一学院', '成都航空职业技术学院', '泸州职业技术学院', '眉山职业技术学院', '四川文化传媒职业学院', '四川管理职业学院', '四川华新现代职业学院', '四川商务职业学院', '广安职业技术学院', '四川信息职业技术学院', '四川警安职业学院', '四川司法警官职业学院', '乐山职业技术学院', '内江职业技术学院', '四川机电职业技术学院', '四川交通职业技术学院', '达州职业技术学院', '四川建筑职业技术学院', '四川工商职业技术学院', '绵阳职业技术学院', '四川电力职业技术学院', '四川工程职业技术学院', '四川科技职业学院', '四川文化产业职业学院', '四川财经职业学院', '四川现代职业学院', '雅安职业技术学院', '四川国际标榜职业学院', '四川艺术职业学院', '四川邮电职业技术学院', '四川航天职业技术学院', '四川化工职业技术学院', '成都职业技术学院', '四川水利职业技术学院', '四川城市职业学院', '南充职业技术学院', '成都东软信息技术职业学院', '四川职业技术学院', '成都农业科技职业学院', '宜宾职业技术学院', '成都艺术职业学院', '四川托普信息技术职业学院', '中国工程物理研究院职工工学院', '四川教育学院']; 16 ; 17 var map = new GMaps({ 18 el: '#map', 19 lat: 30.657358499999994, 20 lng: 104.049977 21 }); 22 23 24 var tb = $('#tb'); 25 for (var i = 0, len = arr.length; i < len; i++) { 26 var name = arr[i]; 27 (function (name, i) { 28 setTimeout(function () { 29 GMaps.geocode({ 30 address: name, 31 callback: function (r, s) { 32 if (s == 'OK') { 33 var latlng = r[0].geometry.location; 34 map.setCenter(latlng.lat(), latlng.lng()); 35 map.addMarker({ 36 lat: latlng.lat(), 37 lng: latlng.lng(), 38 title: name 39 }); 40 41 var tr = $('<tr></tr>'); 42 var td = $('<td>' + name + '</td><td>' + latlng.lat() + ',' + latlng.lng() + '</td>'); 43 tr.append(td); 44 tb.append(tr); 45 } 46 } 47 }); 48 }, 10 * i); 49 })(name, i); 50 } 51 52 53 }); 54 </script> 55 </head> 56 <body> 57 <div id="map"> 58 </div> 59 <table id="tb"> 60 <tr> 61 <td> 62 名称 63 </td> 64 <td> 65 位置 66 </td> 67 </tr> 68 </table> 69 </body> 70 </html>
| 名称 | 位置 |
| 四川大学 | 30.632278,104.08679299999994 |
| 西南交通大学 | 29.568325,103.45211419999998 |
| 电子科技大学 | 30.675104,104.10036100000002 |
| 西南财经大学 | 30.6646,104.01711 |
| 西南民族大学 | 30.6381136,104.05211110000005 |
| 中国民用航空飞行学院 | 30.95188,104.30784300000005 |
| 成都理工大学 | 30.673151,104.14298699999995 |
| 西华大学 | 30.634153,104.06710999999996 |
| 西南科技大学 | 31.535485,104.69739600000003 |
| 四川农业大学 | 29.977484,102.99369100000001 |
| 成都中医药大学 | 30.682799,103.81025699999998 |
| 西华师范大学 | 30.7974055,106.08870819999993 |
| 四川师范大学 | 30.608217,104.12046299999997 |
| 西南石油大学 | 30.8217896,104.18355880000001 |
| 成都信息工程学院 | 30.644946,104.06579499999998 |
| 泸州医学院 | 28.882316,105.44513600000005 |
| 川北医学院 | 30.795586,106.07915600000001 |
| 成都医学院 | 30.749365,104.11383000000001 |
| 乐山师范学院 | 29.55498,103.75279999999998 |
| 四川理工学院 | 30.691293,103.817994 |
| 成都体育学院 | 30.646466,104.04396799999995 |
| 内江师范学院 | 29.588892,105.04991100000007 |
| 四川文理学院 | 31.210814,107.48566700000003 |
| 四川警察学院 | 28.874513,105.431827 |
| 四川音乐学院 | 30.638649,104.07938999999999 |
| 四川民族学院 | 30.6361015,104.04933800000003 |
| 成都学院 | 30.8211452,103.9815489 |
| 西昌学院 | 27.945208,102.20954000000006 |
| 攀枝花学院 | 26.5670352,101.72353659999999 |
| 宜宾学院 | 28.790945,104.61263299999996 |
| 成都信息工程学院银杏酒店管理学院 | 30.7864588,103.95632139999998 |
| 绵阳师范学院 | 31.494497,104.77592000000004 |
| 成都理工大学工程技术学院 | 29.560394,103.72431699999993 |
| 成都理工大学广播影视学院 | 30.825179,103.981356 |
| 四川师范大学文理学院 | 30.6083283,104.16653100000008 |
| 四川师范大学成都学院 | 30.821234,103.98181899999997 |
| 四川外语学院成都学院 | 30.829334,103.57538 |
| 电子科技大学成都学院 | 30.729952,103.96324099999993 |
| 西南科技大学城市学院 | 31.443738,104.79513500000007 |
| 四川大学锦城学院 | 30.725417,103.95104500000002 |
| 西南交通大学希望学院 | 30.746804,106.04791999999998 |
| 四川音乐学院绵阳艺术学院 | 31.420544,104.763777 |
| 四川大学锦江学院 | 30.213946,103.87377600000002 |
| 成都电子机械高等专科学校 | 30.676769,104.048768 |
| 成都纺织高等专科学校 | 30.7586151,103.95988490000002 |
| 四川烹饪高等专科学校 | 30.579139,104.27734599999997 |
| 四川中医药高等专科学校 | 31.455273,104.75084330000004 |
| 阿坝师范高等专科学校 | 31.4702775,103.57603510000001 |
| 四川幼儿师范高等专科学校 | 30.651652,104.07593099999997 |
| 西南财经大学天府学院 | 31.493071,104.68737099999998 |
| 眉山职业技术学院 | 30.0358408,103.83557180000003 |
| 民办四川天一学院 | 30.5680356,104.26512449999996 |
| 四川管理职业学院 | 30.6646209,104.01193920000003 |
| 成都航空职业技术学院 | 30.529353,104.23955999999998 |
| 四川文化传媒职业学院 | 30.614098,103.677955 |
| 四川华新现代职业学院 | 30.539319,103.91459800000007 |
| 四川商务职业学院 | 30.692743,103.92368599999998 |
| 广安职业技术学院 | 30.463775,106.66608999999994 |
| 四川信息职业技术学院 | 32.43947,105.85393599999998 |
| 泸州职业技术学院 | 28.865876,105.42632600000002 |
| 内江职业技术学院 | 29.59454,105.06688800000006 |
| 四川司法警官职业学院 | 31.1301659,104.41259880000007 |
| 四川警安职业学院 | 31.323047,104.49960699999997 |
| 乐山职业技术学院 | 29.556832,103.74356399999999 |
| 四川交通职业技术学院 | 30.686475,103.81869099999994 |
| 四川机电职业技术学院 | 26.56832,101.76037999999994 |
| 达州职业技术学院 | 31.2810107,107.53018680000002 |
| 四川建筑职业技术学院 | 31.085562,104.38607300000001 |
| 四川工商职业技术学院 | 30.916133,103.69336699999997 |
| 绵阳职业技术学院 | 31.490128,104.78429400000005 |
| 四川文化产业职业学院 | 30.519122,104.03962899999999 |
| 四川国际标榜职业学院 | 30.597239,104.29942600000004 |
| 四川电力职业技术学院 | 30.719586,103.83697099999995 |
| 四川工程职业技术学院 | 31.091347,104.38872500000002 |
| 四川科技职业学院 | 30.8233017,103.98101789999998 |
| 四川现代职业学院 | 30.5212762,103.99990019999996 |
| 雅安职业技术学院 | 29.97853,103.01496999999995 |
| 四川艺术职业学院 | 30.6463276,104.16460200000006 |
| 四川邮电职业技术学院 | 30.62012,104.12373400000001 |
| 四川财经职业学院 | 30.5776231,104.21111580000002 |
| 四川水利职业技术学院 | 30.9923311,103.61572130000002 |
| 四川职业技术学院 | 29.59454,105.06688800000006 |
| 四川城市职业学院 | 30.6085892,104.16698399999996 |
| 四川航天职业技术学院 | 30.5537694,104.26544339999998 |
| 成都职业技术学院 | 30.5942018,104.06126549999999 |
| 四川化工职业技术学院 | 28.86498,105.42272700000001 |
| 成都东软信息技术职业学院 | 30.889109,103.59484099999997 |
| 成都农业科技职业学院 | 30.6949737,103.81747010000004 |
| 宜宾职业技术学院 | 28.712597,104.57818700000007 |
| 南充职业技术学院 | 30.850018,106.15655500000003 |
| 中国工程物理研究院职工工学院 | 35.86166,104.19539699999996 |
| 四川教育学院 | 31.132059,104.38520800000003 |
| 成都艺术职业学院 | 30.48657369999999,103.88415220000002 |
| 四川托普信息技术职业学院 | 30.7787636,103.92162740000003 |
PS：大家运行过程中若是有问题可将此时间点加长：
setTimeout(function () { GMaps.geocode({ address: name, callback: function (r, s) { if (s == 'OK') { var latlng = r[0].geometry.location; map.setCenter(latlng.lat(), latlng.lng()); map.addMarker({ lat: latlng.lat(), lng: latlng.lng(), title: name }); var tr = $('<tr></tr>'); var td = $('<td>' + name + '</td><td>' + latlng.lat() + ',' + latlng.lng() + '</td>'); tr.append(td); tb.append(tr); } } }); }, 10 * i);
好了下一步我们将数据导入！
导入四川所有大学数据
导入过程中注意UTF-8编码，否则
然后请选择右上角的分享！！！
于是我们来试试代码吧：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>获取当前位置</title> 5 <style type="text/css"> 6 #map { width: 1200px; height: 500px; } 7 ul, li { padding: 0; list-style: none; margin: 0; } 8 ul { padding: 10px; border: 1px solid black; border-radius: 5px; background: white; position: absolute; left: 1000px; top: 300px; } 9 </style> 10 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 11 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 12 <script src="js/gmaps.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 var map, infoWindow; 15 $(document).ready(function () { 16 infoWindow = new google.maps.InfoWindow({}); 17 map = new GMaps({ 18 el: '#map', 19 zoom: 11, 20 lat: 30.657358499999994, 21 lng: 104.049977 22 }); 23 map.loadFromFusionTables({ 24 query: { 25 select: 'Location', 26 from: '1WDn3ksr-bYGEaYpeO8BEC-TwZJ5zdM5otx1oe7M' 27 } 28 }); 29 }); 30 </script> 31 </head> 32 <body> 33 <div id="map"> 34 </div> 35 </body> 36 </html>
于是四川所有的学校出来啦！！！！
基本功能完成后我们来干点其他事情，因为我们肯定会有检索条件的，所以我们这边给6种搜索条件（这里我变使用纬度经度分类了）
为什么是6种不是5种呢？因为google api写的最多好像是5种，所以我想试试6种会怎么样了。。。。
加入搜索条件
这里我们在原表中做一个手脚，在后面加入一个自动编号，作为后面的搜索条件，所以每行数据多了个no编号。
第一步，简单与恶心的实现
现在简单一般都有以下特点：
1 代码量大
2 思维简单
3 效果不好
4 恶心
不信见以下代码：
丑陋的代码
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>获取当前位置</title> 5 <style type="text/css"> 6 #map { width: 1200px; height: 500px; } 7 ul, li { padding: 0; list-style: none; margin: 0; } 8 ul { padding: 10px; border: 1px solid black; border-radius: 5px; background: white; position: absolute; left: 1000px; top: 300px; } 9 </style> 10 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 11 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 12 <script src="js/gmaps.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 $(document).ready(function () { 15 var map; 16 function getMap() { 17 map = new GMaps({ 18 el: '#map', 19 zoom: 11, 20 lat: 30.657358499999994, 21 lng: 104.049977 22 }); 23 } 24 function loadFusionTable(opt) { 25 if (!opt) { 26 opt = '1=1'; 27 } 28 map.loadFromFusionTables({ 29 query: { 30 select: 'Location', 31 from: '13W-mWrG2SOkFiS-6UsjGUxarYxxDidnStg4Md6E', 32 where: opt 33 } 34 }); 35 } 36 37 getMap(); 38 39 $('input').click(function () { 40 getMap(); 41 $('input').each(function () { 42 var el = $(this); 43 if (el.attr('checked')) { 44 loadFusionTable(el.val()); 45 } 46 }); 47 }); 48 49 }); //$(document) 50 </script> 51 </head> 52 <body> 53 <div id="map"> 54 </div> 55 <label><input type="checkbox" value="no<10" /> NO 0-10的大学</label> 56 <label><input type="checkbox" value="no>10 AND no<20" /> NO 10-20的大学</label> 57 <label><input type="checkbox" value="no>20 AND no<30" /> NO 20-30的大学</label> 58 <label><input type="checkbox" value="no>30 AND no<40" /> NO 30-40的大学</label> 59 <label><input type="checkbox" value="no>40 AND no<50" /> NO 40-50的大学</label> 60 <label><input type="checkbox" value="no>50" /> NO 大于50的大学</label> 61 62 </body> 63 </html>
这样的话，没点一次由于需要清除以前的，我迫不得已重新加载了一次地图！！！！解决方案，我没有找到！！！！
结语
今天这块东西，有点问题，现在我还在搞下面的筛选功能，等下搞出来了再加上吧。
