pfhwyigou/mobile/web/overseas/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);   //最外层盒子高度
    $('#allmap').css('height', _h);    //地图高度
    $('.m_qhcs_box').css('height', _h);  //区域选择盒子高度


    // 选择请选择查看区域 选择
    // $('.m_City_ul_li').on('touchstart', 'div.m_City_province', function () {
    //     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();
    // })
    (function (){
        on_off = true;    //开启重新定位
        var txt = '海南';
        var city_id = 68;
        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: "/json/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="/overseas/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(/overseas/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(/overseas/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(/overseas/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: "/json/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(/overseas/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: "/json/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/' + 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);
})