jsp在图片上添加标记点功能

最新推荐文章于 2024-07-26 02:52:20 发布

回到从前变成猫

最新推荐文章于 2024-07-26 02:52:20 发布

阅读量1.2k

点赞数

分类专栏： jsp 文章标签： jsp u uo

本文链接：https://blog.csdn.net/qq_38017636/article/details/81359220

版权

jsp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!-- 引用公用部分 -->
    <%@include file="/header.jsp" %>
</head>
<body style="margin: 0;">
		<div  id="signX" >
		    <img usemap="#tMap" id="img" src="<%=basePath %>hazard/back/basegeneral/baserequest/showimagefirstpage.do" height="800" width="1600" onclick="imageClick(this)">
		    <map name="tMap" id="tMap">
    	
        <c:forEach items="${objList}" var="bpCoordinate" varStatus="st">
            <div style="
                    background-image:<c:if test="${bpCoordinate.statue == '42'}">url('<%=basePath %>assets/images/location.png')</c:if>
                    <c:if test="${bpCoordinate.statue == '43'}">url('<%=basePath %>assets/images/location1.png')</c:if>;
                    width: 30px; height: 30px;
                    left: ${bpCoordinate.xCoordinate}px; top:${bpCoordinate.yCoordinate}px;
                    position: fixed; "
                 onclick="show_del('标记详情','<%=basePath %>hazard/back/pictureMap/pictureInfo/list.do?dscoordinateId=${bpCoordinate.id}','1200','800')"
            >
            </div>
        </c:forEach>
    </map>
</div>
<div style="display: none">
    X:<input id="xxx" type="text" />  Y:<input id="yyy" type="text" />
</div>



<!-- 引用公用部门 -->
<%@include file="/bottom.jsp" %>
<script type="text/javascript">
    function cnvs_getCoordinates(e) {
        x = e.clientX;
        y = e.clientY;
    }

    function showContent() {
        $.sign.bindSign('#signx');
        $.get('<%=basePath%>hazard/back/pictureMap/pictureInfo/show.do',function (data) {
            var objList = data.objList;
            var mapData = [];
            $.each(objList,function (i,obj) {
                var tobj = {
                    m:obj.xCoordinate,
                    n:obj.yCoordinate
                };
                mapData.put(tobj);
                $.sign.loadingSign(mapData);
            });
        });
    }



    function imageClick(el) {
        mouseMove(event);
        var x = parseInt(document.getElementById('xxx').value)-el.offsetLeft;
        var y = parseInt(document.getElementById('yyy').value)-el.offsetTop;
        show_del('新增标记信息','<%=basePath%>hazard/back/pictureMap/pictureInfo/openEdit.do?id=00 &xCoordinate='+x+'&yCoordinate='+y,'900','700')
    }

    function mouseMove(event) {
        event = event || window.event;
        var mousePos = mousePosition(event);
        document.getElementById('xxx').value = mousePos.x;
        document.getElementById('yyy').value = mousePos.y;
    }

    function mousePosition(event){
        if(event.pageX || event.pageY){
            return {x:event.pageX, y:event.pageY};
        }
        return {
            x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:event.clientY + document.body.scrollTop  - document.body.clientTop
        };
    }

    function show_del(title,url,w,h){
        layer_show(title,url,w,h);
    }


</script>
</body>
</html>

回到从前变成猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsp在图片上添加标记点功能

&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&q
复制链接

扫一扫

专栏目录