html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>查看签到信息-地图</title>
<script src='/resources/js/jquery.min.js' type='text/javascript' language='javascript'></script>
<script src='/resources/js/json2.js' type='text/javascript' language='javascript'></script>
<script src='/resources/js/app.js?v=202312291520' type='text/javascript' language='javascript'></script>
<script src='DayAttendanceMap.js?r=202312291520' type='text/javascript' language='javascript'></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?&v=2.0&ak=用你自己的key"></script>
<link href="/resources/css/BMapView.css" rel="stylesheet" type="text/css" />
<style>
html, body, form {
height: 100%;
margin: 0 auto;
}
#bdmap {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="bdmap">
</div>
</form>
</body>
</html>
js
//重置标点对象
var objMap = null;
var bPoints = new Array();
$(function () {
loadData();
});
function loadData() {
var map = new BMap.Map("bdmap");
var point = new BMap.Point(120.157956, 30.277439);
map.centerAndZoom(point, 11);
map.enableScrollWheelZoom(true);
objMap = map;
var userId = app.getRequest('UserId');
var attDay = app.getRequest('AttDay');
$.ajax({
url: 'Attendance.ashx',
type: 'POST',
data: {
PostType: "get",
ActionType: "DayAttendance",
UserId: userId,
AttDay: attDay,
r: Math.random()
},
dataType: 'json',
success: function (data) {
if (data && data.success) {
$.each(data.rows, function (index) {
addPoint(data.rows[index]);
});
if (bPoints.length > 0) {
//重置缩放级别和中心点
var view = objMap.getViewport(eval(bPoints));
var mapZoom = view.zoom;
var centerPoint = view.center;
//objMap.centerAndZoom(centerPoint, mapZoom); mapZoom 自适应缩放级别
objMap.centerAndZoom(centerPoint, 11);
}
}
}
});
}
function addPoint(pointData) {
if (!pointData.SIGNINCOORDINATE) {
return;
}
var lng = pointData.SIGNINCOORDINATE.split(',')[0];
var lat = pointData.SIGNINCOORDINATE.split(',')[1];
var icon = new BMap.Icon("/resources/images/location_small.png", new BMap.Size(14, 22));
var point = new BMap.Point(parseFloat(lng), parseFloat(lat));
bPoints.push(point); // 添加到百度坐标数组 用于自动调整缩放级别
var marker = new BMap.Marker(point, {
icon: icon
}); // 创建标注
objMap.addOverlay(marker); // 将标注添加到地图中
var opts = {
position: point, // 指定文本标注所在的地理位置
offset: new BMap.Size(6, -20) //设置文本偏移量
}
var projectName = '';
if (pointData.PROJECTNAME) {
projectName = '-' + pointData.PROJECTNAME;
}
var label = new BMap.Label(app.getTDate(pointData.SIGNINDATE).substring(11, 16) + '-' + pointData.ATTTYPE + projectName, opts); // 创建文本标注对象
label.setStyle({
color: "red",
fontSize: "12px",
height: "20px",
lineHeight: "20px",
fontFamily: "微软雅黑"
});
objMap.addOverlay(label);
}
数据格式
{
"total":0,
"success":true,
"msg":"",
"obj":null,
"rows":[
{
"GUID":"3691515d-269c-4f27-b3c0-4b8fbc4fd8f6",
"LZYUSERID":"9635727a-027d-4200-89d1-c32be2f3d339",
"SIGNINDATE":"2023-11-23T08:22:43",
"SIGNINCOORDINATE":"120.11504470442085,30.347792030190185",
"ATTTYPE":"项目打卡",
"PROJECTNAME":"杭州余杭新文服饰有限公司厂房改建项目",
"SIGNMONTH":"2023-11",
"SIGNDAY":"2023-11-23"
},
{
"GUID":"8d9af7c8-f72c-486f-889e-348357f7d0df",
"LZYUSERID":"9635727a-027d-4200-89d1-c32be2f3d339",
"SIGNINDATE":"2023-11-23T17:49:47",
"SIGNINCOORDINATE":"120.11098424440662,30.333185555269385",
"ATTTYPE":"项目打卡",
"PROJECTNAME":"杭政储出【2021】15号地块商业商务用房",
"SIGNMONTH":"2023-11",
"SIGNDAY":"2023-11-23"
}
],
"id":null,
"text":null,
"status":null,
"children":[
]
}
最终效果
