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",

<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>

關於百度地圖的數據展示