前端如何做到滚动条+内边距+变量问题解决

今天遇到一共要求做一个点击查询数据，要求显示数据，并且点击事件触发百度地图显示对应数据并且按距离排序问题，如图

原图

修改图

这里主要分为几个问题？
1.这个表格如何设置内部字段高度显示
2.数据显示太多右下角不够存放怎么办？
3.如何拿取地图距离并且排序由小到大
3.点击事件触发如何传递Object类数据，因为我原始代码是拼接的html，不能传递Object如何解决

1.首先看第一个问题和第二个问题处理，表格排版问题

            

                

                    

                    

                        
门店名称
                        
门店电话
                        
距离
                        
授权门店
                    
                    
                    

                
            

css样式，这里特别注意：
1.如何让表单内部显示合理，就要设置内边距 padding: 10px 5px; 10px表示内容与表单上下内边距 5px就是左右内边距。

2.overflow-y: auto      这auto ：如果溢出框，则应该提供滚动机制，这里就为多余的数据做到滚动条。

    .shop{
        width:100%;
        margin-top: 400px;
        height: 420px;
        overflow-y: auto
    }
    .shop table{
        width: 100%;
        font-size: 13px;
        color:white;
        vertical-align:middle;
        text-align:center;
    }

    .shop tr td{
        padding: 10px 5px;
        cursor: pointer;
    }

如何设置数据显示地图距离？并且排序其实不是很难

    if(!!provinceData){
                             for(index in provinceData){
                                 var wd = provinceData[index];
                                 var point = new BMap.Point(wd.longitude, wd.latitude);
                                 var info = getInfo(wd);
                                 addCertMarker(point,info);
                                 var pois = [
                                            globalPoint,
                                            point
                                         ];
                                    var polyline =new BMap.Polyline(pois, {
                                    enableClicking: false,//是否响应点击事件，默认为true
                                    strokeWeight:'3',//折线的宽度，以像素为单位
                                    strokeOpacity: 1,//折线的透明度，取值范围0 - 1
                                    strokeColor:"#0000FF" //折线颜色
                                 });

                                 map.addOverlay(polyline);          //增加折线
                                 var opts = {
                                          position : point,    // 指定文本标注所在的地理位置
                                          offset   : new BMap.Size(0, 0)    //设置文本偏移量
                                }
                                let distance = (map.getDistance(globalPoint,point)/1000).toFixed(2);
                                provinceData[index].distance = distance;
                                var label = new BMap.Label("距离:"+distance+' 千米。',opts);
                                map.addOverlay(label);
                             }

                             provinceData.sort(function (a, b){
                                return a.distance - b.distance;
                             });

这里只要看这两个：
两地距离：                              
  var label = new BMap.Label("距离:"+distance+' 千米。',opts);
数组数数据按距离排序（由小到大）：                               
 provinceData.sort(function (a, b){
      return a.distance - b.distance;
 });

如何触发数据显示呢？这里有个问题我是拼接的html，Object并不能传递参数怎么办？

1.设置一个全局的参数，用于接收请求返回参数
2.点击事件传递数组数据下标，用于接收
全局参数：   var provinceData = [];
数组下标
    var html = "";
                            for(index in provinceData){
                                var wd = provinceData[index];
                                html+= ""
                                     +''+wd.name+''
                                     +''+wd.mobile+''
                                     +''+wd.distance+''
                                     +''+getWdLevel(wd.level)+''
                                     +''
                            }
                            $('#provinceData').html(html);
通过figures方法传递数组下标，然后触发事件就可以完成。
触发百度地图事件：
map.closeInfoWindow();
map.openInfoWindow(infoWindow,point); //开启信息窗口
map.addOverlay(marker);

原始代码：

<%@ page language="java" isErrorPage="true" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 


    

       
    
    
<%--    <%@include file="/WEB-INF/inc/common.jsp"%> --%>
    
    
    
     
    
    
    
    
    
    
    
    
    
     
<%--     
    
    
      --%>
    
      
       
       
   
    


    


    

    
    
    

        共查询到位客户
    
    

        

      
查询条件
      
门店名称：
      
门店地址：
      
省：
                            省
      
市：
                            市
                        
                         
                        
        
施工项目：
                
                
                
        

        

            
            车主位置：
             公里
            
        


            
            

            
            

            

            

                

                    

                    

                        
门店名称
                        
门店电话
                        
距离
                        
授权门店