在网页地图图片上加注企业和“圳品”数量信息

小鱼儿 2024-03-27 13:22 50阅读 0赞

继续编写“圳品”信息系统，要有一个“概要信息”，统计各县区的企业和“圳品”数量信息，并在地图上标注，这样更直观一些。

标注是将<div>放在地图图片上，每个县（区）一个div，将每个县（区）的企业和“圳品”数量信息放在对应的div里显示。

要让<div>显示在地图图片上，就要用到css的 z-index，地图图片不设置z-index，但将每个县（区）的div的z-index设置为 1。

为了让每个县（区）<div>显示在地图图片的对应区域内，我们需要计算每个县（区）<div>在地图图片的相对左上角坐标。

另外，地图上的每个 县（区）的区域大小不尽相同，区域狭小的 县（区）显示信息有时需要换行，我们这里用div的width来控制。

因为有11个县（区），就将每个县（区）<div>的参数放在一个数组 aAreaMapCoordinate里。

我们首先要取得地图图片左上角位置在网页中的绝对值，这里用getElementPagePosition()来获取，然后动态生成每个县（区）<div>。

实现的效果如下图：

![2b7c066622b5582f2efbbe2b82fac804.jpeg][]

完整的代码如下：

<html>
    
    <body>
    <div>
    <img
    src="http://img.mp.itc.cn/q_70,c_zoom,w_640/upload/20170507/4c68610712bc408d892d205d0e321655_th.jpeg" border="0" usemap="#planetmap" alt="Planets" style="margin-top:0px;" id="mapHc" />
    
    <script>
    function getElementPagePosition(e)
    {
      //计算x坐标
      var actualLeft = e.offsetLeft;
      var current = e.offsetParent;
      while (current !== null)
      {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
      }
      //计算y坐标
      var actualTop = e.offsetTop;
      var current = e.offsetParent;
      while (current !== null)
      {
        actualTop += (current.offsetTop+current.clientTop);
        current = current.offsetParent;
      }
      //返回结果
      return {x: actualLeft, y: actualTop}
    }
    
      //县区div在河池地图上的参数
      //参数说明：1：div顶部偏移px，2：div左侧偏移px，3：div宽度px（指定style中的width）
      aAreaMapCoordinate = new Array(
        [0,0],    //hc，0
        [245,270],//jcj，1
        [280,420],//yz，2
        [190,480,70],//lc，3
        [145,335],//hj，4
        [150,220,70],//nd，5
        [155,110,70],//te，6
        [285,200,70],//dl，7
        [350,140,70],//bm，8
        [265,100,70],//fs，9
        [360,350,70],//da，10
        [380,250,70] //dh，11
        );
        //alert(document.getElementById("mapHc"));
        var mapHcLeftTop = getElementPagePosition(document.getElementById("mapHc"));
        var i;
        for (i=0; i <12 ; i++)
        {
            document.write('<div class="ts" id="area', i, '" style="position: absolute;top:', aAreaMapCoordinate[i][0]+mapHcLeftTop.y, 'px;left:', aAreaMapCoordinate[i][1]+mapHcLeftTop.x,'px;',(typeof(aAreaMapCoordinate[i][2])!="undefined"? 'width:'+aAreaMapCoordinate[i][2]+'px': null),';z-index: 1;">','xx家企业xx个圳品','</div>');
        }
    </script>
    </div>
    </body>
    </html>

[2b7c066622b5582f2efbbe2b82fac804.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7227382c00a44ef8991769e5eec61e76.png