29 12 2023

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":[


    ]

}

最终效果

undefined

延伸阅读
  1. Dapper+Mysql 使用LIKE模糊查询写法踩坑
  2. Mysql开启远程连接
发表评论