百度聚合点

达到这样的效果
例子1:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
*{
padding: 0;
margin: 0;
}
body,div{
position: absolute;
width: 100%;
height: 100%;
}
/*隐藏地图控件*/
.anchorBL, .BMap_cpyCtrl {
display: none;
}
/*地图聚合样式*/
.bubble p {
text-align: center;
color: #fff;
}
.bubble .name {
margin-top: 25px;
font-size: 14px;
}
/*信息窗口样式*/
.infoArea{
font-size: 12px;
padding: 4px 0;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 10px 8px 0 rgba(0,0,0,.1);
}
.infoArea p{
padding: 2px 10px;
}
.infoArea .name {
height: 20px;
line-height: 20px;
font-weight: 800;
}
.red{
color: red;
}
.infoBox .arrow {
position: absolute;
left: 10px;
bottom: -8px;
display: block;
border: 8px solid transparent;
border-left-color: #fff;
width: 0;
height: 0;
margin: 0 auto;
z-index: 1;
}
.infoBox .arrow .arrow-i {
display: none;
border: 6px solid transparent;
border-top-color: #fff;
width: 0;
height: 0;
position: absolute;
top: -7px;
left: -6px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=U6Ib7ApN6aSCcBlUgLp57URdUBDooDBB"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
<script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script src="https://www.w3school.com.cn/jquery/jquery.js"></script>
<title>添加行政区划</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
/*  实现地图搜房功能主要是几个步骤:
1、添加聚合点marker(利用接口返回数据用marker来显示相应的数量来模拟聚合效果);
2、根据鼠标悬停事件来显示隐藏行政区划边界线(百度地图Polygon方法);
3、点击marker或鼠标滚轮事件来扩大地图级别显示所有的点(addEventListener(event: String, handler: Function));
4、通过拖拽地图根据视野来加载对应的点,提高加载点位性能(百度地图GeoUtils);
5、给具体的点位添加信息窗体事件。
*/
window.map = initMap();//初始化地图对象
window.lastInfoBox = null; //定义最近打开的地图信息窗体
window.pointArray = [];//行政区划点位集合
window.labelData=[];//存数点位数据
addMarker();//添加聚合点
function initMap() {
var map = new BMap.Map("allmap", {enableMapClick: false, minZoom: 9, maxZoom: 18});
// var map = new BMap.Map("allMap");
var point = new BMap.Point(113.658221, 34.780377);//郑州市中心点
map.centerAndZoom(point, 9);
map.enableScrollWheelZoom(true);
//监听地图级别缩放事件,当级别为9时默认加载集合点,扩大级别时显示详细点位数据
map.addEventListener("zoomend", function () {
var zoomLevel=map.getZoom(); //获取地图缩放级别
if(zoomLevel==9){
addMarker();
}else{
//当存储的数据有数时直接加载视野数据,否则请求接口数据
if(labelData.length>0){
addViewLabel(labelData);
}else{
getAllLabel();
}
}
});
return map;
}
//根据行政区划绘制聚合点位
function addMarker() {
map.clearOverlays();
//模拟数据
var clustereData=[
{"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.892161","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":"新乡市","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.856834","latitude":"34.043383","count":"155"}
];
//为了提高百度地图性能,本篇例子点位全用label来加载点位
$.each(clustereData,function (index,data) {
var point = new BMap.Point(data.longitude, data.latitude);
//自定义label样式
var tpl = '<div class="bubble bubble-1" data-longitude="' + data.longitude + '"' +
' data-latitude="' + data.latitude + '" data-id="' + data.code + '">' +
'<p class="name" title="' + data.name + '">' + data.name + '</p>' +
'<p><span class="count">' + data.count + '</span>个楼盘</p>' +
'</div>';
var myLabel = new BMap.Label(tpl,
{
position: point, //label 在此处添加点位位置信息
offset: new BMap.Size(-46, -46)
});
myLabel.setStyle({
width: "92px",  //宽
height: "92px", //高度
border: "0",  //边
background: "rgba(84,144,244,.9)",    //背景颜色
borderRadius:"50%",
cursor: "pointer"
});
myLabel.setTitle(data.name);
map.addOverlay(myLabel);//添加点位
// 当鼠标悬停在label上时显示行政区划边界
myLabel.addEventListener("mouseover", function () {
myLabel.setStyle({background:"rgba(241,80,68,.9)"}); //修改覆盖物背景颜色
var regionName = myLabel.getTitle();
getBoundary(regionName);
});
// 当鼠标离开时在删除边界折线数据
myLabel.addEventListener("mouseout", function () {
myLabel.setStyle({background:"rgba(84,144,244,.9)"}); //修改覆盖物背景颜色
if (window.ply) {
var polyPathArray = new Array();
window.ply.setPath(polyPathArray);
map.removeOverlay(ply);//清除折线数据
}
});
myLabel.addEventListener("click", function () {
map.zoomIn();
getAllLabel();//获取所有点位数据
});
})
}
//根据行政区划绘制边界
function getBoundary(regionName) {
var bdary = new BMap.Boundary();
bdary.get(regionName, function (rs) {
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return;
}
for (var i = 0; i < count; i++) {
if (!window.ply) {
window.ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 2,
strokeColor: "rgb(66, 133, 244)",
fillColor: "rgba(53, 126, 244,0.1)"
}); //建立多边形覆盖物
map.addOverlay(ply);  //添加覆盖物
} else {
window.ply.setPath(rs.boundaries[i]);
map.addOverlay(ply);  //添加覆盖物
}
ply.enableMassClear();
pointArray = pointArray.concat(ply.getPath());
}
});
}
//绘制详细楼盘点位信息
function getAllLabel() {
map.clearOverlays();
//模拟点位数据
var labelListData=[
{"name":"楼盘一","code":"01","longitude":"113.515919","latitude":"34.799769","num":"10000"},
{"name":"楼盘二","code":"02","longitude":"113.509444","latitude":"34.4475","num":"999"},
{"name":"楼盘三","code":"03","longitude":"113.68175","latitude":"34.737633","num":"888"},
{"name":"楼盘四","code":"04","longitude":"113.280769","latitude":"34.814961","num":"777"},
{"name":"楼盘五","code":"05","longitude":"113.611175","latitude":"34.784972","num":"666"},
{"name":"楼盘六","code":"06","longitude":"113.609436","latitude":"34.770558","num":"555"},
{"name":"楼盘七","code":"07","longitude":"113.687778","latitude":"34.861111","num":"444"},
{"name":"楼盘八","code":"08","longitude":"113.333333","latitude":"34.833333","num":"333"},
{"name":"楼盘九","code":"09","longitude":"114.0537","latitude":"34.7273","num":"222"},
{"name":"楼盘十","code":"10","longitude":"113.419642","latitude":"34.809192","num":"111"},
{"name":"楼盘十一","code":"11","longitude":"113.068653","latitude":"34.382344","num":"1111"},
{"name":"楼盘十二","code":"12","longitude":"113.1491","latitude":"34.389","num":"2222"}
];
$.each(labelListData,function (index,data) {
var point = new BMap.Point(data.longitude, data.latitude);
var myLabel = new BMap.Label("",
{
position: point, //label 在此处添加点位位置信息
offset: new BMap.Size(-12, -15)
});
myLabel.setStyle({
width: "12px",  //宽
height: "12px", //高度
border: "0",  //边
backgroundColor: "rgb(66, 133, 244)",
borderRadius: "50%",
cursor: "pointer"
});
myLabel.setTitle(data.name);
labelData.push(myLabel);
//            map.addOverlay(myLabel);
//信息窗口模板
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'>均价<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: {
width: "160px",
minHeight: "50px",
marginBottom: "30px",
backgroundColor: "white"
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "img/icon-close.png",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
//鼠标点击时打开新标签并关闭上一个标签内容
myLabel.addEventListener("mouseover", function () {
if (window.lastInfoBox) {
//判断上一个窗体是否存在,若存在则执行close
window.lastInfoBox.close();
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
//鼠标点击时标签一直存在
myLabel.addEventListener("click", function () {
window.lastInfoBox=null;
infoBox.open(point);
});
});
addViewLabel(labelData);//加载可视范围点
}
//根据地图视野动态加载数据,当数据多时此方法用来提高地图加载性能
//由于此篇模拟点位数据较少,视野加载不明显,当数据多时可直观感觉
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]);
}
}
}
</script>

