pfhwyigou/backend/web/static/js/search_map.js

$(function(){

    $("#address").val("");
    $("#result").on("click","li",function(){
        var point = $(this).find(".point").text();
        $("#s-point").text(point);//赋值
        $("#result li").css("background-color","#fff");
        $(this).css("background-color","#f0f0f0");
    });

    //绑定input文本框回车事件
    // $('#address').bind('keypress',function(event){
    //     if(event.keyCode == "13"){
    //         doSearch();//搜索
    //     }
    // });


     /*全选或者取消全选*/
    $('.checkAll .select').on('click',function(){
        var price = $(this).prop("checked");
        if(price == true){
            $(this).siblings('label').html('取消全选')
        }else{
            $(this).siblings('label').html('全选')
        }
        $('#result ul li').each(function(){
            $(this).find('input[type="checkbox"]').prop("checked",price);
        })
    })





    //检索功能
    $('.layui_w_search').on('click',function(){
        var _data = $('.layui-input-block option:selected').text(); //选择中的内容
        var _val = $('.layui-input-block option:selected').val();   //下拉的val值
        var _longitude =$('input[name="longitude"]').val();         //获取经纬度
        var pintx = _longitude.split(',')[0];
        var pinty = _longitude.split(',')[1];
        _longitude = new BMap.Point(pintx,pinty);

        if( _val == ''){
            layer.msg('请选择类目！！',{icon:5});      //当没有选择类目时提示
        }else{
            // console.log(isNaN(_longitude.lat))
            if(isNaN(_longitude.lat)){
                layer.msg('请选择楼盘经纬度！！',{icon:5});
            }else{
                $('#address').val(_data);           //把选择检索的值传入检索框
                $('#jwd').val(pintx +','+ pinty);   //把选择检索的值传入检索框
                show();                             //调用地图弹窗
                doSearch(_data,_longitude);         //调用周围检索方法
            }
        }
    })


    //保存，把所有的数据展示
    $('.layui_w_btn').on('click',function(){
        var dataObj = [{}];              //创建一个数组对象
        var dataArry = new Array();
        var dataText = new Array();

        //用于在百度地图右边获取信息
        $('#result ul li').each(function(){
            var _input = $(this).find('input[name="choice_checkbox"]').is(':checked');      //判断checkbox是否选中
            if(_input){
                var i = $(this).index();
                var dataTitle = $(this).find('.title_box').text();
                var dataRout = $(this).find('.kilometre').text();
                var dataPoint = $(this).find('.point').text();
                dataObj[i] = {title:dataTitle,rout:dataRout,point:dataPoint}        //把数据以数组对象的方式保存
                dataArry.push(dataObj[i]);                                          //把数组对象插入数组便于保存
            }
        })

        //处理不能有重复插入的方法
        var _txt = $('.layui-input-block table.layui-table tbody').html()
        if(_txt ==''){
            datumInsert(dataArry);              //表格中没有数据时，直接插入
        }else {
            var _tr = $('.layui-input-block table.layui-table tbody tr');
            _tr.each(function(){
                var _input = $(this).find('input[name="matingName"]').val();     //获取表格中的数据
                dataText.push(_input);           //把数据插入数组中
            })
            for(var i=0;i<dataText.length;i++){
                for(var j=0;j<dataArry.length;j++){
                    if(dataText[i] == dataArry[j].title){
                        dataArry.splice(j, 1);     //新的数据与表格的数据相同时，删除dataArry数组中下标为j的元素
                    }
                }
            }
            datumInsert(dataArry);              //去掉重复再尾部插入
        }

        $('.checkAll .select').prop("checked",false);           //修改全选的属性值
        $('.checkAll label').html('全选');                      //修改取消全选文字

        dhide();   //关闭地图弹窗
    })

    //展示数据删除按钮
    $('table.layui-table tbody').on('click','.del',function(){
        $(this).parents('tr').remove();
    })


});

// 百度地图API功能
var map = new BMap.Map("map");
var _lTude =$('input[name="longitude"]').val();         //获取经纬度

var pintx = _lTude.split(',')[0];
var pinty = _lTude.split(',')[1];
_lTude = new BMap.Point(pintx,pinty);
// console.log(_lTude)
// var Point = new BMap.Point(110.350948,20.002057);
map.centerAndZoom(_lTude, 14);
map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用

