百度地图：实现地图找房
生活随笔
收集整理的這篇文章主要介紹了
百度地图：实现地图找房
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
baidu API 引入:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=***"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
html:
<div id="mapContainer"></div>
簡單實(shí)現(xiàn)邏輯：
(function (win, $) {
class SearchMap {
constructor(options, sourceData, listener) {
this.map = undefined; //地圖實(shí)例
this.point = undefined; //地圖中心點(diǎn)
this.polygon = undefined;
this.options = options || {}; //參數(shù)選項(xiàng)
this.sourceData = sourceData; //原始數(shù)據(jù)
this.listener = listener; //地圖縮放或平移的事件監(jiān)聽器
this.initMap();
}
initMap() {
let _this = this;
this.map = new BMap.Map('mapContainer', { minZoom: 9, maxZoom: 18 });
this.point = new BMap.Point(this.options.lng, this.options.lat);
this.map.centerAndZoom(this.point, 9);
this.map.enableScrollWheelZoom(true);
this.addMarks();
this.map.addEventListener("zoomend", function () {
var zoomLevel = _this.map.getZoom(); //獲取地圖縮放級別
if (zoomLevel <= 10) {
_this.addMarks();
} else {
_this.getAllLabel();
}
});
}
// 根據(jù)行政區(qū)劃繪制聚合點(diǎn)位
addMarks() {
// 添加marks時(shí)先清除之前的覆蓋物
let _this = this;
let _map = this.map;
let _polygon = this.polygon;
_map.clearOverlays();
// 模擬鄭州市聚點(diǎn)數(shù)據(jù)
let clusterList = [
{ "name": "鄭州市", "code": "410100000", "longitude": "113.451854", "latitude": "34.556306", "count": "445" },
{ "name": "開封市", "code": "410200000", "longitude": "114.356733", "latitude": "34.506238", "count": "377" },
{ "name": "洛陽市", "code": "410300000", "longitude": "112.134468", "latitude": "34.263041", "count": "370" },
{ "name": "平頂山市", "code": "410400000", "longitude": "112.992161", "latitude": "33.773999", "count": "300" },
{ "name": "安陽市", "code": "410500000", "longitude": "114.098163", "latitude": "36.106852", "count": "290" },
{ "name": "鶴壁市", "code": "410600000", "longitude": "114.208643", "latitude": "35.653125", "count": "245" },
{ "name": "新鄉(xiāng)市", "code": "410700000", "longitude": "113.933677", "latitude": "35.31059", "count": "236" },
{ "name": "焦作市", "code": "410800000", "longitude": "113.050848", "latitude": "35.124706", "count": "210" },
{ "name": "濮陽市", "code": "410900000", "longitude": "115.169299", "latitude": "35.769421", "count": "225" },
{ "name": "許昌市", "code": "411000000", "longitude": "113.956834", "latitude": "34.043383", "count": "155" }
];
//為了提高百度地圖性能，本篇例子點(diǎn)位全用label來加載點(diǎn)位
$.each(clusterList, function (index, data) {
// 添加經(jīng)緯的中心點(diǎn)
let point = new BMap.Point(data.longitude, data.latitude);
//自定義label樣式
let template = `
<div class="circle-bubble" data-longitude="${data.longitude}" data-latitude="${data.latitude}">
<p class="name">${data.name}</p>
<p class="count"><span>${data.count}</span>個(gè)樓盤</p>
</div>`;
let clusterLabel = new BMap.Label(template,
{
position: point, //label 在此處添加點(diǎn)位位置信息
offset: new BMap.Size(-46, -46)
});
clusterLabel.setStyle({
"92px", //寬
height: "92px", //高度
border: "0", //邊
background: "rgba(17,164,60,.9)", //背景顏色
borderRadius: "50%",
cursor: "pointer"
});
clusterLabel.setTitle(data.name);
_map.addOverlay(clusterLabel);//添加點(diǎn)位
// 當(dāng)鼠標(biāo)懸停在label上時(shí)顯示行政區(qū)劃邊界
clusterLabel.addEventListener("mouseover", function () {
clusterLabel.setStyle({ background: "rgba(255,102,0,.9)" }); //修改覆蓋物背景顏色
var regionName = clusterLabel.getTitle();
_this.getBoundary(regionName);
});
// 當(dāng)鼠標(biāo)離開時(shí)在刪除邊界折線數(shù)據(jù)
clusterLabel.addEventListener("mouseout", function () {
clusterLabel.setStyle({ background: "rgba(17,164,60,.9)" }); //修改覆蓋物背景顏色
if (win.polygon) {
var polyPathArray = new Array();
win.polygon.setPath(polyPathArray);
_map.removeOverlay(polygon);//清除折線數(shù)據(jù)
}
});
clusterLabel.addEventListener("click", function () {
_map.zoomIn();
_this.getAllLabel();//獲取所有點(diǎn)位數(shù)據(jù)
});
})
}
// 根據(jù)行政區(qū)劃繪制邊界
getBoundary(regionName) {
let _map = this.map;
let boundary = new BMap.Boundary();
boundary.get(regionName, function (rs) {
//行政區(qū)域的點(diǎn)有多少個(gè)
if (rs.boundaries.length === 0) {
alert('未能獲取當(dāng)前輸入行政區(qū)域');
return;
}
for (const itemBoundary of rs.boundaries) {
if (!win.polygon) {
win.polygon = new BMap.Polygon(itemBoundary, {
strokeWeight: 2,
strokeColor: "rgb(17,164,60)",
fillColor: "rgba(17,164,60, .1)"
}); //建立多邊形覆蓋物
_map.addOverlay(polygon); //添加覆蓋物
} else {
win.polygon.setPath(itemBoundary);
_map.addOverlay(polygon); //添加覆蓋物
}
polygon.enableMassClear();
}
});
}
//繪制詳細(xì)樓盤點(diǎn)位信息
getAllLabel() {
let _map = this.map;
_map.clearOverlays();
//模擬點(diǎn)位數(shù)據(jù)
var labelList = [
{ "name": "樓盤一", "code": "01", "longitude": "113.515919", "latitude": "34.799769", "price": "10000" },
{ "name": "樓盤二", "code": "02", "longitude": "113.509444", "latitude": "34.4475", "price": "999" },
{ "name": "樓盤三", "code": "03", "longitude": "113.68175", "latitude": "34.737633", "price": "888" },
{ "name": "樓盤四", "code": "04", "longitude": "113.280769", "latitude": "34.814961", "price": "777" }
];
$.each(labelList, function (index, data) {
let point = new BMap.Point(data.longitude, data.latitude);
let houseTemplate = `
<div class="house-bubble" data-longitude="${data.longitude}" data-latitude="${data.latitude}">
<p>
<span class="price">${data.price}</span>
<span class="unit">元/㎡</span>
<em>|</em>
<span class="name">${data.name}</span>
</p>
<div class="triangle-down"></div>
</div>`;
let houseLabel = new BMap.Label(houseTemplate,
{
position: point, //label 在此處添加點(diǎn)位位置信息
offset: new BMap.Size(-12, -15)
});
houseLabel.setStyle({
height: "30px", //高度
border: "0", //邊
backgroundColor: "rgba(17,164,60,.9)",
borderRadius: "4px",
cursor: "pointer"
});
houseLabel.setTitle(data.name);
labelList.push(houseLabel);
_map.addOverlay(houseLabel);
let lastHouseLabel = null;
//鼠標(biāo)點(diǎn)擊時(shí)打開新標(biāo)簽并關(guān)閉上一個(gè)標(biāo)簽內(nèi)容
houseLabel.addEventListener("mouseover", function () {
houseLabel.setStyle({ background: "rgba(255,102,0,.9)" });
});
houseLabel.addEventListener("mouseout", function () {
houseLabel.setStyle({ background: "rgba(17,164,60,.9)" }); //修改覆蓋物背景顏色
});
//鼠標(biāo)點(diǎn)擊時(shí)標(biāo)簽一直存在
// houseLabel.addEventListener("click", function () {
// houseLabel.setStyle({ background: "rgba(255,102,0,.9)" });
// });
});
//addViewLabel(labelData);//加載可視范圍點(diǎn)
}
}
win.SearchMap = SearchMap;
})(window, jQuery)
信息彈出層：
//信息窗口模板
var tpl="<div class='infoBox' data-longitude='"+data.longitude+"' data-latitude='"+data.latitude+"' data-id='"+data.code+"'>" +
"<div class='infoArea'><p class='name'>"+data.name+"</p><p class='num'>均價(jià)<span class='red'> "+data.num+" </span>萬元/m3</p></div>" +
"<i class='arrow'><i class='arrow-i'></i></i></div>";
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
"160px",
minHeight: "50px",
marginBottom: "30px",
backgroundColor: "white"
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "img/icon-close.png",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
//鼠標(biāo)點(diǎn)擊時(shí)打開新標(biāo)簽并關(guān)閉上一個(gè)標(biāo)簽內(nèi)容
myLabel.addEventListener("mouseover", function () {
if (window.lastInfoBox) {
//判斷上一個(gè)窗體是否存在，若存在則執(zhí)行close
window.lastInfoBox.close();
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
//鼠標(biāo)點(diǎn)擊時(shí)標(biāo)簽一直存在
myLabel.addEventListener("click", function () {
window.lastInfoBox=null;
infoBox.open(point);
});
//根據(jù)地圖視野動(dòng)態(tài)加載數(shù)據(jù)，當(dāng)數(shù)據(jù)多時(shí)此方法用來提高地圖加載性能 //由于此篇模擬點(diǎn)位數(shù)據(jù)較少，視野加載不明顯，當(dāng)數(shù)據(jù)多時(shí)可直觀感覺
function addViewLabel(labels) {
map.clearOverlays();
for(var i = 0; i < labels.length; i ++){
var result = BMapLib.GeoUtils.isPointInRect(labels[i].point, map.getBounds());
if(result == true) {
map.addOverlay(labels[i])
} else{
map.removeOverlay(labels[i]);
}
}
}
總結(jié)
以上是生活随笔為你收集整理的百度地图：实现地图找房的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win10资源管理器导航窗格显示/隐藏项
- 下一篇： 什么是惯性释放