百度地图添加坐标点

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

    ]
}
复制代码

最终效果

 

posted @   大番薯没有心  阅读(52)  评论(0)  编辑  收藏  举报
相关博文：
·  手机H5考试页面
·  HplusAdmin ASP.NET基本权限管理系统
·  百度地图关键字搜索并拾取坐标
·  记一次百度地图JSAPI的使用
·  百度地图手绘标点
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示
AI IDE Trae