在我們平常寫房地產相關專案的時候經常會用到百度地圖，因為這一塊客戶會考慮到房源周圍的配套或者地鐵線路所以在這類專案中就不可以避免的會用到百度地圖，當然這只是其中一種,其他地圖工具也可以，因為我這個專案恰好要求用百度地圖，所以就好好學習了一波百度地圖，大概看了官方文件，發現沒有想象中那麼難,要相信自己可以做出來!

先上效果圖:

如圖:首先在地圖上方有一個篩選條件，總體難度還好吧，雖然有點bug(哈哈)，還是能用的！這個地方略過，主要看地圖,首先我們需要先申請一個 百度地圖ak，

這個相當於我們的開發憑證 :

申請完了之後我們需要引導到我們專案(vue-cli腳手架搭建專案)中的index.html中,如圖:

然後我們需要定義初始化地圖的方法，相關引數配置如下:

 

 

接著是周邊配置的部分,具體樣式還請自行編寫,先看效果吧:

我們現在return裡面定義一個數組指明我們需要查詢哪些東西:

 

然後是查詢周邊的相關配置,如下:

注意：如果資料是通過調後臺介面得到，假如沒有資料的話控制檯會報百度地圖初始化失敗(xxx.gc)，這個是正常情況.

然後放下程式碼：

1.只需要marker的地圖（請求的資料還請自行修改）

// 地圖 initBMap(){ // 百度API功能呼叫 var map = new BMap.Map("allmap"); var point = new BMap.Point(121.483163,31.217161); map.centerAndZoom(point,12); map.addControl(new BMap.NavigationControl()); // 新增平移縮放控制元件 map.addControl(new BMap.OverviewMapControl()); //新增縮略地圖控制元件 map.enableScrollWheelZoom(); for(var i=0;i<this.houselist.length;i++){ var marker = new BMap.Marker(new BMap.Point(this.houselist[i].lng,this.houselist[i].lat)); // 建立標註 var points = this.houselist[i].lng+","+this.houselist[i].lat;
var text = this.houselist[i].price;
var point = new BMap.Point(this.houselist[0].lng,this.houselist[0].lat); map.centerAndZoom(point,12);
var label = new BMap.Label(this.houselist[i].price,{ // 覆蓋文字資訊 offset: new BMap.Size(0, 0) });   var opts = { width : 250, // 資訊視窗寬度 height: 300, // 資訊視窗高度 // title : this.houselist[i].officename , // 資訊視窗標題 enableMessage:true,//設定允許資訊窗傳送短息 }
// 自定義資訊視窗 var content = `<div>`; content += `<img src=${this.houselist[i].logo} style="height:100px;width:100%;margin:0;margin-top:20px;padding:0;">`; content += `<div><span style="font-size:28px;font-weight:bold;color:#ED4242;">${this.houselist[i].price}</span></div>`; content += `<div style="height:100px;display:flex;justify-content:space-between;align-items:center;"><div><p style="height:10px;font-size:24px;color:#ff9900;"><span style="font-size:18px;color:#FFE300;">評分：</span>${this.houselist[i].score}<p><p style="height:10px;">${this.houselist[i].zh_name}</p></div>`; content += `<span style="width:50px;height:50px;line-height:50px;text-align:center;font-size:12px;border-radius:50%;cursor: pointer;background:#FFE300;" onclick="godetails(${this.houselist[i].id})">詳情</span>`; content += `</div>`; content += `</div>`; label.setStyle({ background: "#FFE300", textAlign:"center", fontSize:'18px', border:'none', padding:'7px', });     marker.setLabel(label); //把label設定到maker上 map.addOverlay(marker); // 將標註新增到地圖中
addClickHandler(content,marker); function addClickHandler(content,marker){ marker.addEventListener("mouseover",function(e){ openInfo(content,e)} ); };
function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 建立資訊視窗物件 map.openInfoWindow(infoWindow,point); //開啟資訊視窗 };
}; },      

2.查詢周邊配置的地圖程式碼：

initBMap() {
// 百度API功能呼叫 var map = new BMap.Map("allmap"); var point = new BMap.Point(this.houselists.lng, this.houselists.lat,); map.centerAndZoom(point, 12); // map.addControl(new BMap.NavigationControl()); // 新增平移縮放控制元件 // map.addControl(new BMap.OverviewMapControl()); //新增縮略地圖控制元件 map.enableScrollWheelZoom(); var address = this.ambitustext; var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}}); local.searchNearby(address, point, 1000); // address 為傳遞的搜尋文字   var label = new BMap.Label(this.houselists.zh_name , { offset: new BMap.Size(0, 0) }); label.setStyle({ background: "#FFE300", textAlign: "center", fontSize: "30px", border:'none', padding:'22px 23px', });
label.setZIndex({zIndex:300});
// var myIcon = new BMap.Icon(this.ambitusimg, new BMap.Size(23, 25), { // offset: new BMap.Size(10, 25) // }); var marker = new BMap.Marker(point); map.addOverlay(marker); marker.setLabel(label); //把label設定到maker上 },   ok了，，不懂的歡迎留言共同探討！文字功底弱，只好多上圖了，見諒！     &nbs