http://download.csdn.net/source/1371561
这是具体的内容。
想问下，如何才能实现类似googlemap那种一点图片，然后在那个坐标出现一个标记的功能。
已经取到坐标了，但是我不知道怎么加标记的图片到背景的图片上去？
还是我思路有问题？应该用别的方法做？
总的功能是
1.图片可以拖动，放大缩小
2.双击图片，会出现一个标记。可以多次点击。
3.保存，把坐标保存到数据中。但不知道如何在图片上做标记。
望js高手指教，谢谢。
这是具体的内容。
想问下，如何才能实现类似googlemap那种一点图片，然后在那个坐标出现一个标记的功能。
已经取到坐标了，但是我不知道怎么加标记的图片到背景的图片上去？
还是我思路有问题？应该用别的方法做？
总的功能是
1.图片可以拖动，放大缩小
2.双击图片，会出现一个标记。可以多次点击。
3.保存，把坐标保存到数据中。但不知道如何在图片上做标记。
望js高手指教，谢谢。
保存？
如果要记录坐标，我看你已经取出来位置了
保存加标记的图片到背景的图片 这个的话需要用服务器端语言来实现，例如.NET的GDI+来实现。
JS脚本不能操作总体来说你要对一个原始的图片进行操作，那么用GDI+吧
哎~~~
gdi+要搞会这个东西估计也不一天两天的事情。哎
不过我写了的增加标记的js代码都没用不知道咋回事？
var id = 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" + id + "' 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);
id++;
}点了以后不报错，不显示
<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;
}
.{
position:absolute; width:6px; height:6px; font-size:0px; background:#FF0000;
}
</style>
<script type="text/javascript">
var = [];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 = "" + index;
div.className = "";
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, .length);
.push(x + "," + y);
saveMark();
};
}function saveMark(){
setCookie("", .join("|"));
}
function loadMark(){
var cookie = getCookie("");
if(cookie){
= cookie.split("|");
var container = $("container");
for(var i=0; i<.length; i++){
addMark(container, [i].split(",")[0], [i].split(",")[1], i);
}
}
}
function clearMark(){
var container = $("container");
for(var i=0; i<.length; i++){
container.removeChild($(""+i));
}
.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>