我有一定的房產數據，還有一定的銀行數據，我想在百度地圖上標注出來，並且能搜索到這些數據。可是百度的數據庫里並沒有我的數據，怎么辦呢？
----------------------------------------------------------------------------------------------------------------------------------------------------------------
一、無需數據庫，如何建立自己的地理信息表
如果讓初學者去建立數據庫，那么意味着大家還要學習數據庫，以及網絡后端的知識。為了方便學習，能夠快速的掌握如何構建房產地圖，銀行地圖等，我們可以把數據存儲在前端，搜索自己數據的一個辦法。
首先，我們需要為自己的數據建立一個數組，把他們存儲起來，像這樣：
1 // 標注點數組 2 var BASEDATA = [ 3 {title:"奧亞酒店",content:"北苑路169號",point:"116.422792|40.009471",isOpen:1,icon:{w:21,h:21,l:115,t:46,x:1,lb:10}}, 4 {title:"珀麗酒店",content:"將台西路8號",point:"116.484289|39.97936",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 5 {title:"貴國酒店",content:"左家庄1號",point:"116.454494|39.964011",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 6 {title:"科通酒店",content:"民族園路8號院2號樓",point:"116.394601|39.987925",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 7 {title:"將台酒店",content:"酒仙橋路甲12號",point:"116.496024|39.976864",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 8 {title:"成宏酒店",content:"北四環東路惠新東橋西北側",point:"116.429445|39.995392",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 9 {title:"華商酒店",content:"延靜西里2號",point:"116.488962|39.921939",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 10 {title:"標華酒店",content:"北京市 朝陽區紅廟路柴家灣1號",point:"116.489284|39.92104",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 11 {title:"萬程酒店",content:"天壇路89號",point:"116.411762|39.89457",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 12 {title:"黎昌酒店",content:"永定門外彭庄乙58號",point:"116.393532|39.876272",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 13 {title:"北京銀行",content:"北京市海淀區白石橋路39號",point:"116.329593|39.952398",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 14 {title:"海淀銀行",content:"丹棱街16西門",point:"116.315551|39.984388",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 15 {title:"北京銀行",content:"北京市西城區文津街附近",point:"116.391713|39.929007",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 16 {title:"首都銀行",content:"東三環南路88號",point:"116.469899|39.87684",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 17 {title:"國家銀行",content:"中關村南大街33號",point:"116.331292|39.949031",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 18 {title:"崇文區銀行",content:"北京市崇文區花市大街113號（樂天瑪特超市旁）的敕建火德真君廟內",point:"116.427671|39.903568",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 19 {title:"朝陽區銀行",content:"北京市朝陽區朝外小庄金台里17號",point:"116.47766|39.922295",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 20 {title:"宣武區銀行",content:"教子胡同8號",point:"116.374561|39.894302",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 21 {title:"東城區銀行",content:"交道口東大街85號",point:"116.41927|39.9474",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 22 {title:"西城區銀行",content:"北京市西城區后廣平胡同26號",point:"116.368099|39.942332",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}} 23 ]
注意：這部分是寫在JS里的。
其中，title是信息窗口打開后的標題，同時也是label標簽的取值。
content是信息窗口的內容。
point是經緯度，請使用百度坐標（獲取地址：http://dev.baidu.com/wiki/static/map/API/tool/getPoint/）
isopen是控制信息窗口是否打開的開關。
icon里的選項是控制marker圖片的，width是寬，height是高等等。
二、如何查找，並顯示自己的數據
你需要在HTML中寫一個搜索框，一個搜索按鈕。
1 <p> 2 <input id="keyword" type="text" style="width:150px;" value="銀行"/> 3 <input type="button" value="搜索" onclick="search('type','show','keyword')"/> 4 </p>
搜索框，需要一個id，例如keyword來傳遞要搜索的參數。我寫了銀行。本案例中，由於有酒店數據，你還可以寫酒店。
搜索按鈕，上面需要一個點擊事件onclick="search('type','show','keyword')"。根據type類型、show是否顯示、keyword關鍵詞來做搜索。
那么，當搜索的內容，就是id=keyword里面的keyword和我自己的數據，就是步驟一里的數組，相同時，我就創建一個marker標注，並且默認打開它的信息窗口。
1 window.search = function(name_t,name_s,id_d){ 2 var t_o = document.getElementsByName(name_t); 3 var s_o = document.getElementsByName(name_s); 4 var s_v,t_v,d_v = document.getElementById(id_d).value; 5 for(var i = 0; i < t_o.length; i++){ 6 if(t_o[i].checked){ 7 t_v = t_o[i].value; 8 } 9 } 10 for(var i = 0; i < s_o.length; i++){ 11 if(s_o[i].checked){ 12 s_v = s_o[i].value; 13 } 14 } 15 searchClass.trim(t_v) == "" && (t_v = "single"); 16 var dd = searchClass.search({k:"title",d:d_v,t:t_v,s:s_v}); 17 addMarker(dd);//向地圖中添加marker 18 }
三、全部源代碼
為了更加符合用戶的搜索習慣，我設計了精確查找和模糊查找兩種情況。
精確查找：就是用戶輸入的KeyWord，和我數據庫里的一模一樣時，就打開信息窗口。這時候一般只能打開一個。因為你自己的數據應該不會有重復的。
模糊查找：比如查找酒店，會顯示全部的酒店。比如查找銀行，會顯示全部的銀行數據。默認打開第一個的信息窗口。
為了方便大家看到我添加進去的數據信息，這里還設計了“僅查找到的內容”和“顯示所有的內容”
僅查找到的內容：用戶搜什么，就顯示出什么來。
顯示所有的內容:顯示我全部添加的數據。
全部源代碼在這里，我減去可很多數據，大家可以自己添加.
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>自家數據+前端搜索</title> 5 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script> 6 </head> 7 <body> 8 <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> 9 <p> 10 二選一： 11 <input id="type1" type="radio" name="type" value="single"/><label for="type1">精准查找</label> 12 <input id="type2" type="radio" name="type" value="more" checked="checked"/><label for="type2">模糊查找</label> 13 </p> 14 <p>二選一： 15 16 <input id="show1" type="radio" name="show" value="" checked="checked"/><label for="show1">僅查找到的內容</label> 17 <input id="show2" type="radio" name="show" value="all"/><label for="show2">顯示所有內容</label> 18 </p> 19 <p> 20 <input id="keyword" type="text" style="width:150px;" value="銀行"/> 21 <input type="button" value="搜索" onclick="search('type','show','keyword')"/> 22 </p> 23 </body> 24 </html> 25 <script type="text/javascript"> 26 // 標注點數組 27 var BASEDATA = [ 28 {title:"奧亞酒店",content:"北苑路169號",point:"116.422792|40.009471",isOpen:1,icon:{w:21,h:21,l:115,t:46,x:1,lb:10}}, 29 {title:"珀麗酒店",content:"將台西路8號",point:"116.484289|39.97936",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 30 {title:"北京銀行",content:"北京市海淀區白石橋路39號",point:"116.329593|39.952398",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 31 {title:"海淀銀行",content:"丹棱街16西門",point:"116.315551|39.984388",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}, 32 ] 33 34 //創建和初始化地圖函數： 35 function initMap(){ 36 window.map = new BMap.Map("container"); 37 map.centerAndZoom(new BMap.Point(116.412318,39.887037),12); 38 map.enableScrollWheelZoom(); 39 map.addControl(new BMap.NavigationControl()); 40 window.searchClass = new SearchClass(); 41 searchClass.setData(BASEDATA) 42 var dd = searchClass.search({k:"title",d:"銀行",t:"more",s:""});//t:{single|more},s{all|!all} 43 addMarker(dd);//向地圖中添加marker 44 } 45 window.search = function(name_t,name_s,id_d){ 46 var t_o = document.getElementsByName(name_t); 47 var s_o = document.getElementsByName(name_s); 48 var s_v,t_v,d_v = document.getElementById(id_d).value; 49 for(var i = 0; i < t_o.length; i++){ 50 if(t_o[i].checked){ 51 t_v = t_o[i].value; 52 } 53 } 54 for(var i = 0; i < s_o.length; i++){ 55 if(s_o[i].checked){ 56 s_v = s_o[i].value; 57 } 58 } 59 searchClass.trim(t_v) == "" && (t_v = "single"); 60 var dd = searchClass.search({k:"title",d:d_v,t:t_v,s:s_v}); 61 addMarker(dd);//向地圖中添加marker 62 } 63 64 //創建marker 65 window.addMarker = function (data){ 66 map.clearOverlays(); 67 for(var i=0;i<data.length;i++){ 68 var json = data[i]; 69 var p0 = json.point.split("|")[0]; 70 var p1 = json.point.split("|")[1]; 71 var point = new BMap.Point(p0,p1); 72 var iconImg = createIcon(json.icon); 73 var marker = new BMap.Marker(point,{icon:iconImg}); 74 var iw = createInfoWindow(i); 75 var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)}); 76 marker.setLabel(label); 77 map.addOverlay(marker); 78 label.setStyle({ 79 borderColor:"#808080", 80 color:"#333", 81 cursor:"pointer" 82 }); 83 84 (function(){ 85 var _json = json; 86 var _iw = createInfoWindow(_json); 87 var _marker = marker; 88 _marker.addEventListener("click",function(){ 89 this.openInfoWindow(_iw); 90 }); 91 _iw.addEventListener("open",function(){ 92 _marker.getLabel().hide(); 93 }) 94 _iw.addEventListener("close",function(){ 95 _marker.getLabel().show(); 96 }) 97 label.addEventListener("click",function(){ 98 _marker.openInfoWindow(_iw); 99 }) 100 if(!!json.isOpen){ 101 label.hide(); 102 _marker.openInfoWindow(_iw); 103 } 104 })() 105 } 106 } 107 //創建InfoWindow 108 function createInfoWindow(json){ 109 var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); 110 return iw; 111 } 112 //創建一個Icon 113 function createIcon(json){ 114 var icon = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)}) 115 return icon; 116 } 117 118 function SearchClass(data){ 119 this.datas = data; 120 } 121 // rule = {k:"title",d:"酒店",s:"all",t:"single"}=>t{single:(key=?),more:(key like[%?%])}//t:{single|more},s{all|!all} 122 SearchClass.prototype.search = function(rule){ 123 if(this.datas == null){alert("數據不存在!");return false;} 124 if(this.trim(rule) == "" || this.trim(rule.d) == "" || this.trim(rule.k) == "" || this.trim(rule.t) == ""){alert("請指定要搜索內容!");returnfalse;} 125 var reval = []; 126 var datas = this.datas; 127 var len = datas.length; 128 var me = this; 129 var ruleReg = new RegExp(this.trim(rule.d)); 130 var hasOpen = false; 131 132 var addData = function(data,isOpen){ 133 // 第一條數據打開信息窗口 134 if(isOpen && !hasOpen){ 135 hasOpen = true; 136 data.isOpen = 1; 137 }else{ 138 data.isOpen = 0; 139 } 140 reval.push(data); 141 } 142 var getData = function(data,key){ 143 var ks = me.trim(key).split(/\./); 144 var i = null,s = "data"; 145 if(ks.length == 0){ 146 return data; 147 }else{ 148 for(var i = 0; i < ks.length; i++){ 149 s += '["' + ks[i] + '"]'; 150 } 151 return eval(s); 152 } 153 } 154 for(var cnt = 0; cnt < len; cnt++){ 155 var data = datas[cnt]; 156 var d = getData(data,rule.k); 157 if(rule.t == "single" && rule.d == d){ 158 addData(data,true); 159 }else if(rule.t != "single" && ruleReg.test(d)){ 160 addData(data,true); 161 }else if(rule.s == "all"){ 162 addData(data,false); 163 } 164 } 165 return reval; 166 } 167 SearchClass.prototype.setData = function(data){ 168 this.datas = data; 169 } 170 SearchClass.prototype.trim = function(str){ 171 if(str == null){str = "";}else{ str = str.toString();} 172 return str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, ""); 173 } 174 175 176 initMap();//創建和初始化地圖 177 </script>
最后依然感謝@酸奶小妹的博文。后續資料有空整理。