前言
這次當然又是標題黨啦！我和雲計算扯不上關系的。。。。
最近公司有個需求，類似於將中國各個省市給列出來（圖標），這個應用其實很廣泛我說的是原需求的變形，再擴散一點我們可以獲得各個城市具有蘋果專賣店的地址然后顯示出來，比如：
這個的實現原理是客戶端渲染技術，瀏覽器指定在哪些地方打上標記，便在哪些地方打上
<!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>
這樣的話，沒點一次由於需要清除以前的，我迫不得已重新加載了一次地圖！！！！解決方案，我沒有找到！！！！
結語
今天這塊東西，有點問題，現在我還在搞下面的篩選功能，等下搞出來了再加上吧。