pfhwyigou/wechat/web/map/js/index.js

$(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('<div class="load"><img src="/map/image/loading1.gif" alt="" /></div>')

      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 = '<span style="font-size:1rem;color:red;">待定</span>'
              if(v.sale_price != 0 && v.sale_price != "" && v.sale_price != null){
                  price = '价格：<span><em>'+v.sale_price+'</em><i>'+v.price_unit+'</i></span>';
              }
              // var main_units = (v.main_units !='') ?  v.main_units : '<span style="color:#999;">暂无信息</span>';

              $('.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('<span>'+v.name+'</span>');
              // $('.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 += '<i>'+j+'</i>'
              })
              $('.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);
})