继续编写“圳品”信息系统，要有一个“概要信息”，统计各县区的企业和“圳品”数量信息，并在地图上标注，这样更直观一些。
标注是将<div>放在地图图片上，每个县（区）一个div，将每个县（区）的企业和“圳品”数量信息放在对应的div里显示。
要让<div>显示在地图图片上，就要用到css的 z-index，地图图片不设置z-index，但将每个县（区）的div的z-index设置为 1。
为了让每个县（区）<div>显示在地图图片的对应区域内，我们需要计算每个县（区）<div>在地图图片的相对左上角坐标。
另外，地图上的每个 县（区）的区域大小不尽相同，区域狭小的 县（区）显示信息有时需要换行，我们这里用div的width来控制。
因为有11个县（区），就将每个县（区）<div>的参数放在一个数组 aAreaMapCoordinate里。
我们首先要取得地图图片左上角位置在网页中的绝对值，这里用getElementPagePosition()来获取，然后动态生成每个县（区）<div>。
实现的效果如下图：
完整的代码如下：
<html>
<body>
<div>
<img
src border="0" usemap="#planetmap" alt="Planets" id="mapHc" />
<!-- //相对位置relative
<div id="areaTe" >天峨</div>
<div id="areaNd" >南丹</div>
<div id="areaHj" >环江</div>
<div id="areaLc" >罗城</div>
<div id="areaFs" >凤山</div>
<div id="areaDl" >东兰</div>
<div id="areaJcj" >金城江</div>
<div id="areaYz" >宜州</div>
<div id="areaBm" >巴马</div>
<div id="areaDh" >大化</div>
<div id="areaDa" >都安</div>
//-->
<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, '" undefined"? 'width:'+aAreaMapCoordinate[i][2]+'px': null),';z-index: 1;">','xx家企业xx个圳品','</div>');
}
</script>
</div>
</body>
</html> 