按照上面代码修改了一下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
/*隐藏地图控件*/
.anchorBL, .BMap_cpyCtrl {
display: none;
}
/*地图聚合样式*/
.bubble p {
text-align: center;
color: #000;
}
.bubble .name {
margin-top: 25px;
font-size: 14px;
}
/*信息窗口样式*/
.infoArea{
font-size: 12px;
padding: 4px 0;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 10px 8px 0 rgba(0,0,0,.1);
}
.infoArea p{
padding: 2px 10px;
}
.infoArea .name {
height: 20px;
line-height: 20px;
font-weight: 800;
}
.red{
color: red;
}
.infoBox .arrow {
position: absolute;
left: 10px;
bottom: -8px;
display: block;
border: 8px solid transparent;
border-left-color: #fff;
width: 0;
height: 0;
margin: 0 auto;
z-index: 1;
}
.infoBox .arrow .arrow-i {
display: none;
border: 6px solid transparent;
border-top-color: #fff;
width: 0;
height: 0;
position: absolute;
top: -7px;
left: -6px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=U6Ib7ApN6aSCcBlUgLp57URdUBDooDBB"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
<script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script src="https://www.w3school.com.cn/jquery/jquery.js"></script>
<title>添加行政区划</title>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript" src="__HOME__statics/js/textIconOverlay1.js"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
<script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script type="text/javascript">
window.map = initMap();
window.lastInfoBox = null;
window.pointArray = [];
window.labelData=[];
addMarker();
function initMap() {
var map = new BMap.Map("allmap", {enableMapClick: false, minZoom: 11, maxZoom: 18});
var point = new BMap.Point(114.065702,22.548723);//
map.centerAndZoom(point, 11);
map.enableScrollWheelZoom(true);
map.addEventListener("zoomend", function () {
var zoomLevel=map.getZoom();
if(zoomLevel < 14){
addMarker();
}else{
if(zoomLevel > 14){
if(labelData.length>0){
addViewLabel(labelData);
}else{
getAllLabel();
}
}
}
});
map.addEventListener("dragend", function () {
map.clearOverlays();
var zoomLevel=map.getZoom();
if(zoomLevel<=14){
addMarker();
}else{
addViewLabel(labelData);
}
});
return map;
}
function addMarker() {
map.clearOverlays();
var clustereData = {$district_list_t};
$.each(clustereData,function (index,data) {
var point = new BMap.Point(data.longitude, data.latitude);
var tpl = '<div class="bubble bubble-1"  data-longitude="' + data.longitude + '"' +
' data-latitude="' + data.latitude + '" data-id="' + data.code + '">' +
'<p class="name" style="color:#FFF" title="' + data.name + '">' + data.name + '</p>' +
'<p><span style="color:#FFF" class="count">' + data.count + '套</span></p>' +
'</div>';
var myLabel = new BMap.Label(tpl,
{
position: point,
offset: new BMap.Size(-46, -46)
});
myLabel.setStyle({
width: "100px",
height: "100px",
border: "0",
background: "rgba(64, 169, 255, 0.85)",
borderRadius:"50%",
cursor: "pointer",
maxWidth:"100px",
color:"#FFF"
});
myLabel.setTitle(data.name);
map.addOverlay(myLabel);
myLabel.addEventListener("mouseover", function () {
myLabel.setStyle({background:"rgba(241,80,68,.9)"}); //修改覆盖物背景颜色
});
myLabel.addEventListener("mouseout", function () {
myLabel.setStyle({background:"rgba(84,144,244,.9)"}); //修改覆盖物背景颜色
});
myLabel.addEventListener("click", function () {
map.zoomIn();
var zoomLevel=map.getZoom();
if(zoomLevel<=14){
addMarker();
}else{
addViewLabel(labelData);
}
});
})
}
function getAllLabel() {
map.clearOverlays();
var labelListData ={$data_json};
$.each(labelListData,function (index,data) {
var point = new BMap.Point(data.lng, data.lat);
var myLabel = new BMap.Label("",{position: point,offset: new BMap.Size(-12, -15)});
myLabel.setStyle({width: "12px", height: "12px", border: "0", backgroundColor: "rgb(66, 133, 244)", borderRadius: "50%", cursor: "pointer", background:"url(image/showbox.png) no-repeat"
});
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="padding: 6px 0px;text-align: center;margin-top: 5px;cursor: pointer;position: relative;color: #FFF;background-color: #40A9FF;top: -31px;left: -60px;font-size: 15px;width: 125px;height: 34px;display: block;border-radius: 4px;">'
+'¥'+data.price_min+'/m²/月起'+
'</sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
labelData.push(myLabel);
var tpl="<div class='map_info'  data-id='"+data.id+"'>" +
"<div class='map_info_img'><img src='"+data.img+"' " +
'" onerror="this.src=\'/public/static/index/statics/img/about.png\'" alt="">' +
"</div>"+
"<div class='map_info_msg'><h3 class='name'>"+data.name+"</h3><span> ¥"+floatval(data.price_min)+data.unit_price+
" </span><p>在租面积:"+data.area_min+'-'+data.area_max+"</p><div class='map_info_btn'>" +
"<a class='btn_left' href='"+data.url+"' target='_blank'>大厦详情</a>" +
"<a class='btn_right' href='javascript:;' onclick='llyy("+data.id+")'>立即预约</a></div></div>" +
"<div class='map_sc'>" ;
if(data.sc == 1){
tpl +=    "<a id='map_gz' class='act' href='javascript:;' onclick='guanzhu("+data.id+","+data.sc+")' ><img src='/public/static/index/statics/img/sc_heart.png' alt=''></a>" ;
}else{
tpl +=    "<a id='map_qg' class='act' href='javascript:;' onclick='guanzhu("+data.id+","+data.sc+")' ><img src='/public/static/index/statics/img/addSc.png' alt=''></a>" ;
}
tpl +=	"</div></div>";
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
width: "180px",
marginBottom: "50px",
backgroundColor: "white",
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
var ci = 1;
myLabel.addEventListener("mouseover", function () {
map.removeOverlay(point);
if (window.lastInfoBox) {
window.lastInfoBox.close();
if(ci === 1 ){
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="padding: 6px 0px;text-align: center;margin-top: 5px;cursor: pointer;position: relative;color: #FFF;background-color:rgba(250, 84, 28, 1);top: -31px;left: -60px;font-size: 15px;width: 125px;height: 34px;display: block;border-radius: 4px;">'
+'¥'+data.price_min+'/m²/月起'+
'</sapn>';
myLabel.setContent(content)
ci++;
}
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
myLabel.addEventListener("mouseout", function () {
map.removeOverlay(point);
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="padding: 6px 0px;text-align: center;margin-top: 5px;cursor: pointer;position: relative;color: #FFF;background-color: #40A9FF;top: -31px;left: -60px;font-size: 15px;width: 125px;height: 34px;display: block;border-radius: 4px;">'
+'¥'+data.price_min+'/m²/月起'+
'</sapn>';
myLabel.setContent(content)
ci=1;
});
});
addViewLabel(labelData);
}
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]);
}
}
}
//立即预约
function llyy(id){
alert('预约成功')
}
//收藏
function guanzhu(id,sc){
alert('收藏成功')
}
</script>
再次处理了一下
<script type="text/javascript" src="__HOME__statics/js/textIconOverlay1.js"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
<script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script type="text/javascript">
window.map = initMap();
window.lastInfoBox = null;
window.pointArray = [];
window.labelData=[];
addMarker()
var add_mk = 15;
var add_mko = 16;
function initMap() {
var map = new BMap.Map("allmap", {enableMapClick: false, minZoom: 11, maxZoom: 18});
var point = new BMap.Point({$cspoint});//
map.centerAndZoom(point, {$cszoom});
map.enableScrollWheelZoom(true);
map.addEventListener("zoomend", function () {
var zoomLevel=map.getZoom();
if(zoomLevel < add_mk){ addMarker(); }
if(zoomLevel == add_mk ){ addMarker2() }
if(zoomLevel == add_mko || zoomLevel > add_mko ){
if(labelData.length>0){
addViewLabel(labelData);
}else{
getAllLabel();
}
}
});
map.addEventListener("dragend", function () {
map.clearOverlays();
var zoomLevel=map.getZoom();
if(zoomLevel >= 13 ){
//触发ajax
// sendAjax()
}
if(zoomLevel < add_mk){
addMarker()
}
if(zoomLevel == add_mk ){
addMarker2()
}
if(zoomLevel == add_mko || zoomLevel > add_mko ){
if(labelData.length>0){
addViewLabel(labelData);
}else{
getAllLabel();
}
}
});
return map;
}
function addMarker2() {
map.clearOverlays();
var clustereData = {$area_list_api};
$.each(clustereData,function (index,data) {
var point = new BMap.Point(data.longitude, data.latitude);
var tpl = '<div class="bubble bubble-1"  data-longitude="' + data.longitude + '"' +
' data-latitude="' + data.latitude + '" data-id="' + data.code + '">' +
'<p class="name" style="color:#FFF" title="' + data.name + '">' + data.name + '</p>' +
'<p><span style="color:#FFF" class="count">' + data.count + '套</span></p>' +
'</div>';
var myLabel = new BMap.Label(tpl,
{
position: point,
offset: new BMap.Size(-46, -46)
});
myLabel.setStyle({
width: "100px",
height: "100px",
border: "0",
background: "rgba(64, 169, 255, 0.85)",
borderRadius:"50%",
cursor: "pointer",
maxWidth:"100px",
color:"#FFF"
});
myLabel.setTitle(data.name);
map.addOverlay(myLabel);
myLabel.addEventListener("mouseover", function () {
myLabel.setStyle({background:"rgba(241,80,68,.9)"}); //修改覆盖物背景颜色
});
myLabel.addEventListener("mouseout", function () {
myLabel.setStyle({background:"rgba(84,144,244,.9)"}); //修改覆盖物背景颜色
});
myLabel.addEventListener("click", function () {
var zoomLevel=map.getZoom();
map.setCenter(point);// 设置中心点
map.zoomIn();
// map.setZoom(zoomLevel - 1);// 设置缩放比例
if(zoomLevel < add_mk){
addMarker()
}
if(zoomLevel == add_mko || zoomLevel > add_mko ){
if(labelData.length>0){
addViewLabel(labelData);
}else{
getAllLabel();
}
}
});
})
}
function addMarker() {
map.clearOverlays();
var clustereData = {$district_list_t};
$.each(clustereData,function (index,data) {
var point = new BMap.Point(data.longitude, data.latitude);
var tpl = '<div class="bubble bubble-1"  data-longitude="' + data.longitude + '"' +
' data-latitude="' + data.latitude + '" data-id="' + data.code + '">' +
'<p class="name" style="color:#FFF" title="' + data.name + '">' + data.name + '</p>' +
'<p><span style="color:#FFF" class="count">' + data.count + '套</span></p>' +
'</div>';
var myLabel = new BMap.Label(tpl,
{
position: point,
offset: new BMap.Size(-46, -46)
});
myLabel.setStyle({
width: "100px",
height: "100px",
border: "0",
background: "rgba(64, 169, 255, 0.85)",
borderRadius:"50%",
cursor: "pointer",
maxWidth:"100px",
color:"#FFF"
});
myLabel.setTitle(data.name);
map.addOverlay(myLabel);
myLabel.addEventListener("mouseover", function () {
myLabel.setStyle({background:"rgba(241,80,68,.9)"}); //修改覆盖物背景颜色
var regionName = myLabel.getTitle();
getBoundary(regionName);
});
myLabel.addEventListener("mouseout", function () {
myLabel.setStyle({background:"rgba(84,144,244,.9)"}); //修改覆盖物背景颜色
if (window.ply) {
var polyPathArray = new Array();
window.ply.setPath(polyPathArray);
map.removeOverlay(ply);//清除折线数据
}
});
myLabel.addEventListener("click", function () {
var zoomLevel=map.getZoom();
map.centerAndZoom(point, add_mk)
if(zoomLevel == add_mk  ){
addMarker2()
}
if(zoomLevel == add_mko || zoomLevel > add_mko ){
if(labelData.length>0){
addViewLabel(labelData);
}else{
getAllLabel();
}
}
});
})
}
function getAllLabel() {
map.clearOverlays();
var labelListData ={$data_json};
$.each(labelListData,function (index,data) {
var point = new BMap.Point(data.lng, data.lat);
var myLabel = new BMap.Label("",{position: point,offset: new BMap.Size(-12, -15)});
myLabel.setStyle({width: "12px", height: "12px", border: "0", backgroundColor: "rgb(66, 133, 244)", borderRadius: "50%", cursor: "pointer", background:"url(image/showbox.png) no-repeat"
});
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="padding: 6px 0px;text-align: center;margin-top: 5px;cursor: pointer;position: relative;color: #FFF;background-color: #40A9FF;top: -31px;left: -60px;font-size: 15px;width: 125px;height: 34px;display: block;border-radius: 4px;">'
+'¥'+data.price_min+'/m²/月起'+
'</sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
labelData.push(myLabel);
var tpl="<div class='map_info'  data-id='"+data.id+"'>" +
"<div class='map_info_img'><img src='"+data.img+"' " +
'" onerror="this.src=\'/public/static/index/statics/img/about.png\'" alt="">' +
"</div>"+
"<div class='map_info_msg'><h3 class='name'>"+data.name+"</h3><span> ¥"+floatval(data.price_min)+data.unit_price+
" </span><p>在租面积:"+data.area_min+'-'+data.area_max+"</p><div class='map_info_btn'>" +
"<a class='btn_left' href='"+data.url+"' target='_blank'>大厦详情</a>" +
"<a class='btn_right' href='javascript:;' onclick='llyy("+data.id+")'>立即预约</a></div></div>" +
"<div class='map_sc'>" ;
if(data.sc == 1){
tpl +=    "<a id='map_gz' class='act' href='javascript:;' onclick='guanzhu("+data.id+","+data.sc+")' ><img src='/public/static/index/statics/img/sc_heart.png' alt=''></a>" ;
}else{
tpl +=    "<a id='map_qg' class='act' href='javascript:;' onclick='guanzhu("+data.id+","+data.sc+")' ><img src='/public/static/index/statics/img/addSc.png' alt=''></a>" ;
}
tpl +=	"</div></div>";
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
width: "180px",
marginBottom: "50px",
backgroundColor: "white",
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
var ci = 1;
myLabel.addEventListener("mouseover", function () {
map.removeOverlay(point);
if (window.lastInfoBox) {
window.lastInfoBox.close();
if(ci === 1 ){
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="padding: 6px 0px;text-align: center;margin-top: 5px;cursor: pointer;position: relative;color: #FFF;background-color:rgba(250, 84, 28, 1);top: -31px;left: -60px;font-size: 15px;width: 125px;height: 34px;display: block;border-radius: 4px;">'
+'¥'+data.price_min+'/m²/月起'+
'</sapn>';
myLabel.setContent(content)
ci++;
}
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
myLabel.addEventListener("mouseout", function () {
map.removeOverlay(point);
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="padding: 6px 0px;text-align: center;margin-top: 5px;cursor: pointer;position: relative;color: #FFF;background-color: #40A9FF;top: -31px;left: -60px;font-size: 15px;width: 125px;height: 34px;display: block;border-radius: 4px;">'
+'¥'+data.price_min+'/m²/月起'+
'</sapn>';
myLabel.setContent(content)
ci=1;
});
});
addViewLabel(labelData);
}
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]);
}
}
}
//立即预约
function llyy(id){
$('.map_mask').show();
$('#yytc').show();
$('#ljyuyue').attr('data-id',id)
}
//收藏
function guanzhu(id,sc){
if (sc) {
// 取消
$.post("{:url('index/user/collectiondel', ['city_ym' => $city_ym])}", {
building_id: id,
}, function (res) {
if (res.code == 1) {
layer.msg(res.msg);
$(that).removeClass("cancelBtn")
$(that).addClass("collecBtn")
$(that).html("立即收藏")
get_collection(0)
} else if (res.code == 2) {
$("#loginModal").modal();
} else {
layer.msg(res.msg);
}
}, 'json')
} else {
// 收藏
$.post("{:url('index/user/collectionadd', ['city_ym' => $city_ym])}", {
building_id: id,
}, function (res) {
if (res.code == 1) {
layer.msg(res.msg);
$(that).addClass("cancelBtn")
$(that).removeClass("collecBtn")
$(that).html("已收藏")
get_collection(0)
} else if (res.code == 2) {
$("#loginModal").modal();
} else {
layer.msg(res.msg);
}
}, 'json')
}
}
$(function(){
var send_time = 0;
var send_t;
$(function () {
$("#sendCode").click(function () {
var mobile = $("#mobile").val();
if (!mobile || mobile.length < 11) {
layer.msg('请输入手机号!');
return false;
}
if (send_time > 0) {
layer.msg('一分钟内只能发送一次验证码!');
return false;
}
$("#sendCode").text("发送中...");
$.post("{:url('index/login/send_verification_code', ['city_ym' => $city_ym])}", {
mobile: mobile
}, function (msg) {
if (msg.code == 1) {
layer.msg(msg.msg);
$("#sendCode").text("60s重新获取");
send_time = 60;
send_t = setInterval("daojishi_send()", 1000);
} else if (msg.code == 2) {
layer.msg(msg.msg);
$("#sendCode").text("60s重新获取");
send_time = 60;
send_t = setInterval("daojishi_send()", 1000);
} else {
layer.msg(msg.msg);
$("#sendCode").text("获取验证码");
return false;
}
}, 'json');
})
})
//倒计时
function daojishi_send() {
send_time--;
if (send_time <= 0) {
$("#sendCode").text("重发验证码");
clearInterval(send_t);
return true;
}
$("#sendCode").text("" + send_time + "s重新获取");
}
$('#ljyuyue').click(function(){
var building_id = $(this).attr('data-id');
var name = "{$userinfo.user_name}";
var mobile = $("#mobile").val();
var code = $("#code").val();
// 检验必填字段
var check = check_form_mobile("#mobile") + check_form_code("#code", "#mobile");
if (check != 2) {
return false;
}
$.post("{:url('index/building/zixun', ['city_ym' => $city_ym])}", {
building_id: building_id,
name: name,
mobile: mobile,
mobile_code: code,
}, function (res) {
if (res.code == 1) {
$('#yytc').hide();
$("#jstc").show();
} else {
layer.msg(res.msg)
}
}, 'json')
})
$('.map_mask').click(function(){
$('.map_mask').hide();
$('#yytc').hide();
$('#jstc').hide();
$('#ljyuyue').attr('data-id',0)
});
$('#yyok').click(function(){
$('#yytc').hide();
$('#jstc').hide();
$('.map_mask').hide();
$('#ljyuyue').attr('data-id',0)
});
})
</script>
点赞

发表评论