声明:欢迎批评指正
来源:要求把地图上某一地区范围坐标获取到以便高亮这一区域,量很大,需要工具辅助
参考文献:
1.http://blog.csdn.net/comeonj/article/details/6876827
2.http://www.xuebuyuan.com/260563.html
测试环境:win7+ie8
使用方法:先把图片放到同一目录下,输入文件名,点设置,在图片某一地区(比如北京)按点黑点,会记录下所有点坐标,点坐标集合文本框,自动复制坐标,坐标复制后自动清除集合,如果点点的不满意可以点撤销撤销最后一个点,点重置可以重新画点。
还存在的一点问题:点点时要让画面滚动条在最顶部,缩放100%,另外要制作一个点的图片,要不要太大,名称命名为dot.png
进入正文:
<!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>
<title>无标题页</title>
<script language="javascript">
var xys = "";
function down(e){
e = e || window.event;
var img_x = e.clientX;
var img_y = e.clientY;
var idx = document.getElementById("idx").value;
document.getElementById("idx").value=parseInt(idx,10)+1;
var imgobj=document.createElement("img");
imgobj.style.position="absolute";
imgobj.style.left=img_x+"px";
imgobj.style.background="black";
imgobj.style.top=img_y+"px";
imgobj.style.zIndex=10;
imgobj.src="dot.png";
imgobj.size=2;
imgobj.setAttribute("align","center");
imgobj.id = "dot"+idx;
document.body.appendChild(imgobj);
document.getElementById('inp_x').value = e.offsetX;
document.getElementById('inp_y').value = e.offsetY;
if(document.getElementById("txa").value!='')
document.getElementById("txa").value=document.getElementById("txa").value+","+e.offsetX+","+e.offsetY;
else
document.getElementById("txa").value=e.offsetX+","+e.offsetY;
}
function setPic(){
document.getElementById("imgPic").src=document.getElementById("txt").value;
reset();
}
function copyTxt()
{
var txtobj=document.getElementById("txa");
if(txtobj.value!=""){
txtobj.select();
document.execCommand("Copy");
alert("已复制好,可以贴粘。");
txtobj.value='';
}
}
function reset(){
xys='';
document.getElementById('txa').value='';
document.getElementById('inp_x').value ='';
document.getElementById('inp_y').value ='';
var idx = parseInt(document.getElementById("idx").value,10);
for(var i=1;i<idx;i++)
{
document.body.removeChild(document.getElementById("dot"+i));
}
document.getElementById("idx").value="1";
}
function cancel()
{
if(document.getElementById("idx").value!='1'){
var idx = parseInt(document.getElementById("idx").value,10)-1;
document.body.removeChild(document.getElementById("dot"+idx));
document.getElementById("idx").value=idx;
var arrXY=document.getElementById("txa").value.split(",");
if(arrXY.length==2){
document.getElementById("txa").value = "";
}else if(arrXY.length>2){
document.getElementById("txa").value=document.getElementById("txa").value.substring(0,document.getElementById("txa").value.length-2-arrXY[arrXY.length-2].length-arrXY[arrXY.length-1].length);
}
}
</script>
</head>
<body>
<pre>
X:<input id="inp_x" type="text" /> Y:<input id="inp_y" type="text" />
<img id="imgPic" οnmοusedοwn="down(event)" src="温州.png"/>
<textarea id="txa" rows="20" cols="30" οnclick="copyTxt()"></textarea>
<input type="text" id="txt" value="温州.png"/>
<input type="button" value="设置图片" οnclick="setPic()"/>
<input type="button" value="撤销" οnclick="cancel()"/>
<input type="button" value="重置" οnclick="reset()"/>
<input type="hidden" id="idx" value="1"/>
</pre>
</body>
</html>