';
}
$('.y_mapcond_right').html("");
$('.y_mapcond_right').append(_htm); //插入前先进行清空再插入
})
// 显示筛选条件处的删除功能
var module = {city:"区域",price:"价格",houseType:"户型",trait:"特色"};
$('.y_mapcond_right').on('click','.yusuan a',function(){
var property = $(this).attr('data-type');
//删除对象中的数据
delete dataID[property];
delete dataTitle[property];
// 实现删除当前标签时，对应的数据修改为默认值
$('.dataText[data-id="'+property+'"]').html(module[property]);
$(this).parent('.yusuan').remove(); //删除当前的标签内容
getData(1,dataID); //选择筛选条件时候，把条件通过Ajax提交返回数据
})
//清空条件
$('.y_mapcond_left').on('click',function(){
dataID={}; //清空对象
dataTitle={}; //清空对象
$('.y_mapcond_right').html(""); //清空里面所有的标签
//把所有的筛选条件修改为默认值
for(i in module){
$('.dataText[data-id="'+i+'"]').html(module[i]);
}
getData(1,dataID); //选择筛选条件时候，把条件通过Ajax提交返回数据
})
//区域 点击筛选
$('#y_maptop_sel1 .y_left a').on('click',function(){
var cyit=$(this).attr('city');
var sjtitle=$(this).text();
$(this).css({'color':'#f00'}).siblings().css({'color':'#666'});
$('#y_maptop_sel1 p.y_right').attr('sj-city',''+sjtitle+'')
$.post('/map/pidcity',{id:cyit,'csrf_token_f':csrfToken},function(data){
var echodataUl = $('#y_maptop_sel1 p.y_right');
echodataUl.html('');
var data = data.data;
var html = '';
$.each(data,function(key,val){
html ='';
html+=''+val.city_name+'';
html+='';
echodataUl.append(html);
})
})
});
// 区域 预算 户型 特色 显示隐藏
navMouseleave(".y_maptop_sel");
})
/* 显示隐藏方法封装 */
function navMouseleave (oid){
$(oid).on({
mouseover: function() {
$(this).find('.y_qysf').show();
},
mouseleave: function() {
$(this).find('.y_qysf').hide();
}
});
}
/*
* 区域点击事件，当点击某个区域时，跳转到相应的区域位置
*/
$('#y_maptop_sel1 .y_left a').on('click',function(){
$('#y_maptop_sel1 p.y_city span').text($(this).text());
var post=$(this).attr('post')
var _point = newPoint(post);
point=new BMap.Point(_point[0],_point[1]);
mp.centerAndZoom(point, 8);
mp.enableScrollWheelZoom();
// lplist();
})
/*------------------------------------百度地图----------------------------------------------------------------------*/
var mp = new BMap.Map("allmap",{minZoom:5,maxZoom:16});
mp.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
// mp.addControl(new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); //右下角，打开
mp.addControl(new BMap.ScaleControl()); // 添加默认比例尺控件
mp.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT})); // 左下
mp.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
mp.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角，仅包含平移和缩放按钮
// point=new BMap.Point(110.483789,19.119914);
point=new BMap.Point(106.367394,34.111821);
mp.centerAndZoom(point, 5);
mp.enableScrollWheelZoom();
var geoc = new BMap.Geocoder();
// console.log(geoc);
// 复杂的自定义覆盖物
function ComplexCustomOverlays(point, text, mouseoverText){
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlays.prototype = new BMap.Overlay();
ComplexCustomOverlays.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
var span = this._span = document.createElement("span");
var that = this;
var arrows = this._arrows = document.createElement("div");
arrows.style.background = "url(../map/image/ico_map9.png) no-repeat";
arrows.style.position = "absolute";
arrows.style.width = "24px";
arrows.style.height = "28px";
arrows.style.top = "10px";
arrows.style.left = "0px";
arrows.style.overflow = "hidden";
arrows.style.cursor = "default";
div.appendChild(arrows);
div.onmouseover = function(){
this.style.background = "url(../map/image/ico_map9.png) no-repeat";
arrows.style.backgroundPosition = "0px -35px";
this.style.zIndex = 999999;
// this.style.cursor="pointer";
}
div.onmouseout = function(){
this.style.background = "url(../map/image/ico_map9.png) no-repeat";
arrows.style.backgroundPosition = "0px 0px";
this.style.zIndex = 0;
}
mp.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlays.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrows.style.left) - 8 + "px";
this._div.style.top = pixel.y - 35+ "px";
};
ComplexCustomOverlays.prototype.addEventListener = function(event,fun){
this._div['on'+event] = fun;
};
/*---------------------------------------新添加的省、区域-------------------------------------------------------------*/
function labelFu(data){
var datacenter = data; //数据重新赋值
var rank = datacenter.rank; //获取级别
var text = datacenter.city; //获取城市
var pid = datacenter.pid; //省份iD
var count = datacenter.count; //获取城市楼盘数量
var point = newPoint(datacenter.point);
var _points = new BMap.Point(point[0],point[1]); //经纬度处理
// 复杂的自定义覆盖物
/*添加图标*/
function ComplexCustomOverlay(point){
this._point = point;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);//聚合功能?
div.style.height = "45px";
div.style.width="45px";
div.style.cursor="pointer";
div.style.zIndex = 0;
div.setAttribute("pointX", this._point.lng);
div.setAttribute("pointY", this._point.lat);
div.setAttribute("rank", rank);
div.setAttribute("pid", pid);
// console.log(rank)
var arrow = this._arrow = document.createElement("p");
arrow.style.background = "url(/image/yuan.png) no-repeat 0px 0px/55px 110px";
arrow.style.backgroundPosition = "0px 0x";
arrow.style.width = "55px";
arrow.style.height = "55px";
arrow.style.lineHeight = "20px";
arrow.style.textAlign = "center";
arrow.style.top = "30px";
arrow.style.padding = "10px 0";
arrow.style.left = "30px";
// arrow.innerHTML = text;
var _ew = this.arow = document.createElement("em");
_ew.innerHTML = text;
var _arow = this.arow = document.createElement("span");
_arow.style.display = " block";
_arow.innerHTML = count;
arrow.appendChild(_ew);
div.appendChild(arrow);
arrow.appendChild(_arow);
div.onmouseover = function(){
arrow.style.background = "url(/image/yuan.png) no-repeat center/55px 110px";
arrow.style.backgroundPosition = "0px -55px";
this.style.zIndex = 99990;
}
div.onmouseout = function(){
arrow.style.background = "url(/image/yuan.png) no-repeat center/55px 110px";
arrow.style.backgroundPosition = "0px 0px";
this.style.zIndex = 0;
}
/*
* 给覆盖物添加点击事件
*/
div.addEventListener("click", function () {
/*获取当前的经纬度*/
var _x = $(this).attr("pointX");
var _y = $(this).attr("pointY");
Apoint=new BMap.Point(_x,_y);
/*获取级别*/
var _rank = $(this).attr("rank");
var _pid = $(this).attr("pid");
var mapRank = 14;
if(_rank == 1){
mapRank = 10;
fuAjaxRegion(_pid); // 把区域遍历
// getData(1,_pid); //选择筛选条件时候，把条件通过Ajax提交返回数据
}else if(_rank == 2){
mapRank = 15;
fuAjaxLabel(_pid);
// getData(1,_pid); //选择筛选条件时候，把条件通过Ajax提交返回数据
}
// console.log(Apoint)
mp.centerAndZoom(Apoint, mapRank); // 点击当前覆盖物跳转到当前省份上，放大到10级
mp.clearOverlays(); // 清除地图上所有的覆盖物
// 获取当省份
var province = $(this).find('em').text();
// console.log(province)
});
mp.getPanes().labelPane.appendChild(div); //getPanes(),返回值:MapPane,返回地图覆盖物容器列表 labelPane呢???
return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
var myCompOverlay = new ComplexCustomOverlay(_points); //添加覆盖物的经纬度
mp.addOverlay(myCompOverlay); //将标注添加到地图中
}
/*遍历所有省份*/
function fuAjax(){
$.ajax({
url:"/map/province",
type:"GET",
dataType:"json",
success:function(data){
if(data.code == 200){
// console.log(data.data)
$.each(data.data,function(key,val){
labelFu(val);
})
}
},
error:function(request){
console.log('加载失败！');
}
})
};
fuAjax();
/*遍历所有区域*/
function fuAjaxRegion(pid =null){
$.ajax({
url:"/map/city",
type:"GET",
data:{pid:pid},
dataType:"json",
success:function(data){
if(data.code == 200){
// console.log(data.region)
$.each(data.data,function(key,val){
labelFu(val);
})
}
},
error:function(request){
console.log('加载失败！');
}
})
};
// fuAjaxRegion();
/*
* 新添加标注物
*/
function fuAjaxLabel(pid =null){
$.ajax({
url:"/map/cityhouse",
type:"GET",
data:{pid:pid},
dataType:"json",
success:function(data){
if(data.code == 200){
$.each(data.data,function(key,val){
var point = newPoint(val.point); //把经纬度进行转化
var _points = new BMap.Point(point[0],point[1]); //经纬度处理
var txt = "",mouseoverTxt="";
var _iw = createInfoWindow(val); //把当前的数据添加到标签中
var o = scope(_points);
if(o != undefined){
var myCompOverlay = new ComplexCustomOverlays(o,txt, mouseoverTxt); //将覆盖物存到变量，以便下面使用。
mp.addOverlay(myCompOverlay); //把标签到地图上
myCompOverlay.addEventListener("click", function () { //点击出现对应自定义覆盖物
mp.openInfoWindow(_iw, _points) // 点击标签弹出标签
});
}
})
}
},
error:function(request){
console.log('加载失败！');
}
})
}
/*监听地图移动事件*/
mp.addEventListener("dragend", function(e){
// var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;//firefox使用detail:下3上-3,其他浏览器使用wheelDelta:下-120上120
// e=e || window.event;
var u = mp.getZoom(); // 定义地图缩放等级的变量
if(u>12){
var center =mp.getCenter();
mp.clearOverlays(); //清除地图上所有的覆盖物
fuAjaxLabel();
}
})
/*获取可视区域*/
function scope(_point){
var bs = mp.getBounds(); //获取可视区域
var bssw = bs.getSouthWest(); //可视区域左下角
var bsne = bs.getNorthEast(); //可视区域右上角
// console.log(1)
if(_point.lng >= bssw.lng && _point.lng <= bsne.lng && _point.lat >= bssw.lat && _point.lat <= bsne.lat ){
// console.log(_point)
return _point
}
// console.log("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
}
// 方法2：用于监听滚轮事件
//firefox使用DOMMouseScroll,其他浏览器使用mousewheel
$('#allmap').bind('mousewheel DOMMouseScroll',fullscreenScroll);
function fullscreenScroll(e){
var u = mp.getZoom(); // 定义地图缩放等级的变量
console.log(u)
if(u>6 && u <= 9){
mp.clearOverlays(); //清除地图上所有的覆盖物
fuAjax();
}else if(u > 9 && u <= 11) {
fuAjaxRegion();
mp.clearOverlays(); //清除地图上所有的覆盖物
}else if(u > 11){
mp.clearOverlays(); //清除地图上所有的覆盖物
fuAjaxLabel();
}
}
/*--------------------------------------- 新添加的省、区域 END -------------------------------------------------------------*/
// 遍历覆盖楼盘名称
function labal(obj){
// console.log(obj)
$.each(obj.data, function (i, obj) {
var txt = obj.name;
var mouseoverTxt = txt + ' | ' + obj.sale_price;
var pintx = obj.longitude_latitude.split(',')[0];
var pinty = obj.longitude_latitude.split(',')[1];
var _points = new BMap.Point(pintx, pinty);
var o = scope(_points);
if(o != undefined){
var myCompOverlay = new ComplexCustomOverlays(o,txt, mouseoverTxt); //将覆盖物存到变量，以便下面使用。
mp.addOverlay(myCompOverlay); //把标签到地图上
}else{
var myCompOverlay = new ComplexCustomOverlays(new BMap.Point(pintx, pinty), txt, mouseoverTxt); //将覆盖物存到变量，以便下面使用。
mp.addOverlay(myCompOverlay);
}
var point = new BMap.Point(pintx, pinty);
var _iw = createInfoWindow(obj);
var _marker = myCompOverlay; //当初存的覆盖物变量
_marker.addEventListener("click", function () { //点击出现对应自定义覆盖物
mp.openInfoWindow(_iw, point);
});
});
}
/*--------------------------------- Ajax 分页功能 ----------------------------------------*/
var curPage = 1; //当前页码
var total,pageSize = 10,totalPage; //总记录数，每页显示数，总页数
//获取数据
function getData(page,arr = null,async){
if(async == undefined){
async= true;
}
$.ajax({
type: 'post',
url: "/map/houselist",
data: {'page':page,'limit':pageSize,'csrf_token_f':csrfToken,'data':arr},
dataType:'json',
async:async, //为了解决检索时，点击对应的楼盘
beforeSend:function(){
$(".y_mapcenter_list ul").append("
数据加载中...