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

逃离我推掉我的手 2024-03-23 14:01 9阅读 0赞

之前我们在“圳品”信息系统中实现了在网页地图图片上加注企业和“圳品”数量信息，实现的方法是直接用document.write在<body>里输出<div>来实现的。详见：

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

在引入tab选项卡来进行分类显示后，这些显示企业和“圳品”数量信息的<div>在切换选项卡时就不听指挥了。为此，我们做了改进，通过地图图片所在<div>的innerHTML来增加<div >显示企业和“圳品”数量信息，也就是将这些显示企业和“圳品”数量信息的<div>的父元素从<body>改为地图图片所在<div>，在切换选项卡时，隐藏地图图片所在<div>，显示企业和“圳品”数量信息的<div>作为子元素也将隐藏。

具体代码如下：

<html>
    <head>
      <meta name="Author" content="PurpleEndurer">
      <title>“圳品”信息系统</title>
        <style type="text/css">
     	.ts
    	{
    		font-size:14px;text-align:center;color:orange;
    		text-shadow:
    			-1px -1px 0 #4f4d57,  
    			1px -1px 0 #4f4d57,
    			-1px 1px 0 #4f4d57,
    			1px 1px 0 #4f4d57,
    			0px 2px 2px rgba(0,0,0,0.6);
    	}
     </style>
    </ead>
    <body>
    <div id="divMap" style="border:1px solid red;">
    <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" />
    </div>
    <textarea border="1" id="taDebug"  cols="180" rows="15">debug</textarea>
    <script>
    var taDbg = document.getElementById("taDebug");
    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;
        var divMap = document.getElementById("divMap");
        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>');
    	divMap.innerHTML +=  '<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;': '')+'z-index: 1;">' + 'xx家企业xx个圳品</div>';
    	//divMap.innerHTML +=  '<div class="ts" id="area', i, '" >','xx家企业xx个圳品','</div>'	
    	taDbg.value += '\n\ni=' + i + '\n' + divMap.innerHTML;
        }
    document.getElementById('r').innerText =  divMap.innerHTML;
    </script>
    </body>
    </html>

显示效果如下：

![d07d1c7115a649b1bcc940a617145680.jpeg][]

[Link 1]: https://blog.csdn.net/Purpleendurer/article/details/128884614?spm=1001.2014.3001.5502
[d07d1c7115a649b1bcc940a617145680.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/b2fc1203fded4b768f01729c6c225314.png