关于百度地图的数据展示
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>优质内容筛选与推荐>>
1、C#代码规范（范例）
2、看看马化腾是怎么创业的
3、排序算法汇集
4、设计模式之责任链模式
5、js 判断字符串是否为空或是否全为空格