在我們平常寫房地產相關項目的時候經常會用到百度地圖，因為這一塊客戶會考慮到房源周圍的配套或者地鐵線路所以在這類項目中就不可以避免的會用到百度地圖，當然這只是其中一種,其他地圖工具也可以，因為我這個項目恰好要求用百度地圖，所以就好好學習了一波百度地圖，大概看了官方文檔，發現沒有想象中那么難,要相信自己可以做出來!
先上效果圖:
如圖:首先在地圖上方有一個篩選條件，總體難度還好吧，雖然有點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了，，不懂的歡迎留言共同探討！文字功底弱，只好多上圖了，見諒！