pfhwyigou/frontend/web/map/js/map - 副本.js

//地图盒子的高度
var windheight=$(window).height();
var divheight=$('.y_maphead').height();
var navheight=$('.y_puicdh_c').height();

var windwidth=$(window).width();
var divwidth=$('.y_mapcenter_left').width();
$('.y_mapcenter').css({'height':(windheight-divheight-navheight)+'px'});
$('.y_mapcenter_main').css({'width':(windwidth-divwidth-20)+'px'}); 
// $('.y_mapcond_main .y_mapcond_right  span a').hide();
// 地图找房 区域效果
$(function(){
    $('.y_maptop_scr').keyup(function(event) {
        if(event.keyCode==13){                        
            $('.y_maptop_sub').click();
            console.log('提交');
            return false;
        }else{
            lplist();
        }
    });

    navMouseleave('#y_maptop_sel1','#y_maptop_sel1 .y_qysf');
    navMouseleave('#y_maptop_sel2','#y_maptop_sel2 .y_qysf');
    navMouseleave('#y_maptop_sel3','#y_maptop_sel3 .y_qysf');
    navMouseleave('#y_maptop_sel4','#y_maptop_sel4 .y_qysf');

    $('#y_maptop_sel1 .y_left a').on('mouseover',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('/js/navs.json',{cyit:cyit,csrf_token_f:111},function(data){
            var echodataUl = $('#y_maptop_sel1 p.y_right');
            echodataUl.html('');
            var data = data.data;
            var html = '';
            $.each(data,function(key,val){
                html ='<a data-city="'+val.id+'" href="javascript:;">';
                html+=''+val.title+'';
                html+='</a>';
                echodataUl.append(html);
            })
        })
    });

    $('#y_maptop_sel1 p.y_right').on('click','a',function(){
        var title=$('#y_maptop_sel1 p.y_right').attr('sj-city');
        var datacity=$(this).attr('data-city');
        var name_title=$(this).text();
        $('#y_maptop_sel1 p.y_city span').text(title);
        $('.y_mapcond_right span.quyu em').text(name_title);
        $('.y_mapcond_right span.quyu a').show();
        lplist();
    });
    y_leixing('y_maptop_sel2','a','yusuan');
    y_leixing('y_maptop_sel3','a','huxing');
    y_leixing('y_maptop_sel4','a','tese');

    fontext('quyu','#y_maptop_sel1 p.y_city span','区域');
    fontext('yusuan','#y_maptop_sel2 p.y_city span','预算');
    fontext('huxing','#y_maptop_sel3 p.y_city span','户型');
    fontext('tese','#y_maptop_sel4 p.y_city span','特色');

    $('.y_mapcond_left a').on('click',function(){
        $('.y_mapcond_right span em').html('');
        $('.y_mapcond_right span a').hide();
        $('#y_maptop_sel1 p.y_city span').text('区域');
        $('#y_maptop_sel2 p.y_city span').text('预算');
        $('#y_maptop_sel3 p.y_city span').text('户型');
        $('#y_maptop_sel4 p.y_city span').text('特色');
        lplist();
    })
})

function fontext(name1,name2,text){
    $('.y_mapcond_right').on('click','span.'+name1+' a',function(){
        $(this).siblings('em').html('');
        $(this).hide();
        $(name2).text(text);
        lplist();
    })
}

function  y_leixing(name1,name2,name3){
    $('#'+name1+' p.y_leixing').on('click',name2,function(){
        var title=$(this).text();
        var name_title=$(this).text();
        var name_title=$(this).text();
        $('#'+name1+' p.y_city span').text(title);
        $('.y_mapcond_right span.'+name3+' em').text(name_title);
        $('.y_mapcond_right span.'+name3+' a').show();
        lplist();
    });
}

