关于百度地图的数据展示

Posted 2020-10-10 一望无垠

toMapList

[{
"dataId":"1506398830646205",
"createTime":"2017-09-26 12:07:10",
"updateTime":"2017-09-28 10:10:31",
"belongs":"美国加利福利亚",
"name":"马修麦康纳",
"birthday":"2017-09-26 00:00:00",
"sex":"男",
"nation":"凯尔特人",
"sysjlx":"莱昂纳多莱昂纳多莱昂纳多莱昂纳多莱昂纳多莱昂",
"zzmm":"民主党",
"jg":"奥地利",
"major":"电影",
"hjszd":"旧金山",
"zgxl":"本科",
"byyx":"北大",
"cjgzsj":"2017-09-26 00:00:00",
"yddh":"18949803467",
"jd":"114.543379",
"wd":"38.026485"
}]       

<script type="text/javascript">
    $(function(){
        map = new BMap.Map("mapDiv");
        map.centerAndZoom("河北省", 7);  // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP ]}));   //添加地图类型控件
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        getBoundary();
        var list=${toMapList};
        //显示救援专家时应该具有的属性
        var expertAttr = [‘belongs‘,‘birthday‘,‘sex‘,‘nation‘,‘sysjlx‘,‘zzmm‘,‘jg‘,‘major‘,‘hjszd‘,‘zgxl‘,‘gzdw‘,‘byyx‘,‘dwdz‘,‘zw‘,‘zc‘,‘zytc‘,‘bgdh‘,‘yddh‘];

        for(var p in list){
            handle(list[p],expertAttr);
            addMarker(list[p].jd,list[p].wd,"styles/images/reExperts.png",list[p].name,list[p]);
        }
    });
    function handle(content,type){//处理内容中的空字符串
        for(var s in type){
            if(content[type[s]]==undefined){
                content[type[s]]="暂无";
            }
        }
    }
    function addMarker(x,y,img,title,content){//
        var point = new BMap.Point(x,y);
        var myIcon = new BMap.Icon(img, new BMap.Size(40,40));
        var marker = new BMap.Marker(point,{icon:myIcon});
        map.addOverlay(marker);
        var opts = {
                  width : 500,     // 信息窗口宽度
                  height: 330,   // 信息窗口高度
                  title:‘姓名：‘+title
                };
            var cont = ‘<div style="overflow-y: auto; height: 300px;"><table>‘+
                       ‘<tr><td class="t2">所属地区：</td> <td>‘+content.belongs+‘</td> </tr>‘+
                       ‘<tr><td class="t2">出生年月：</td> <td>‘+content.birthday+‘</td> </tr>‘+
                       ‘<tr><td class="t2">性别：</td> <td>‘+content.sex+‘</td> </tr>‘+
                       ‘<tr><td class="t2">民族：</td> <td>‘+content.nation+‘</td> </tr>‘+
                       ‘<tr><td class="t2">适用事件类型：</td> <td>‘+content.sysjlx+‘</td> </tr>‘+
                       ‘<tr><td class="t2">政治面貌：</td> <td>‘+content.zzmm+‘</td> </tr>‘+
                       ‘<tr><td class="t2">籍贯：</td> <td>‘+content.jg+‘</td> </tr>‘+
                       ‘<tr><td class="t2">所学专业：</td> <td>‘+content.major+‘</td> </tr>‘+
                       ‘<tr><td class="t2">户籍所在地：</td> <td>‘+content.hjszd+‘</td> </tr>‘+
                       ‘<tr><td class="t2">最高学历：</td> <td>‘+content.zgxl+‘</td> </tr>‘+
                       ‘<tr><td class="t2">工作单位：</td> <td>‘+content.gzdw+‘</td> </tr>‘+
                       ‘<tr><td class="t2">毕业院校：</td> <td>‘+content.byyx+‘</td> </tr>‘+
                       ‘<tr><td class="t2">单位地址：</td> <td>‘+content.dwdz+‘</td> </tr>‘+
                       ‘<tr><td class="t2">职务：</td> <td>‘+content.zw+‘</td> </tr>‘+
                       ‘<tr><td class="t2">职称：</td> <td>‘+content.zc+‘</td> </tr>‘+
                       ‘<tr><td class="t2">专业特长：</td> <td>‘+content.zytc+‘</td> </tr>‘+
                       ‘<tr><td class="t2">办公电话：</td> <td>‘+content.bgdh+‘</td> </tr>‘+
                       ‘<tr><td class="t2">移动电话 ：</td> <td>‘+content.yddh+‘</td> </tr>‘+
                       ‘</table></div>‘;
                var infoWindow = new BMap.InfoWindow(cont, opts);  // 创建信息窗口对象 
                marker.addEventListener("click", function(){          
                    map.openInfoWindow(infoWindow,point); //开启信息窗口
                });
                /* marker.addEventListener("mouseout", function(){
                    map.closeInfoWindow(); //关闭信息窗口
                }); */
        //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

    }
    
    function getBoundary() { // 设置地图边界线
        var bdary = new BMap.Boundary();
        bdary.get("河北省", function(rs) {
            //map.clearOverlays();        //清除地图覆盖物               //给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
            var count = rs.boundaries.length; //行政区域的点有多少个
            for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(
                        rs.boundaries[i], 
                        {  
                           strokeWeight: 2, 
                           strokeColor: "#0000ff" ,
                           fillColor: ""}); //建立多边形覆盖物 fillColor 字体显示出来
            map.addOverlay(ply); //添加覆盖物
            map.setViewport(ply.getPath()); //调整视野
            }
        });
        map.centerAndZoom(new BMap.Point(125.552056, 43.658576), 7);
    }
</script>

<body>
    <div id="mapDiv"
        style="position: absolute; width: 100%; height: 100%; border: 1px solid #000;">
    </div>
</body>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>救援专家</title>
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      td{border:1px #ccc solid;width:300px;text-align:center;padding: 5px 0;}
      table{border-collapse:collapse;margin:0 auto;table-layout: fixed;font-size:14px;}
      .t2{background:#F0F0F4;font-weight:bold;font-size:14px;width:200px;}
      .anchorBL {
            display: none;
        }
    </style>
<script type="text/javascript" src="<%=basePath %>/resources/scripts/frameworks/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dpRMsClGWtxAzgjYc9aswy9j"></script>