图片上标记功能(未实际使用,同百度地图相似)
以下为未测试,单测试页面可用,可以做为参考修改JS使用
控制器方法
[HttpPost] public ActionResult AddMark() { Mark_Info mark = new Mark_Info(); mark.MarkName = Request.Form["MarkName"]; mark.MarkRemark = Request.Form["MarkRemark"]; mark.MarkX = Convert.ToInt32(Request.Form["x"]); mark.MarkY = Convert.ToInt32(Request.Form["y"]); mark.ImageId = 1; if (Mark_InfoBLL.AddMark(mark) > 0) { return Content("ok"); } else { return Content("no"); } }
视图页面:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript"> //同时解决了这个兼容性问题，因为火狐和iE的内核不同，火狐不用ie中的window.event事件，而是有个参数e $(function () { var i = 0; $("#btn").click(function () { i++; $("#content").append($("<img src=\"/Images/timg.png\" id=\"icon" + i + "\"+\"></img>")); $("#icon" + i + "").css({ "width": "20px", "height": "20px", "position": "absolute" }); $("#content").mousemove(function () { if (arguments.length > 0) { //非ie浏览器下的 var x1 = arguments[0].clientX; var y1 = arguments[0].clientY; } else { //ie浏览器下的 var x1 = window.event.clientX; var y1 = window.event.clientY; } $("#icon" + i + "").css({ "left": x1 - 10, "top": y1 - $("#icon" + i + "").height() }); $("#btn").val(x1 + ";" + y1); }).click(function () { $("#content").unbind(); $("#formDiv").css({ "display": "block", "position": "absolute", "left": $("#icon" + i + "").position().left + $("#icon" + i + "").width(), "top": $("#icon" + i + "").position().top + $("#icon" + i + "").height() }); $("#x").val($("#icon" + i + "").position().left); $("#y").val($("#icon" + i + "").position().top); }); $("#save").click(function () { $.post("/Image/AddMark", { x: $("#x").val(), y: $("#y").val(), MarkName: $("#name").val(), MarkRemark: $("#remark").val() }, function (msg) { $("#formDiv").css("display", "none"); $("#name").val(""); $("#remark").val(""); }); }); }); }); </script> </head> <body> <div> <input type="button" id="btn" value="标记" /> <div id="content" style="width: 1024px; height: 682px; background-size:100% 100%; background-image:url(/Images/psbCA4J07XF.jpg);"> <div style="width: 300px; height: 100px; border: 1px solid red; display: none" id="formDiv"> <input type="hidden" name="x" id="x" /> <input type="hidden" name="y" id="y" /> 名称：<input type="text" id="name" name="MarkName"><br /> 备注：<input type="text" id="remark" name="MarkRemark" style="width: 200px; height: 50px;" /><br /> <input type="button" id="save" value="保存" /> </div> </div> </div> </body> </html> @*<script id="addMark" type="text/template"> <form action="/Image/AddMark/" method="post" > <input type="hidden" name="x" id="x" value="[UserImg]" /> <input type="hidden" name="y" id="y" /> 名称：<input type="text" id="name" name="MarkName"><br/> 备注：<input type="text" name="MarkRemark" style="width:200px; height:50px;" /><br/> <input type="submit" onclick=" return sub(this)" value="保存" /> </form> </script>*@
