當(dāng)我們制作一個房產(chǎn)網(wǎng)站的時候，都需要實現(xiàn)一個地圖找房的重要功能，如下圖所示。



地圖找房有幾個特點(diǎn)：一是選擇參數(shù)，如區(qū)域、面積、價格等得到符合條件的辦公室，然后顯示在地圖中，二是通過鼠標(biāo)滑動或者通過百度地圖自帶的縮放按鈕來放大或縮小地圖，根據(jù)地圖的當(dāng)前層級，顯示所在層級對應(yīng)的內(nèi)容。例如以深圳市的地圖來舉例子，默認(rèn)情況下是顯示深圳市的所有區(qū)名，當(dāng)把鼠標(biāo)滑動地圖放大，或者點(diǎn)擊一個區(qū)時，會出現(xiàn)該區(qū)的所有街道名稱，當(dāng)點(diǎn)擊街道名稱或鼠標(biāo)滑動放大地圖，就會出現(xiàn)該街道對應(yīng)的大廈。
 
根據(jù)我個人的一段時間的嘗試，找到一個相對合理的方法來實現(xiàn)地圖找房的功能，下面只介紹一些主要的功能及函數(shù)，具體例子可參考源代碼。
var mp = new BMap.Map("allmap",{enableMapClick: false,minZoom:11,maxZoom:19});//先實例化地圖的類
你完成這個網(wǎng)站上的地圖找房功能，需要使用百度地圖API里以下功能：
“覆蓋物示例”中的“添加自定義覆蓋物”功能，如
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(114.063237,22.529555), "某大廈","￥100m²起");//"某大廈"是覆蓋物的名稱，”￥100m²起”是鼠標(biāo)移到覆蓋物名稱時，替換覆蓋物名稱
mp.addOverlay(myCompOverlay);
可以自定義一個函數(shù)如function get_cengji_map(num){}//根據(jù)不同的層級添加不同的自定義覆蓋物(即地圖出現(xiàn)的點(diǎn))
還有點(diǎn)擊大廈出現(xiàn)一些推薦的辦公室列表，需要使用“信息窗口示例”的“獲取信息窗口的內(nèi)容”的功能
 var infoWindow = new BMap.InfoWindow(obj.content,{ 
                    title: obj.title, //標(biāo)題                                       
                    enableAutoPan : true, //自動平移 
                    width: 300, //寬度   
                    height: 460, //高度
                    enableMessage:false});  // 創(chuàng)建信息窗口對象 
mp.openInfoWindow(infoWindow,new BMap.Point(that._point.lng+0.0002,that._point.lat+0.0001)); //這里的0.0002,0.0001數(shù)字是為了不讓信息窗口的箭頭擋住覆蓋物的名稱。
 
如果要開啟鼠標(biāo)的放大縮小功能，可以執(zhí)行函數(shù)：mp.enableScrollWheelZoom();
如果要獲得當(dāng)前地圖的層級，可使用mp.getZoom()函數(shù)。
mp.addEventListener("zoomstart", function () {
  //當(dāng)鼠標(biāo)點(diǎn)擊放大或縮小按鈕，或者滑動鼠標(biāo)放大或縮小之前，會執(zhí)行該函數(shù),可以獲得地圖縮小或放大前的地圖層級(當(dāng)前的地圖層級)
});
mp.addEventListener("zoomend", function () {
  //當(dāng)鼠標(biāo)點(diǎn)擊放大或縮小按鈕，或者滑動鼠標(biāo)放大或縮小之后，會執(zhí)行該函數(shù),可以獲得地圖縮小或放大后的地圖層級
});
 
上面就是百度API地圖找房主要功能的一些介紹，如需要源代碼可訪問方維官方網(wǎng)站的案例頁面，或者搜索“快租街”可以找到源代碼。

作者：方維網(wǎng)絡(luò)陳應(yīng)信