function navMouseleave (id,id1){
    $(id).on({
        mouseover: function() {
           $(id1).show();
        },
        mouseleave: function() {
            $(id1).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 _pointx = post.split(',')[0];
    var _pointy = post.split(',')[1];
    point=new BMap.Point(_pointx,_pointy);
    mp.centerAndZoom(point, 8);
    mp.enableScrollWheelZoom();
    lplist();
})

    var mp = new BMap.Map("allmap",{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);
    mp.centerAndZoom(point, 8);
    mp.enableScrollWheelZoom();

    var geoc = new BMap.Geocoder();
    // console.log(geoc);
    

    // 复杂的自定义覆盖物
    function ComplexCustomOverlay(point, text, mouseoverText){
        this._point = point;
        this._text = text;
        this._overText = mouseoverText;
    }
    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);
      var span = this._span = document.createElement("span");
      var that = this;

 
      var arrow = this._arrow = document.createElement("div");
      arrow.style.background = "url(../map/image/ico_map9.png) no-repeat";
      arrow.style.position = "absolute";
      arrow.style.width = "24px";
      arrow.style.height = "28px";
      arrow.style.top = "20px";
      arrow.style.left = "10px";
      arrow.style.overflow = "hidden";
      div.appendChild(arrow);

      div.onmouseover = function(){
        this.style.background = "url(../map/image/ico_map9.png) no-repeat";
        arrow.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";
        arrow.style.backgroundPosition = "0px 0px";
        this.style.zIndex = 0;
      }

      mp.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 - 35+ "px";
    };

    ComplexCustomOverlay.prototype.addEventListener = function(event,fun){
        this._div['on'+event] = fun;
    };


lplist();
function lplist(){
    $(".y_mapcenter_list ul").html('')
    var html = '';
    $.ajax({
        url: "/map/js/tsconfig.json",
        type: "GET",
        dataType: "json",
        success: function(data) {//请求成功完成后要执行的方法
            $.each(data.markerArr, function (i, data) {    //左边楼盘列表
                    var jg=data.content.pic;
                    if (jg!='') {
                        jg=data.content.pic;
                    }else{
                        jg='待定';
                    };
                    html+=  '<li class="c" data-id="'+data.point+'">';
                    html+=  '<div class="y_tu"><a href="javascript:;"><img src="'+data.content.img+'" alt=""></a></div>';
                    html+=  '<div class="y_textmain">';
                    html+=  '<div class="y_text c">';
                    html+=  '<a href="javascript:;">'+data.title+'</a>';
                    html+=  '<span><em>'+jg+'</em></span>';
                    html+=  '</div>';
                    html+=  '<div class="y_qixian">(有效期：2017年2月11日-2018年2月11日)</div>';
                    html+=  '<div class="y_hx">户型：'+data.content.add+'</div>';
                    html+=  '<div class="y_tese c">';
                    html+=  '<i>旅游地产</i><i>旅游地产</i><i>旅游地产</i>';
                    html+=  '</div>';
                    html+=  '</div> ';
                    html+=  '</li>';

            });
            $(".y_mapcenter_list ul").append(html);
           

            function  createInfoWindow(data){   //自定义覆盖物
                var iw= new BMap.InfoWindow(
                    '<div class="map_id" style="width:260px; height:auto; position:absolute; left:0px; top:0px;">'+
                    '<p style="width:100%; height:155px; margin-top:10px;"><a href="'+data.content.href+'"><img src="'+data.content.img+'" alt="" width="100%" height="100%;"></a></p>'+
                    '<p style="margin-top:8px;"><a style="font-size:16px; color:#333;" href="'+data.content.href+'">'+data.title+'</a><span style="font-size:12px; color:#888; padding-left:8px;">'+data.dq+'</span></p>'+
                    '<p style="margin-top:5px;"><span><em style="font-size:18px; color:#f00; font-style:normal;">'+data.content.pic+'</em></span></p>'+
                    '</div>'
                );
                return iw
            }


            // 遍历覆盖楼盘名称
            function labal(obj){
                $.each(obj.markerArr, function (i, obj) {
                    var txt = obj.title;
                    var mouseoverTxt = txt + '&nbsp;&nbsp;|&nbsp;&nbsp;' + obj.content.pic;
                    var pintx = obj.point.split('|')[0];
                    var pinty = obj.point.split('|')[1];

                    var myCompOverlay = new ComplexCustomOverlay(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);
                    });

                });
            }


            $(".y_mapcenter_list ul li").click(function(){  //点击列表对应自定义覆盖物
                var _point =  $(this).attr('data-id');
                var _pointx = _point.split('|')[0];
                var _pointy = _point.split('|')[1];
                var _points = new BMap.Point(_pointx, _pointy);
                var _i = $(this).index();
                var _newhou = data.markerArr[_i];
                var ih = createInfoWindow(_newhou);
                mp.centerAndZoom(_points, 14);                  //对应的坐标及放大级别
                labal(data);                                    //遍历所以有的点
                mp.openInfoWindow(ih, _points)                  //当前覆盖添加并展示

            });


            // 方法2：用于监听滚轮事件
            //firefox使用DOMMouseScroll,其他浏览器使用mousewheel
            $(document).bind('mousewheel DOMMouseScroll',fullscreenScroll);

            function fullscreenScroll(e){
                var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;//firefox使用detail:下3上-3,其他浏览器使用wheelDelta:下-120上120//下滚
                if(delta>0){
                    e=e || window.event;
                    var u = mp.getZoom();       // 定义地图缩放等级的变量
                    if(u > 14){
                        // console.log(u)
                        labal(data);            //遍历所有的点
                    }else if(u >13){
                        mp.clearOverlays();     //清除地图上所有的覆盖物
                         // console.log(u)
                    }
                }
                //上滚
                if(delta<0){

                    e=e || window.event;
                    var u = mp.getZoom(); // 定义地图缩放等级的变量
                    if(u >=  13){
                        // console.log(u)
                        labal(data);        //遍历所有的点
                    }else{
                        mp.clearOverlays();     //清除地图上所有的覆盖物
                    }
                    // console.log(u + 'a')
                }
            }

             mp.addEventListener("click",attribute);                //获取点击聚合图标放大的缩放级别  2018.3.21
            function attribute(){
                var u = mp.getZoom(); // 定义地图缩放等级的变量
                    if(u >= 13){
                        labal(data);
                    }  
            }
// ----------------------------------- 不调用 maplib.js textlconOverlay.js 不使用下面的代码 ------------------------------------------------------

            var markers = [];
            var _conter = [];
            var _data = [];
            var pt = null;
            var msc;
            // console.log(data.markerArr.length)
            for(var i in data.markerArr){
                var coordinate = newPoint(data.markerArr[i].point);
                pt = new BMap.Point(coordinate[0],coordinate[1]);
                markers.push(new BMap.Marker(pt));
                _conter.push(data.markerArr[i].title);
                _data.push({"point":pt,"title":data.markerArr[i].title});

                //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
                var markerClusterer = new BMapLib.MarkerClusterer(mp,
                    {   
                        markers:markers,
                        girdSize : 100,
                        getCent:data,
                        ladata:_data,
                        geoc:geoc,
                        // minClusterSize:3,
                        styles : [{
                            url:'/map/image/blue.png',
                            size: new BMap.Size(92, 92),
                            backgroundColor : '#2E96F7'
                        }],
                    });
                markerClusterer.setMaxZoom(13);
                markerClusterer.setGridSize(100);
            }
        }
    });
}
    // 处理经纬坐标
    function newPoint(_point){
        var pointArr = [];
        var _pointx = _point.split('|')[0];
        var _pointy = _point.split('|')[1];
        pointArr.push(_pointx,_pointy);
        return pointArr;
    }