地图图片坐标定位的问题。

我有一张市区地图，1024*768，我想在地图上，在指定的坐标位置，加上一个箭头图片，用来定位，请问用javascript实现容易吗？因为我需要定位很多信息，坐标的位置我应该怎么传递,不用asp之类的，只用javascript可以实现吗？
分不够再加。谢谢！

解决方案 »

  1.   

    先计算出图片的绝对位置，然后根据坐标计算出箭头图片的left和top，图片位置为absolute就可以在指定坐标上显示箭头了~
      

  2.   

    var getAbsoluteTop = function(obj){
    var top = 0;
    while(obj.tagName != "body"){
    top = obj.offsetTop;
    if(obj.parent){
    obj = obj.parent;
    }else{
    break;
    }
    }
    return top;
    }
    var getAbsoluteLeft = function(obj){
    var left = 0;
    while(obj.tagName != "body"){
    left = obj.offsetLeft;
    if(obj.parent){
    obj = obj.parent;
    }else{
    break;
    }
    }
    return left;
    }得到top Left 后箭头图片位置为absolute。　
      

  3.   

    放一个Div，把图片作为它的背景，div中放一些子Div或其他图片通过margin-top,margin-left来确定他们的
    位置
      

  4.   

    有个问题：地图上有很多的宾馆，车站等信息。
    每个宾馆，车站等都有一个页面，在每个页面，我想有个链接，标注它在地图上的位置，如果这样实现有没有什么简便的方法？这是地图dunhuangguanghui.com/traffic/dunhuangcitymap.html。比如标定敦煌宾馆应该这么做？
    我是做网页的新手，很少接触脚本语言，能否给个demo？不胜感激！
      

  5.   


     <style>
     #map { width:450px; height:344px; background: url('http://www.allzg.com/upload/2006_09/06090800003951.gif') no-repeat;}
     </style>
     <BR>123<BR>456<BR>789<BR>
    <div id="map"></div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var data = new Array();
    data[0] = ['北京',285,100];
    data[1] = ['上海',330,160]; var div, i;
    for (i=0; i<data.length; i++)
    {
    div = document.createElement("div");
    div.style.position = "relative";
    div.style.left = data[i][1];
    div.style.top = data[i][2];
    div.innerHTML = "<img src='http://www.haoto.cn/images2/wysucai/xiao/Arrow/057.gif' height='14px'>"+ data[i][0];
    div.style.color = "#FF0000";
    document.getElementById('map').appendChild(div);
    }
    //-->
    </SCRIPT>
      

  6.   

    推荐楼主用OpenLayer这个js框架，用一张图片做地图，然后就可以直接获得用经纬度表示的坐标点，精确到小数点后八位吧，，，哈哈。
      

  7.   


    OpenLayer是可以就Lz的问题，你可以在图片上用div的z-index或是position：relative;相对布局
    让div浮动在图片上方，设置透明。这样就可以在这个div上添加链接或是js操作即可。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>map.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
         .map {
         width: 800px;
         height: 600px;
         background: transparent url("http://hiphotos.baidu.com/pjw4321/pic/item/13ae8d600d0e005cebf8f885.jpg") no-repeat center center;
         }
        
         .city {
         height: 20px;
         width: 20px;
         position: absolute;
         left: 505px;
         top: 505px;
         cursor: pointer;
         border: 1px solid red;
         }
        </style>  </head>
      
      <body>
        <div class="map"></div>
        <div class="city" onclick="alert('广东');"></div>
      </body>
    </html>
    点击广东就有反应，如果要更精确可以将div缩小，1px的宽高。铺满这个区域即可
      

  8.   

    地图API都有提供JS接口，可以利用JS添加自定义的标注。