获取地图上某一地区坐标集合的工具

声明:欢迎批评指正

来源:要求把地图上某一地区范围坐标获取到以便高亮这一区域,量很大,需要工具辅助

参考文献:

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>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

humors221

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值