/* 求百度地图两点的距离
*   这是百度地图的方法
*   var kdi =map.getDistance(Point,poi.point);     //获取两点的距离，单位为米
*   以下是计算方法
*/
function km (point1,point2){
    var R=6370996.81,pi=3.1415926535898;
    var distance=R*Math.acos(Math.cos(point1.lat*pi/180 )*Math.cos(point2.lat*pi/180)*Math.cos(point1.lng*pi/180 -point2.lng*pi/180)+Math.sin(point1.lat*pi/180 )*Math.sin(point2.lat*pi/180));
    var kilometre = (distance/1000).toFixed(2)              //米转换为公里，并保留两位小数
    return kilometre;
}

//map展现结果的地图实例
//autoViewport检索结束后是否自动调整地图视野,false 不调整地图视野
var local = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});

//地址检索
function doSearch(Odata,Opoint){
    var address = Odata;
    // local.search(address);
    // map.LocalSearch(address)
    local.searchNearby(address,Opoint)
    // local.searchNearby(address,Opoint,1000)     //规定范围

    var marker = new BMap.Marker(Opoint);  // 创建标注
    // console.log(Opoint)
    map.addOverlay(marker);               // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

    var label = new BMap.Label("楼盘位置",{offset:new BMap.Size(30,-10)});
    marker.setLabel(label);

    //检索结束后的回调方法
    local.setSearchCompleteCallback(function(results){
        if(results.Br.length != 0){
            // 判断状态是否正确
            // 百度地图状态码如下：
            // BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
            // BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
            // BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
            // BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
            // BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
            // BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
            // BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
            // BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
            // BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
            if (local.getStatus() == BMAP_STATUS_SUCCESS){
                // console.log(results.zr.length)
                var str = "<ul>";
                for (var i = 0; i < results.getCurrentNumPois(); i ++){
                    var poi = results.getPoi(i);
                    var KM = km(Opoint,poi.point)       //调用方法计算两点的距离
                    str+='<li>';
                    str+='<div class="res-data">';
                    str+='<div class="left res-marker">';
                    str+='<span style="display:block;margin-top:25%;"><input type="checkbox" name="choice_checkbox" /></span>';
                    str+='<span>'+String.fromCharCode(65+i)+'</span>';
                    str+='</div>';
                    str+='<div class="left res-address">';
                    str+='<div class="title"><span class="title_box">'+poi.title+'</span> - '+address +'</div>';
                    str+='<div>地址：<span class="rout">'+poi.address+'</span></div>';
                    str+='<div>距离：<span class="kilometre">'+KM+'公里</span></div>';
                    str+='<div>坐标：<span class="point">'+poi.point.lng+","+poi.point.lat+'</span></div>';
                    str+='</div>';
                    str+='<div class="clearfix"></div>';
                    str+='</div>';
                    str+='</li>';
                }
                str+='</ul>';
                $("#result").html(str);
                $("#s-city").text(results.province+results.city);
                $("#s-point").text(results.getPoi(0).point.lng+","+results.getPoi(0).point.lat);
            }
        }else{
            $('#result').html('<div style="text-align:center;margin-top:15px">周边规定范围内未查找到配套信息！！</div>')
        }
    });
}


//点击当前选中方法
$('#result').on('click','li',function () {
    var status = $(this).find('input[name="choice_checkbox"]').is(':checked');
    if(status){
        $(this).find('input[name="choice_checkbox"]').removeAttr('checked');
    }else {
        $(this).find('input[name="choice_checkbox"]').attr('checked','checked');
    }
})


//数据插入方法
function datumInsert(objArry){
    for(var i=0;i<objArry.length;i++){
        var tr ='<tr>'
            +'<td lay-event="del">'
            +'<div class="layui-table-cell del"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;cursor: pointer">&#xe640;</i></div>'
            +'</td>'
            +'<td data-field="matingName" align="center" data-content="">'
            +'<div class="layui-table-cell"><input type="text" name="matingName" value="'+objArry[i].title+'" autocomplete="off" class="layui-input" ></div>'
            +'</td>'
            +'<td data-field="distance" align="center" data-content="">'
            +'<div class="layui-table-cell"><input type="text" name="distance" value="'+objArry[i].rout+'" autocomplete="off" class="layui-input" ></div>'
            +'</td>'
            +'<td data-field="longitude" align="center" data-content="">'
            +'<div class="layui-table-cell"><input type="text" id="jwd" name="longitude" value="'+objArry[i].point+'" autocomplete="off" class="layui-input" ></div>'
            +'</td>'
            +'</tr>'
        $(".layui-input-block table.layui-table tbody").append(tr);
    }
}