當(dāng)我們制作一個(gè)房產(chǎn)網(wǎng)站的時(shí)候,都需要實(shí)現(xiàn)一個(gè)地圖找房的重要功能,如下圖所示。
地圖找房有幾個(gè)特點(diǎn):一是選擇參數(shù),如區(qū)域、面積、價(jià)格等得到符合條件的辦公室,然后顯示在地圖中,二是通過鼠標(biāo)滑動(dòng)或者通過百度地圖自帶的縮放按鈕來放大或縮小地圖,根據(jù)地圖的當(dāng)前層級(jí),顯示所在層級(jí)對(duì)應(yīng)的內(nèi)容。例如以成都市的地圖來舉例子,默認(rèn)情況下是顯示成都市的所有區(qū)名,當(dāng)把鼠標(biāo)滑動(dòng)地圖放大,或者點(diǎn)擊一個(gè)區(qū)時(shí),會(huì)出現(xiàn)該區(qū)的所有街道名稱,當(dāng)點(diǎn)擊街道名稱或鼠標(biāo)滑動(dòng)放大地圖,就會(huì)出現(xiàn)該街道對(duì)應(yīng)的大廈。
根據(jù)我個(gè)人的一段時(shí)間的嘗試,找到一個(gè)相對(duì)合理的方法來實(shí)現(xiàn)地圖找房的功能,下面只介紹一些主要的功能及函數(shù),具體例子可參考源代碼。
var mp = new BMap.Map("allmap",{enableMapClick: false,minZoom:11,maxZoom:19});//先實(shí)例化地圖的類
你完成這個(gè)網(wǎng)站上的地圖找房功能,需要使用百度地圖API里以下功能:
“覆蓋物示例”中的“添加自定義覆蓋物”功能,如
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(114.063237,22.529555), "某大廈","¥100m²起");//"某大廈"是覆蓋物的名稱,”¥100m²起”是鼠標(biāo)移到覆蓋物名稱時(shí),替換覆蓋物名稱
mp.addOverlay(myCompOverlay);
可以自定義一個(gè)函數(shù)如function get_cengji_map(num){}//根據(jù)不同的層級(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, //自動(dòng)平移
width: 300, //寬度
height: 460, //高度
enableMessage:false}); // 創(chuàng)建信息窗口對(duì)象
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)前地圖的層級(jí),可使用mp.getZoom()函數(shù)。
mp.addEventListener("zoomstart", function () {
//當(dāng)鼠標(biāo)點(diǎn)擊放大或縮小按鈕,或者滑動(dòng)鼠標(biāo)放大或縮小之前,會(huì)執(zhí)行該函數(shù),可以獲得地圖縮小或放大前的地圖層級(jí)(當(dāng)前的地圖層級(jí))
});
mp.addEventListener("zoomend", function () {
//當(dāng)鼠標(biāo)點(diǎn)擊放大或縮小按鈕,或者滑動(dòng)鼠標(biāo)放大或縮小之后,會(huì)執(zhí)行該函數(shù),可以獲得地圖縮小或放大后的地圖層級(jí)
});
上面就是百度API地圖找房主要功能的一些介紹,如需要源代碼可訪問創(chuàng)新互聯(lián)官方網(wǎng)站的案例頁面,或者搜索“快租街”可以找到源代碼。
當(dāng)前名稱:百度地圖API實(shí)現(xiàn)地圖找房的主要功能介紹
網(wǎng)頁路徑:http://jinyejixie.com/news/236248.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、ChatGPT、搜索引擎優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、軟件開發(fā)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)