之前我们在“圳品”信息系统中实现了在网页地图图片上加注企业和“圳品”数量信息，实现的方法是直接用document.write在<body>里输出<div>来实现的。详见：
在网页地图图片上加注企业和“圳品”数量信息
在引入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>显示效果如下：
