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

當前名稱：百度地圖API實現地圖找房的主要功能介紹
網頁路徑：http://www.js-pz168.com/news/236248.html

成都網站建設公司_創新互聯，為您提供網站改版、ChatGPT、搜索引擎優化、移動網站建設、品牌網站設計、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