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":[]
}
最终效果