$(function(){ /*变量、对象 定义*/ var on_off = true; //用于重新定位筛选开关 var cityString = new Object(); var page = 1; /* * 一、以下为地图页面的功能; * 1、地图默认进来的时候,获取所有城市以AJAX请求数据,返回所在城市的主推楼盘信息,把返回的数据在地图上显示并在列表中显示所返回楼盘信息; * 2、点击筛选条件时,把条件存储在对象 dataAjax 对象中并提交,返回的数据遍历在地图上与列表中,筛选的条件内容在条件列表中显示; * 3、在条件列表中,每删除一个条件都会重新请求一个数据,列表中显示的条件都为再次请求的条件; * 4、每删除一个条件时,都会在存储对象中删除对应的属性与值; * 5、输入检索时,去除所有的空格与HMTL标签; * */ // 设置地图展示框的高度 var _h = $(window).height(); $('.max_box').css({'height':_h,'position':'relative','top':'-20px'}); //最外层盒子高度 $('#allmap').css('height',_h); //地图高度 $('.m_qhcs_box').css('height',_h); //区域选择盒子高度 // 选择请选择查看区域 选择 $('.m_City_ul_li').on('touchstart','div.m_City_province',function(){ $(this).addClass('on').siblings().removeClass('on'), on_off = true; //开启重新定位 var _this = $(this); var txt = _this.text(); var city_id = _this.attr('data-id'); FnAera(city_id); //区域请求数据 page = 1; $('.batch').fadeOut(); //不喜欢按钮隐藏 $('.map_aera a').html(txt); $('.m_qhcs_box').animate({top:"-"+_h+"px"}); $('.m_qhcs_box').fadeOut(); }) // 选择区域 $('.map_aera').on('touchstart',function(){ $('.m_qhcs_box').fadeIn(); $('.m_qhcs_box').animate({top:"0px"}); $('.batch').fadeOut(); //不喜欢按钮隐藏 }) // 展示区域数据请求 function FnAera(cityN){ $.ajax({ url:"/map/getcity", type:"post", data:{city:cityN,csrf_token_m:csrfToken}, dataType:"json", success:function(data){ remove_overlay(); // 清除地图上所有的覆盖物 每切换一次都要消除 if(data.code == 200){ $.each(data.data,function(k,v){ labelFu(v); }) } }, error:function(request){ console.log('加载失败!'); } }) } // 不喜欢换一批 $('.batch').on('touchstart',function(){ ++page; if(cityString.hasOwnProperty('page')){ page = cityString.page; delete cityString.page; } $('.max_box').append('
') var prov = cityString.city; fuAjaxLabel(prov,page); // 请求当前城市的数据 }) /*------------------以上为页面功能 * 以下为地图功能----------------------*/ /* * 二、以下为地图展示模块 * 1、创建地图实例,设置默认位置、城市; * 2、进入地图时,浏览器获取当前城市,并发出请求; * 3、自定义显示标签; * 4、根据返回数据的经纬度,以自定义标签把楼盘信息显示在地图上; * 5、给地图上每个标签绑定对应楼盘首页地址,点击时跳转楼盘首页; * 6、 * */ /*默认初起化数据*/ var currentLocation,cityName,map,point; var cityObject = {cityName:'海口',cityPoint:{lng:'110.300805',lat:'20.003838'}} //默认初始化位置 // 创建地图 map = new BMap.Map("allmap"); // 创建Map实例 point=new BMap.Point(cityObject.cityPoint.lng,cityObject.cityPoint.lat); map.centerAndZoom(point, 8); // 初始化地图,设置中心点坐标和地图级别 map.setCurrentCity(cityObject.cityName); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var geoc = new BMap.Geocoder(); //添加缩放控件,anchor默认定位 offset 设置偏移值 var top_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,offset: new BMap.Size(10, 50)}); //左上角,添加默认缩放平移控件 map.addControl(top_left_navigation); // 省、市、县覆盖物 function labelFu(data){ var datacenter = data; //数据重新赋值 var text = datacenter.name; //获取城市 // var pid = datacenter.id; //省份iD var count = datacenter.number; //获取城市楼盘数量 var point = newPoint(datacenter.point); var _points = new BMap.Point(point[0],point[1]); //经纬度处理 if(on_off){ map.centerAndZoom(_points, 8); //重新定位 on_off = false; //开关,每次检索或筛选要重新定位第一个楼盘位置; } // 复杂的自定义覆盖物 /*添加图标*/ function ComplexCustomOverlays(point){ this._point = point; } 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);//聚合功能? 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("pid", pid); // console.log(rank); var arrow = this._arrow = document.createElement("p"); arrow.style.background = "url(/map/image/yuan1.png) no-repeat 0px 0px/62px 117px"; arrow.style.backgroundPosition = "8px -54px"; arrow.style.width = "70px"; arrow.style.height = "55px"; arrow.style.lineHeight = "20px"; arrow.style.marginTop = "-8px"; arrow.style.textAlign = "center"; arrow.style.top = "30px"; arrow.style.padding = "10px 0"; arrow.style.left = "68px"; arrow.style.color = "#FFF"; arrow.style.fontSize="0.75rem"; // 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(/map/image/yuan1.png) no-repeat center/62px 117px"; arrow.style.backgroundPosition = "8px 1px"; this.style.zIndex = 99990; } div.onmouseout = function(){ arrow.style.background = "url(/map/image/yuan1.png) no-repeat center/62px 117px"; arrow.style.backgroundPosition = "8px -54px"; this.style.zIndex = 0; } /* * 给覆盖物添加点击事件 */ div.addEventListener("touchstart", function () { var province = $(this).find('em').text(); on_off = true; //开启重新定位 cityString.city = province; $('.batch').fadeIn(); //不喜欢按钮显示 fuAjaxLabel(province,page); // 请求当前城市的数据 }); map.getPanes().labelPane.appendChild(div); //getPanes(),返回值:MapPane,返回地图覆盖物容器列表 labelPane呢??? return div; } ComplexCustomOverlays.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 ComplexCustomOverlays(_points); //添加覆盖物的经纬度 map.addOverlay(myCompOverlay); //将标注添加到地图中 } //点击城市获取楼盘数据展示 function fuAjaxLabel(cityName,page){ $.ajax({ url:"/map/houselist", type:"post", data:{city:cityName,page:page,csrf_token_m:csrfToken}, dataType:"json", success:function(data){ setTimeout(function(){ $('.load').remove(); },300); setTimeout(function(){ if(data.code == 200){ remove_overlay(); // 清除地图上所有的覆盖物 请求成功 /*返回区域主推楼盘先*/ $.each(data.data.data,function(k,v){ addCover(v); //添加覆盖物的方法 }) if(data.data.data.length < 20){ cityString.page = 1; } }else if(data.code == 300){ cityString.page = 1; } },350); }, error:function(request){ console.log('加载失败!'); } }) } /*市县楼盘展示*/ function addCover(objData){ // console.log(objData) var pic = objData.price; var _pic = (pic != '0' && pic != null && pic != '' && pic != 'null' ) ? objData.price : "待定"; var txt = objData.name, mouseoverTxt =""; var information = objData; var coordinate = newPoint(objData.longitude_latitude); // 转换经纬度 // console.log(coordinate) var _point = new BMap.Point(coordinate[0],coordinate[1]); var myCompOverlay = new ComplexCustomOverlay(_point, txt,mouseoverTxt,information); map.addOverlay(myCompOverlay); if(on_off){ map.centerAndZoom(_point, 11); //重新定位 on_off = false; //开关,每次检索或筛选要重新定位第一个楼盘位置; } } // 复杂的自定义覆盖物 function ComplexCustomOverlay(point, text, mouseoverText,information){ this._point = point; this._text = text; this._overText = mouseoverText; this.information = information; // console.log(this.information.id) } 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.backgroundColor = "#33C0D0"; div.style.border = "1px solid #33C0D0"; div.style.color = "white"; // div.style.height = "18px"; div.style.padding = "5px 15px"; div.style.lineHeight = "18px"; div.style.whiteSpace = "nowrap"; div.style.MozUserSelect = "none"; div.style.fontSize = "12px"; div.setAttribute("class","shadow"); div.setAttribute("pid", this.information.id); //存储ID var span = this._span = document.createElement("span"); div.appendChild(span); span.appendChild(document.createTextNode(this._text)); var that = this; var arrow = this._arrow = document.createElement("div"); arrow.style.background = "url(/map/image/label.png) no-repeat"; arrow.style.position = "absolute"; arrow.style.width = "11px"; arrow.style.height = "10px"; arrow.style.top = "28px"; arrow.style.left = "10px"; arrow.style.backgroundPosition = "0 -19px"; arrow.style.overflow = "hidden"; div.appendChild(arrow); /*手机端页面添加 点击事件*/ div.addEventListener("touchstart", function(){ var hid = $(this).attr('pid'); FnInfo(hid); //传楼盘ID; // console.log(hid) }); div.onmouseover = function(){ this.style.backgroundColor = "#6BADCA"; this.style.borderColor = "#0000ff"; this.getElementsByTagName("span")[0].innerHTML = that._text; arrow.style.backgroundPosition = "0px -20px"; } div.onmouseout = function(){ this.style.backgroundColor = "#EE5D5B"; this.style.borderColor = "#BC3B3A"; this.getElementsByTagName("span")[0].innerHTML = that._text; arrow.style.backgroundPosition = "0px 0px"; } map.getPanes().labelPane.appendChild(div); 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"; } // 弹窗 function FnInfo(id){ $.ajax({ url:"/map/details", type:"get", data:{hid:id}, dataType:"json", success:function(data){ var v =data.data; if(data.code == 200){ // 修改数据 var price = '待定' if(v.sale_price != 0 && v.sale_price != "" && v.sale_price != null){ price = '价格:'+v.sale_price+''+v.price_unit+''; } // var main_units = (v.main_units !='') ? v.main_units : '暂无信息'; $('.w_info_box').find('.w_house_img img').attr('src',v.thumb); $('.w_info_box').find('.w_house_img > a').attr('href','/house/sanyashi-'+v.id+'/'); $('.w_info_box').find('.w_house_img a > span').html(v.city_name); $('.w_info_box').find('.w_title').html(''+v.name+''); // $('.w_info_box').find('.w_map_hu i').html(main_units); $('.w_info_box').find('.w_price').html(price); var _li ="" $.each(v.characteristic,function(k,j){ _li += ''+j+'' }) $('.w_info_box').find('.w_feature').html(_li); // 特效 $('.w_info_box').fadeIn(); $('.w_info_box').animate({top:'20%'}); $('.cover').fadeIn(); } }, error:function(request){ console.log('加载失败!'); } }) } // 弹窗关闭按钮 $('.w_btn').on('touchstart',function(){ $('.w_info_box').animate({top:'-100%'}); $('.cover').fadeOut(); }) // 遮挡层 $('.cover').on('touchstart',function(){ $('.w_info_box').animate({top:'-100%'}); $(this).fadeOut(); }) //清除覆盖物 function remove_overlay(){ map.clearOverlays(); } /*转换经纬度*/ function newPoint(_point){ var pointArr = []; if(_point != null){ if(_point.indexOf(',') !== -1){ var _pointx = _point.split(',')[0]; var _pointy = _point.split(',')[1]; }else if(_point.indexOf('|') !== -1){ var _pointx = _point.split('|')[0]; var _pointy = _point.split('|')[1]; } pointArr.push(_pointx,_pointy); return pointArr; } } setInterval(function(){ $('#LXB_CONTAINER_SHOW').hide(); $('#LRMINIBar').hide(); },80); })