js能否在图片上做标记？或有什么第三方类库可以调用？

yami251139 2009-06-01 02:24:44

http://download.csdn.net/source/1371561
这是具体的内容。
想问下，如何才能实现类似googlemap那种一点图片，然后在那个坐标出现一个标记的功能。
已经取到坐标了，但是我不知道怎么加标记的图片到背景的图片上去？
还是我思路有问题？应该用别的方法做？
总的功能是
1.图片可以拖动，放大缩小
2.双击图片，会出现一个标记。可以多次点击。
3.保存，把坐标保存到数据中。

但不知道如何在图片上做标记。
望js高手指教，谢谢。

...全文

1144 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

vl525lv 2010-05-27

打赏
举报

[Quote=引用 9 楼 free_wind22 的回复:]
做了个简单的, 标记位置保存在cookie里, 可以参考下.

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org……
[/Quote]

这样拖动图片或者放大缩小标记的位置就发生改变了
能不能标记跟着图片放缩和拖动呢？？？

vl525lv 2010-05-27

打赏
举报

mark 学习

fuzerony 2010-01-25

打赏
举报

这苦恼着这个问题。。
感谢为这问题做出贡献的前辈们。。。

karl122 2009-08-05

打赏
举报

谢谢。对我有用。

qq249143834 2009-08-05

打赏
举报

学习了

yami251139 2009-07-16

打赏
举报

已解决，谢谢ls的参考意见

囧 2009-06-02

打赏
举报

做了个简单的, 标记位置保存在cookie里, 可以参考下.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>测试图片标记</title>

<style type="text/css">

#container{

	position:relative; width:400px; height:300px; border:1px solid #CCC; overflow:hidden;

}

#map{

	position:absolute;

}

.mark{

	position:absolute; width:6px; height:6px; font-size:0px; background:#FF0000;

}

</style>

<script type="text/javascript">

var mark = [];



function setCookie(name,value)

{

    var Days = 365;

    var exp  = new Date();

    exp.setTime(exp.getTime() + Days*24*60*60*1000);

    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

function getCookie(name)     

{

    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

     if(arr != null) return unescape(arr[2]); return null;



}

function delCookie(name)

{

    var exp = new Date();

    exp.setTime(exp.getTime() - 1);

    var cval=getCookie(name);

    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}



function $(id){

	return document.getElementById(id);

}

function point(x, y){

	this.x = x;

	this.y = y;

}

function getOffset(obj){

	var x = 0, y = 0;

	while(obj){

		x += obj.offsetLeft;

		y += obj.offsetTop;

		

		obj = obj.offsetParent;

	}

	return {x : x, y : y };

}

function addMark(p, x, y, index){

	var div = document.createElement("div");

	div.id = "mark" + index;

	div.className = "mark";

	div.style.left = x + "px";

	div.style.top = y + "px";

	p.appendChild(div);

}

function bindEvent(){

	$("map").ondblclick = function(oEvent){

		oEvent = oEvent || event;

		var container = $("container");

		var offset = getOffset(container);

		var x = oEvent.clientX - offset.x;

		var y = oEvent.clientY - offset.y;

		addMark(container, x, y, mark.length);

		mark.push(x + "," + y);

		saveMark();

	};

}



function saveMark(){

	setCookie("mark", mark.join("|"));

}

function loadMark(){

	var cookie = getCookie("mark");

	if(cookie){

		mark = cookie.split("|");

		var container = $("container");

		for(var i=0; i<mark.length; i++){

			addMark(container, mark[i].split(",")[0], mark[i].split(",")[1], i);

		}

	}

}

function clearMark(){

	var container = $("container");

	for(var i=0; i<mark.length; i++){

		container.removeChild($("mark"+i));

	}

	mark.length = 0;

	saveMark();

}

window.onload = function(){

	bindEvent();

	loadMark();

};

</script>

</head>



<body>

<div id="container">

	<div id="map">

		<img src="http://www.0755-0755.com/map/map/1.jpg" />

    </div>

</div>

<br />

<input type="button" value="清除标记" onclick="clearMark()"/>

</body>

</html>

yami251139 2009-06-02

打赏
举报

alert出来是有东西的。。。

yami251139 2009-06-02

打赏
举报

[Quote=引用 6 楼 Free_Wind22 的回复:]
图片上放个层, 用来显示标记, 然后把坐标保存到数据库

刷新页面的时候, 在onload里把标记显示出来.
[/Quote]对地，我就是要这个效果！！！
不过。。。我写了的增加标记的js代码都没用。。。不知道咋回事？

var markid = 1;

    function AddMark() {

        var currentX = document.getElementById("ClientX").value;

        var currentY = document.getElementById("ClientY").value;

        var newMark = document.createElement("div");

        newMark.innerHTML = "<div id='layer" + markid + "' style='visibility:visible;border:2px solid red;position: absolute;z-index:3;width:3px;height:3px;left:" + currentX + "px;top:" + currentY + "px;' ondblclick='javascript:alert(aa)'> </div>";



        document.getElementById("flow").appendChild(newMark);

        alert(newMark.innerHTML);

        markid++;

    }

点了以后不报错，不显示。。。

囧 2009-06-01

打赏
举报

图片上放个层, 用来显示标记, 然后把坐标保存到数据库

刷新页面的时候, 在onload里把标记显示出来.

yami251139 2009-06-01

打赏
举报

[Quote=引用 4 楼 xiaojing7 的回复:]
首先你那个山水画应该设为背景图，然后你的标记（可以拖动的），2个不同的层
保存？
如果要记录坐标，我看你已经取出来位置了
保存加标记的图片到背景的图片这个的话需要用服务器端语言来实现，例如.NET的GDI+来实现。
JS脚本不能操作

总体来说你要对一个原始的图片进行操作，那么用GDI+吧
[/Quote]
晕倒了。。。看来js不是万能的。。。我一直以为js是万能的呢。。。
哎~~~
gdi+。。。要搞会这个东西估计也不一天两天的事情。。。。哎